Back in September last year, I explained why website page speed matters. In today’s follow up post, I’m going to provide you with five tactical ways to improve your website’s load time. This post will be fairly technical, but I’ve included a “why it matters” section within each pro tip. If you’re not a developer, pay attention to this part and talk to your website team about implementing these changes.
One more note – all of these pro tips relate to websites that are hosted in an Apache environment. They may also work in a Windows environment with a bit of configuration, but I can’t promise anything. Enough of the small talk, let’s jump in and get started on the good stuff!
1. Enable gzip compression
Why it matters: Gzip compression produces smaller files, which means your website will load faster.
Gzip is a standard way of compressing files so they can be transferred from your web server to individual web browsers more quickly. Enabling gzip is pretty standard practice, so if your website is not utilising gzip compression, you can bet that it’s loading slower than your competitors’ websites. This is one of the key things that is checked when you run the Google PageSpeed Insights tool. If gzip compression is not detected, your pagespeed score will be lower.
Here is an example of how gzip compression works on core resources around JavaScript, CSS, HTML web pages, and certain font files:
<FilesMatch “\.(js|css|php|htm|html|woff|svg)$”>
SetOutputFilter DEFLATE
Learn more:
http://httpd.apache.org/docs/current/mod/mod_deflate.html
https://developers.google.com/speed/docs/insights/EnableCompression
2. Set content expiry dates
Why it matters: Each time a user visits your website, certain resources are fetched from your web server, which is a relatively slow process. Browser caching improves this process by retaining and reusing resources from a previous visit.
In order for caching to work correctly, you need to set expiry dates on content. This allows browsers to better cache a website and reuse previously download content or ask the server for a newer version.
You can add as many different content types as you need, based on what is relevant to your particular website. For example:
ExpiresActive on
ExpiresDefault “access 1 week”
ExpiresByType text/html “access 2 day”
ExpiresByType text/css “access 1 week”
ExpiresByType application/x-javascript “access 1 week”
ExpiresByType text/javascript “access 1 week”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType text/plain “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType image/svg+xml “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
Learn more:
https://httpd.apache.org/docs/current/mod/mod_expires.html
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
3. Use HTTP/2 protocol
Why it matters: The HTTP/2 protocol was specifically developed in order to deliver web pages more quickly by decreasing the amount of time required to load a page. If possible, get your server running HTTP/2!
This protocol provides a constant connection between the browser and the server, which decreases load time and minimises the amount of data being transferred. HTTP/2 is a relatively new connection type. When Firefox 35 was released in January 2015, it became the first browser to support HTTP/2 by default. Today all modern browsers support HTTP/2, which means you have no excuse for not using it!
When using the HTTP/1 protocol, the browser must ask the server for a resource and then wait for a response before requesting another response. While these responses are relatively quick, if you consider how many responses are required to load a website and take into consideration the speed of the connection, you can see why a web page could take awhile to load. With HTTP/2, the browser and the server send requests and responses at the same time to get the resources they need more efficiently. The end result is a web page that loads up faster.
Bottom line, if you can get HTTP/2 turned on with your server, then do it! Using HTTP/2 does require some extra technical considerations to ensure that resources don’t arrive before they are needed, but we’ll leave that for another post. For now, I encourage you to investigate how quickly you can get HTTP/2 running on your server. You’ll still need to pay attention to other page speed optimisations, but this change alone can dramatically improve your page load times.
Learn more:
https://http2.github.io/faq/
https://sathyalog.wordpress.com/tag/what-is-the-difference-between-http1-1-and-http2/
4. Implement Responsive Images
Why it matters: With the large variety of screen sizes on the market and the growing number of people using a mobile devices to access your website, it’s important that your website offers appropriately sized images for each device, aka “responsive images.”
If you add a large image for desktop users without providing an appropriately sized image for tablet and mobile users, you’ll get penalised by Google’s PageSpeed Tool. Likewise, as screen quality improves – with retina-ready and high-density screens – you may need to include even larger images to suit these devices. By optimising images to be suitable for different screen sizes, you can improve image quality and page speed all at once.
So, how do you please everyone while providing an optimal page load time? The best way to handle it is to use the
Learn more:
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
5. Eliminate render blocking
Why it matters: When you eliminate render blocking elements, the top portion of your website can load up quickly. This provides an optimal user experience because users can immediately begin using your site while elements lower down on the page continue to load.
If you’ve used Google’s PageSpeed Insights tool, you have probably been penalised at one time or another for render-blocking elements. The reason this complaint is so common is that most websites today are built on a CMS, such as WordPress. These platforms make it easy to use themes and plugins and generally do lots of cool things, but they also bloat out your website. If you’re using a theme builder, it’s very tempting to load all the CSS and JavaScript files in thesection – even if they’re only used on one page. This is the cheap and nasty way to get a site done. Unfortunately for us developers, Google doesn’t like that.
While there are some shortcuts to making the PageSpeed tool happy, they are really only Band-Aids. The better approach is to ensure that each page loads ONLY the resources needed for that particular section of the page. Everything else should be loaded as and when it is needed. You can do some cool things with JavaScript to load scripts, CSS and other resources based on a user’s activity.
For example, if you have a photo gallery towards the bottom of your page, then only load what is needed when the user is scrolling down that far. If the user is simply doing some reading and clicking links at the top of the page, then there is no need to force the browser to download images in the gallery unless the user decides to engage with the gallery.
In my opinion, the best way to deal with render blocking issues is to address it from the very beginning, when you start the design process. I know this doesn’t help you much if your website is already live, but it does become quite hard when you try to address render blocking complaints on an existing site. The ideal scenario is that you look for these issues from the beginning and address them before a single line of code is written. If you really care about site speed and preventing render blocking issues, your design will reflect that in its page structure – from areas above the fold to sections on every single page.
If you do need to retrofit an existing site, I strongly recommend setting up a staging site, so you can change one thing at a time and test it thoroughly. Here are a few things you can try:
- Move as many of the CSS/JavaScript elements as you can out of thesection and put them just above the . Remember, anything in the head area will be loaded before the page begins to be rendered. If you call a lot of images in your CSS files, then they count too.
- If you’re using a CMS, you can probably find a plugin to help eliminate render blocking elements. WordPress has a great one called Hummingbird that provides a handy visual UI for shifting things around.
- Try to reduce the amount of bloat you are pulling from front-end frameworks. Bootstrap is an awesome platform, but you probably only need about 30% of the features provided by default. Reduce bloat by going into Bootstrap and unselecting all the stuff you’re never going to use.
- The same thing goes for things like Font Awesome. In most cases, you’ll only use a dozen icons on any given site, so there’s no need to force users to download 600+ of them. You can use a tool like IcoMoon to select the subset of fonts you really need on your site.
It can take a little more time to get it right, but you should get good results by implementing these suggestions.
Learn more:
https://premium.wpmudev.org/project/wp-hummingbird/
http://getbootstrap.com/customize/
https://icomoon.io/app/
Now get to work!
I hope you’ve found these tips helpful and are excited about rolling up your sleeves and trying these out on your website. I’d love to hear how it goes for you – feel free to share your results in the comment area below. If you get stuck or want our team to help optimize your website’s page speed, don’t hesitate to get in touch. Have fun!