A faster website on all screen sizes is what users want, so let's impress Google!
Google has been optimizing their search engine for high-speed connections since day one. The internet was created in the 90s, but it wasn't until 2002 when Google started taking site speed into account during rankings - they knew what relevance meant back then.
Injury to a website's ranking can be very difficult and expensive for the business. Google has been keeping this in mind since they first started indexing webpages, which is why it’s so important that your site speed meets their quality standards and Pagespeed insights (PSI) by lighthouse as its analysis engine.
I’ve mentioned before that Google take site speed as an important factor in your rankings its been that way for years (since 2010 actually). You can check how fast your site is in Googles eyes.
Your aim is to get above 85 if possible. Google wants fast websites that are user friendly! So don’t panic if yours is lower – I ran through a few developers sites while writing this blog and some had scores as low as 50 for mobile and 59 for Desktop. In fact all of the responsive designs I checked had a score ranging from 50 - 98. Ours at the time was a perfect 100 on desktop and 98 on mobile.
Responsive designs need to have fast page speed and balance with SEO. Here are the 5 adaptable tips on how to improve your website speed with screen shots.
First : Resize any images you use on your site to the right size before you upload them.
Then: Optimize them. If using plugins, some have options to do a bulk optimization of all the images you already have on your site.
If you have cpanel hosting you probably have a button that says optimize website.
If you click that you will see a check box to compress content. I set mine to “compress all content”.
You may not be able to compress everything on your site though. For instance my chat function comes from somewhere else so I don’t have access to compressing it. That means I still get a warning about that on the page speed checker.
Enable Caching:
Caching means that visitors to your site don’t have to re-load content every time they visit. It’s stored on their computer so it loads quicker next time. I use WP Super Cache with these settings.
Defer and Compress JavaScript and Compress CSS:
This is a bit technical – but there is a plugin if you are using WordPress Java Script is bits of code that often load first when it doesn’t need to. As Google puts it : “None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.”
The trick is to load script in the footer rather than the header. For eg: if you have google analytics code put it in the footer.
Lots of plugins and themes have script that load in the header so we want to defer it. We also want to compress it and the css (which is the styling of your fonts etc) to get rid of empty spaces. I have used Autoptimize before. They say: “Autoptimize makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are advanced options available to enable you to tailor Autoptimize to each and every site’s specific need.
For my own site these are the settings that worked but it will depend on your own site. (If I ticked the optimize css code box for instance I lost some of my font styling.)
Leverage browser caching (NB : This is more advanced. Contact me if you freak on this one!): Google says this : “Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.”Basically what you are doing is telling visitors (including Google) to not bother checking for new versions of the same files that haven’t changed. To do this you need to edit your .htaccess file and add this code.
#Expire Header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">ExpiresActive On
ExpiresDefault "access plus 2 hours"
</FilesMatch>
This sets the expiry for image, CSS, javascript files to 2 hours after the visit. You can edit that part of the code that says : "access plus 2 hours" to be the time you want it to be. I’ve set mine to “access plus 2 months”.
Available values are:
years
months
weeks
days
hours
minutes
seconds
Do not use this on files that change regularly. If you change your css for instance make sure you re-name the file so the browser doesn’t fetch the old one.While you are in your .htaccess file (unless you know all about ETAG’s and have them optimised) add this code as well
FileETag none
So there you have it – 5 (mostly) simple steps to make your site pretty zippy than before.
Are you ready to start increasing website speed and making web pages load fast? Look out for additional tips on how to make a website fast or Connect with eSense for more information or a turnkey solution.
