Web page speed and performance is very important to the user experience. If your site is too slow, you’ll not only be losing visitors, but also potential customers. Search engines like Google factor a website’s speed into account in search rankings, so when optimizing your site’s speed, you should take everything into consideration. Every millisecond counts.
Here are just a few basic and general suggestions for improving a site’s performance.
1. Defer Loading Content When Possible
Ajax allows us to build web pages that can be asynchronously updated at any time. This means that instead of reloading an entire page when a user performs an action, we can simply update parts of that page.
We can use an image gallery as an example. Image files are big and heavy; they can slow down page-loading speeds of web pages. Instead of loading all of the images when a user first visits the web page, we can just display thumbnails of the images and then when the user clicks on them, we can asynchronously request the full-size images from the server and update the page. This way, if a user only wants to see a few pictures, they don’t have to suffer waiting for all of the pictures to download. This development pattern is called lazy loading.
Ajax/web development libraries like jQuery, Prototype, and MooTools can make deferred content-loading easier to implement.
2. Use External JS and CSS Files
When the user first loads your web page, the browser will cache external resources like CSS and JavaScript files. Thus, instead of inline JavaScript and CSS files, it’s best to place them in external files.
Using inline CSS also increases the rendering time of a web page; having everything defined in your main CSS file lets the browser do less work when rendering the page, since it already knows all the style rules that it needs to apply.
As a bonus, using external JavaScript and CSS files makes site maintenance easier because you only need to maintain global files instead of code scattered in multiple web pages.
3. Use Caching Systems
If you find that your site is connecting to your database in order to create the same content, it’s time to start using a caching system. By having a caching system in place, your site will only have to create the content once instead of creating the content every time the page is visited by your users. Don’t worry, caching systems periodically refresh their caches depending on how you set it up — so even constantly-changing web pages (like a blog post with comments) can be cached.
Popular content management systems like WordPress and Drupal will have static caching features that convert dynamically generated pages to static HTML files to reduce unnecessary server processing. For WordPress, check out WP Super Cache (one of the six critical WordPress plugins that Six Revisions has installed). Drupal has a page-caching feature in the core.
There are also database caching and server-side scripts caching systems that you can install on your web server (if you have the ability to do so). For example, PHP has extensions called PHP accelerators that optimize performance through caching and various other methods; one example of a PHP accelerator is APC. Database caching improves performance and scalability of your web applications by reducing the work associated with database read/write/access processes; memcached, for example, caches frequently used database queries.
4. Avoid Resizing Images in HTML
If an image is originally 1280x900px in dimension, but you need to have it be 400x280px, you should resize and resave the image using an image editor like Photoshop instead of using HTML’s width and height attributes (i.e. <img width="400" height="280" src="myimage.jpg" />). This is because, naturally, a large image will always be bigger in file size than a smaller image.
Instead of resizing an image using HTML, resize it using an image editor like Photoshop and then save it as a new file.
5. Stop Using Images to Display Text
Not only does text in an image become inaccessible to screen-readers and completely useless for SEO, but using images to display text also increases the load times of your web pages because more images mean a heavier web page.
If you need to use a lot of custom fonts in your website, learn about CSS @font-face to display text with custom fonts more efficiently. It goes without saying that you have to determine whether serving font files would be more optimal than serving images.
6. Optimize Image Sizes by Using the Correct File Format
By picking the right image format, you can optimize file sizes without losing image quality. For example, unless you need the image transparency (alpha layers) that the PNG format has to offer, the JPG format often displays photographic images at smaller file sizes.
To learn more about how to decide between JPG, PNG, and GIF, read the following guides:
- The Comprehensive Guide to Saving Images for the Web
- Web Designer’s Guide to PNG Image Format
- JPEG 101: A Crash Course Guide on JPEG
Additionally, there are many tools you can use to further reduce the file weights of your images. Check out this list of tools for optimizing your images.
7. Optimize the Way You Write Code
Look around your source code. Do you really need all the tags you’re using or can you use CSS to help out on the display? For example, instead of using <h1><em>Your heading</em></h1>, you can easily use CSS to make your headings italics using the font-style property. Writing code efficiently not only reduces file sizes of your HTML and CSS documents, but also makes it easier to maintain.
8. Load JavaScript at the End of Your Document
It’s best if you have your scripts loading at the end of the page rather than at the beginning. It allows for the browser to render everything before getting started with the JavaScript. This makes your web pages feel more responsive because the way JavaScript works is that it blocks anything below it from rendering until it has finished downloading. If possible, reference JavaScript right before the closing <body> tag of your HTML documents. To learn more, read about deferring the loading of JavaScript.
9. Use a Content Delivery Network (CDN)
Your site’s speed is greatly affected by where the user’s location is, relative to your web server. The farther away they are, the more distance the data being transmitted has to travel. Having your content cached across multiple, strategically placed geographical locations helps take care of this problem. A CDN will often make your operating cost a little higher, but you definitely gain a speed bonus. Check out MaxCDN or Amazon Simple Storage Service (Amazon S3).
10. Optimize Web Caching
Along with using caching systems, you should create websites that utilize web caching as much as possible. Web caching is when files are cached by the web browser for later use. Things that browsers can cache include CSS files, JavaScript files, and images.
Aside from the basics, such as putting CSS and JavaScript code that are used in multiple pages in external files, there are many ways to make sure that you are caching your files in the most efficient way possible.
For example, you can set HTTP response headers such as Expires and Last-Modified to reduce the need of re-downloading certain files when the user comes back to your site. To learn more, read about caching in HTTP and leveraging browser caching.
To set up HTTP Expires headers in Apache, read this tutorial on adding future expires headers.
Related Content
- Five Ways to Speed Up Page Response Times
- Saving Bandwidth and Improving Site Speed Using CSS Sprites
- 8 Excellent Tools for Optimizing Your Images
- Related categories: Web Development and Usability
Raphael Caixeta is a PHP and iOS developer and co-founder of Grip’d. He likes to blog about web and iOS development at raphaelcaixeta.com. If you’d like to connect with him, you can follow him on Twitter @raphaelcaixeta and add him on Facebook (raphaelcaixeta).
No comments:
Post a Comment