Hello, and welcome to today’s video blog, I’m Gav, this is Rob and today we’re going to talk more about ‘Page-Speed Optimisation’.
The other week, James wrote about his favorite tools to use when looking to get the most out of your websites speed and today we’re going to expand on that a little bit and discuss not just our favorite tools, but also some tips and tricks on what you can do to make your website load faster.
Now, if you don’t know already, page speed optimization is growing more and more important by the day. Having a fast loading website is just as important as having a website that looks great, works in all the browsers, ranks well and converts.
It has been mentioned by many key figures in the industry such as Google and Magento that a slow loading website has a very high impact on your website conversion rates. Whether that be just someone getting in touch via your contact form or purchasing a product off your website. If your website is slow, it will more than likely mean your potential customer will click off and go elsewhere.
But what can you do when it comes to speeding up your website? Well, at Creare we have grown a huge passion for page speed optimization and getting the best out of a website and here are some of the things we do when we’re looking to turbo charge our sites.
Images
Image load times have a large impact on the overall speed of your site. One of the best ways to reduce image file size is when you save the image in Photoshop, click ‘save for web’ and bring the quality down to around 60. The quality of the image will still be sharp but will be a lot smaller in size. Another good tip is only save as PNG if it NEEDS to be transparent and save as PNG8 instead of PNG24, only save a JPEG if it is a photo and any other picture, such as icons, can be saved as a gif.
But most of the time, you’re going to check the speed of your site after it’s already been built and no one wants to go back to re-save all your website images, so a good tool to use is Yahoo’s ‘Smush It’ – this will take all of your website images and, well, smush them, reducing the file size, while keeping the quality. If you have some large PNG files the best tool we have come across is PNG Panda, this can really knock the kilobites out of your PNG’s and speed up your website, isn’t that right, Panda…
Browser leverage caching
Browser leverage caching simply involves you setting an expiry date in the HTTP headers which then tells the browser to load previous static resources from a local disk rather than over the network. We could do a whole blog post on this, but as a quick tool, we have included a link below on how to do it.
Read more on browser leverage caching
Gzip
Gzip compression of your web files is one of the fastest ways to speeding up your website, it’s super easy to get going and can knock a good amount of time off your page load speed. To enable this, you just need to add a few lines of code to your htaccess file and job done! If your site is ecommerce, thankfully Magento comes with gzip enabled, you just need to uncomment the right code in the htaccess. If your site is a WordPress, we have included the gzip code to add to your htaccess file below.
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/xhtml text/html text/plain text/xml text/javascript application/x-javascript text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary </IfModule>
M&M
No, not the rapper, M&M is Merge and Minify; Merge and Minify any css and javascript files on your website. Again, thankfully Magento comes with this installed already just navigate to system>config>developer>javascript settings and select ‘yes’ under ‘merge javascript’. For a WordPress website, we recommend a plugin called ‘WP-MINIFY’, just install this plugin and select what files you want to minify, as easy as that! We have included the link to this plugin in the supporting blog post below.
Install your database locally
I was working on a very large WordPress site the other day and for the life of me I couldn’t get the speed below 5 seconds and I was pulling my hair out! But as mentioned, we have grown a large passion for page speed and it wasn’t long until someone advised I stopped sourcing the database from an IP and used a local database on the server the site is hosted on. This took my page speed down from 5 seconds to 1.2 seconds and it only took me 5 minutes to set up.
There are many ways you can reduce the page load time for a website, but these are our best, tried and tested methods on speeding up a site. As a rule of thumb we recommend that ecommerce websites shouldn’t take any longer than 3 seconds to load and any other site, no longer than 2. Be sure to read James’ previous blog post.
