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.
Do an Initial Test of your Website Speed
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.
GTMetrix analyzes a web page and returns scores for Google PageSpeed and Yahoo YSlow. You can also see fully loaded time, total page size, and the number of requests.
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:
- Google’s Mobile-Friendly Test determines if your web page is mobile-friendly or not.
- The Google Chrome Web Browser can analyze the current web page that you are viewing. Open Chrome’s Developer Tools and click on the Audits tab. Chrome uses Lighthouse to do the audits, the same tool used by PageSpeed Insights.
- YSlow grades websites based on Yahoo!’s rules for high performance websites. You can install it as a Google Chrome extension.
Back Up Your Website and Database
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.
Tip #1: Optimize Images
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.
Reduce the Size of an Image
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:
- Adobe Photoshop
- TinyJPG and TinyPNG
- Crush Pics (Shopify App)
- Minifier (Shopify App)
- other online tools
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.
Use the Correct File Type (JPG, GIF, PNG)
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.
- JPG – for complex images that use a lot of colors (i.e. photographs)
- PNG – for images that require transparency (i.e. logos) or very high quality graphics
- GIF – for images with large areas of the same color and a small number of different colors
Use the Correct Image Dimensions (Height and Width)
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.
Use the img srcset attribute
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.
Tip #2: Lazy Load Images
You can also download or copy our version of the lazy load script:
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:
Tip #3: Use a CDN (Content Delivery Network)
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:
- HTML and CSS frameworks (Bootstrap)
- Fonts (Google fonts)
- Icons (Font awesome)
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.
Use the async attribute
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.
Deactivate or Delete Unncessary WordPress Plugins
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:
Tip #6: Reduce HTTP Requests
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. Find more information about CSS sprites.
Eliminate Unnecessary Files
Tip #7: Enable Caching
Caching your website pages can have a significant impact on performance. If you use WordPress, there are a number of popular plugins, including: