by David Ugale
It’s becoming increasingly important that your web pages load fast. Ideally, a web page should load in 2-3 seconds or less. If your web pages aren’t quite that fast yet, we’ve come up with some tips that can help you speed up your website.
Before you start working on improving the speed of your web pages, you should do some initial testing of your home page and any other important pages that you want to speed up. This will provide you with a good benchmark to improve upon and to evaluate the work that you are doing. Below, we’ve listed a few tools that you can use to test your website speed. In addition to giving you an idea of how fast your web pages are loading, these tools provide detailed performance information for your pages. You can use this information to make further enhancements to speed up your web pages.
WebPageTest will grade your web pages on a series of performance optimizations. It will also do multiple sets of test runs of your web pages that you can compare to each other. WebPageTest is full of options and is ideal for the more technically savvy.
Pingdom’s Website Speed Test returns a clear and easy to read summary of your web page performance, broken down by categories.
Google’s PageSpeed Insights returns a Speed Score for both mobile and desktop versions of your website.
Some other useful tools that can help you benchmark your website pages:
Before you start working on speeding up your website, you should make a current back up of your website and database files. Ideally, you might want to make incremental back ups as you make changes, in case you need to roll back just prior to making some updates.
By far, one of the most significant ways that you can speed up your website is to optimize your images. Besides reducing the size of an image, you also want to make sure that you use the correct file type and image dimensions. There are also some other techniques that you can use, such as the img srcset attribute and lazy loading, that can really help speed up your web pages.
Large images can significantly slow down your web pages, so you’ll want to reduce the file size of an image as much as possible while also retaining an acceptable level of quality. This is obviously a balancing act – you don’t want the image reduced in quality so much that it just doesn’t look good. Consequently, it may take some experimentation on your part to get the image just right.
There are a number of ways to reduce the file size of an image, including image editing software and online tools. Here are some options:
For WordPress, some popular plugins include:
Tip: If you want an easy way to get your images optimized without having to use one of these tools, use GTMetrix to download optimized images.
Click on optimized version to download each image.
There are three common file types that you will probably use for your web pages – JPG, GIF, and PNG. Each of these file types are suited for different types of images, so make sure that you use the correct file type where it is appropriate.
The height and width of an image should only be as large as the area that it needs to fill in your web page. Use image editing software to resize images to fit correctly.
A user on a mobile device doesn’t necessarily need to view the same images as a desktop user. The img srcset attribute specifies a series of available images to display depending on the user’s browser size.
Here is an example:
<img src="logo-small.jpg" srcset="logo-medium.jpg 768w, logo-large.jpg 992w, logo-extra-large.jpg 1200w">
When using this syntax, the user’s browser will examine the available images and then display the image most appropriate for them.
You can also download or copy our version of the script here.
You’ll also need to update any images that you wish to lazy load with the correct attributes:
<img class="lazy" src="logo-placeholder.jpg" data-src="logo-small.jpg" data-srcset="logo-large.jpg 2x, logo-small.jpg 1x">
In the example above, the class attribute specifies that this image will be lazy loaded. The src attribute specifies a placeholder image. The placeholder image is typically a very low quality version of the image that will be loaded by default. The data-src attribute specifies the image that will replace the placeholder image once the image is lazy loaded. Finally, the data-srcset attribute specifies alternate images to use based on the user’s browser size and resolution.
There are also some WordPress lazy loading plugins:
The more resources that you request from your server, the greater the load and the potential for delay in loading those resources. By using a CDN, you can offload some of those resources so that they are served by a third-party instead of your own server, reducing the number of requests from your server. Fortunately, many popular third-party resources are available from a highly-optimized existing CDN that you can use for free. Here are some good candidates to be served from a CDN:
Visit the resource website to get the latest CDN url that you can inforporate into your website.
You can also use a CDN to serve your own resources. MaxCDN and Cloudflare are popular CDNs. These services will take your static resources (images, scripts, stylesheets) and serve them from highly optimized servers that are located throughout the world. To incorporate the CDN into your web pages, you would replace your website’s URL with the URL provided by the CDN.
By default, files are loaded synchronously, in the order in which they appear on the page. Consequently, files loaded later in the page require that the files above them be loaded first.
If you use WordPress, review all of the installed and activated plugins to check if they are still being used on your website. If not, deactivate and/or delete them.
For WordPress, you can try the following plugins:
To see how many requests that your web page is currently making, you can use Google Chrome Developer Tools. Click on the Network tab to see the number of requests in the bottom left corner:
If necessary, refresh your browser window to see the results.
To reduce the number of images, consider using CSS sprites. CSS sprites combine several images into a single image. Using CSS, you can display only certain parts of the image in the section of the page where it is needed. Consequently, multiple image requests become a single image request, reducing page loading time. You can find more information about CSS sprites here.
Caching your website pages can have a significant impact on performance. If you use WordPress, there are a number of popular plugins, including: