Here are some tips on how to speed up your website. Why should you care? Well for one, your visitors are going to bounce from your website without seeing a thing if it takes too long to load. And for two, Google is paying close attention to your page speed, and because of the former, they do not want to serve their customers slow loading websites on page one of search results. I get it Google (this one time!), you just want to serve people the best pages to meet their query, and now we will attempt to do that at least according to one of many metrics they use.
Watch this video on how to get a faster website using Google PageSpeed tester
Watch the video below for a real life case study on my clients website.
Playing this video loads a YouTube embed in privacy-enhanced mode.
Google PageSpeed and Core Web Vitals
Have you heard of the scary core web vitals and page experience Google updates this 2021? You lucky duck if you haven’t! These updates have stuck fear into the heart of many an SEO, but I am here to tell you, there is NO problem with your poor PageSpeed that can’t be fixed. And a lot of fixes could be a lot easier than you think too. PageSpeed forms one part of your core web vitals, and core web vitals form one part of page experience. As always make sure you have Google Search Console set up so you can track your SEO efforts.
The Google PageSpeed insights tester is completely free, and whether your an SEO or a business owner managing a website, make sure as part of general maintenance that you’re running your website through the PageSpeed tester and fixing any issues it identifies.
Top tips to speed up your website
- Compress css and JavaScript files: If you view the source of your page and you do not see ‘min’ in the file, it’s generally not minified. For example, mystyle.css becomes mystyle.min.css.
- Use preload, defer, async on your JavaScript files: If you use the Google PageSpeed Insights tester you’ll see advice and instructions on how to implement this correctly for your website.
- Use lazy loading: This is now a native HTML5 tag that you can implement on images by putting ‘loading=“lazy”’ into your image insert code.
- Remove redundant code: Whether it is Javascript files that aren’t being used, or left over CSS from previous designs, or dis-used content blocks, any code you don’t need, and in particular any libraries that may be loading in via CDN networks, need a regular clear out.
- Cache your website: This can be as easy as an edit to your .htaccess file, using ‘mod_deflate.c’ (see below for code) if available through your web hosting, using the expires active directive, will serve your website from a cache, immediately improving your page speed.
Cache your website with .htaccess
Please find code below that you can use in your .htaccess file, this one is set to expire quickly for some items, so run it through the Google PageSpeed tester and you’ll see recommendations there if it’s slowing down your website and those timings need to be made longer. Tweak to suit!
<IfModule mod_deflate.c>
# Turn on the module.
ExpiresActive on
# Set expiry times.
ExpiresDefault "access plus 2 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 600 seconds"
</IfModule>Cache website via .htaccess
Compress your images
If you have images on your website, you will see after running the page through the PageSpeed Insights that they might be slowing down your website. You can run these images through additional compression, you can use Photoshop to achieve this, or you can use an online services where you can upload your photo where it goes through compression, and you then download it to re-upload on your website. Images do need to be compressed to get a good PageSpeed result, the native lazy load is great but it’s also not a replacement for compression. While it takes extra work to do this, you are the gold standard if you can put the effort in you will hopefully get the reward for it too!
Lazy load youtube video embeds
As you can see in my video above, instead of letting the full video load as the page loads, I instead replace the video with an image thumbnail which comes directly from YouTube, and the video only loads after the image placeholder is clicked. This makes a HUGE difference to PageSpeed results. I have seen websites go from a speed score of 20, to 80, just by implementing this code. While it might be tricky to get a workflow on this, it’s well worth investing the time and effort to achieve it. Learn more on my blog post YouTube video embed with schema and lazy loading
This lazy load code from Codepen is very helpful and easy to implement!
Upgrade to HTTP/2 for faster PageSpeed
HTTP/2 is a major revision of the HTTP protocol used to load websites via web servers, and employing it can speed up your website. HTTP/2 allows web servers to push out data to web browsers when a web page is requested, meaning the web browser doesn’t have to make multiple requests through multiple responses as it renders a full web page. Not all servers support HTTP/2, so check with your hosting provider and it may require an upgrade of your hosting package depending how they have their servers configured.
Try these tips to speed up your website!
I hope these tips help you to improve your page load times. This will improve your websites user experience (UX), and it will keep Google very happy too. You can use the Google PageSpeed tester to analyze your website and see where it falls. Sometimes you might see your desktop version is showing a better result than mobile, that’s normal as Google attempts to mimic the real life load times of visitors depending on what device they’re using. Also, don’t panic if your website isn’t showing a perfect result, most websites can use simple techniques to fix any issues flagged, some websites are heavy in terms of functionality, and so it can be more difficult to get a great page speed on an e-commerce website vs a brochure website due to the nature of all of the functionality provided, which naturally takes longer to load.
Need help with your website SEO, just contact me on hello@proximowebdesign.ie and I’m ready to assist.