Are you ready for Google’s Page Experience update?
10 March 2021
Back when I first began building websites (many, many years ago) we designed and built websites with careful consideration for speed. As a matter of fact, the speed of the delivery of the content was the most important factor of any website. ISDN and Broadband connections were for the privileged, and most users still operated on dial-up connections of around 56kbps, thankfully things have moved on since then.
Google thinks speed is important, and rightly so! This became quickly apparent way back in in 2011 when Google launched its Online Speed Tool. This hasn’t changed and Google still considers page loading times as one of the contributing factors for Page Rank. So, with the evolution of Responsive Web Development (RWD), animation rich websites and developers having to cater for multiple platforms (including tablet and mobile), website file sizes are as fat as ever, and it appears they won’t be shrinking anytime soon.
We’ll presume that your website is already in production and receiving traffic and please note, unless you’re server tech savvy we wouldn’t attempt the following in case you change code in the wrong place. Need help? Give us a shout at Boxed Red.
It’s no surprise that images account for most of the downloaded bytes on a web page. Optimising your images will return some of the biggest savings and performance improvements for your website. The fewer bytes the browser has to download, the faster the browser can download and deliver content.
Here are a few handy tools to optimise your jpeg and png images in seconds.
Great one for jpeg images: jpegmini.com
For PNG images: tinypng.com
For almost all formats: compressor.io
Gzip is a file format and a software application used for file compression and decompression. Gzip is the most popular and effective compression method currently available and can reduce your response size by up to 70%. If you’re not already using Gzip on your website, you should be!
I won’t go into much depth with Gzip but here is an interesting article on the technology.
On an Apache server, you can enable Gzip via the .htaccess file. Please note if you’re hosting your website on your own VPS/Server you may need to enable some Apache modules
Just add the following lines of code to your .htaccess file to enable Gzip compression
Not using Apache? The lovely people at HTML5 boilerplate have prepared a list of configurations to enable compression for all server types. What lovely guys. https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/Visit here: https://github.com/h5bp/server-configs
If your images never change then you can set the expiry on these items for a long time in the future so the visitor’s browser will utilise data from their own browser cache, this is particularly useful for returning visitors.
So let’s go ahead and set some Expiry Headers. Copy the following into your .htaccess file.
<ifModule mod_headers.c> # Turn on Expires and set default expires to 3 days ExpiresActive On ExpiresDefault A259200
# Set up caching on media files for 1 month <filesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$"> ExpiresDefault A2419200 Header append Cache-Control "public" </filesMatch>
# Set up 2 Hour caching on commonly updated files <filesMatch ".(xml|txt|html|js|css)$"> ExpiresDefault A7200 Header append Cache-Control "private, must-revalidate" </filesMatch>
# Force no caching for dynamic files <filesMatch ".(php|cgi|pl|htm)$"> ExpiresDefault A0 Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0" Header set Pragma "no-cache" </filesMatch> </ifModule>
Tip! If you need a cache buster, you can append parameters, ie. ?v1.0 ?v.1.1 to your CSS href meta tag so the browser will be forced to download the new stylesheet
Here’s a cache busting example:
<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" /> <link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />
There are many online automated tools to compress your website’s CSS and JS for you, here are a couple…
At Boxed Red we tend to automate the minification processes during build time, as minifying can be a laborious task during development and it’s one less thing to worry about before things go live. We use an automated task runner called Grunt to minify our CSS and JS automatically. If you’re not already using automated task managers then we suggest you check it out Grunt!
A content delivery network (CDN) is a system of distributed servers that deliver webpages and other Web content to a user based on their geographic location.
Here’s a typical example of using CDN over self hosted for jQuery…
You can also outsource most of your assets using a CDN server provider such as CloudFlare www.cloudflare.com
On average, a website on CloudFlare loads twice as fast, uses 60% less bandwidth, has 65% fewer requests and they even have a free package!
That’s it! I hope none of the above was too heavy, these tweaks were intended to be deployed very quickly without disruption to your current code base, we hope you find them useful.
Web Developer – Boxed Red Marketing
We work with clients from start-ups to household names.
If you’ve got a project, get in touch and we’ll get going!