 |
| Although it is unlikely you will make it to a perfect score the tips below can help you get in the green for page speed |
As far back as 2010 Google admitted it uses a web pages loading speed as part of it's ranking algorithm and as the mobile web has grown so has the importance of a website's loading speed. So with that said let's get to the point. Here are my top tips to speed up your web pages...
Go Direct...
No landing page redirects please. Why? Well redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single round-trip (HTTP request-response), and in the worst it may result in multiple additional round-trips to perform the DNS lookup. So you should therefore minimize your use of redirects where possible.Google identifies these examples of redirect patterns...
- example.com uses responsive web design, no redirects are needed - fast and optimal!
- example.com → m.example.com/home - multi round-trip penalty for mobile users.
- example.com → www.example.com → m.example.com - very slow mobile experience.
Cut The Crap...
Remove any unnecessary content, especially widgets and plugins that you only put into your sidebar or footer to fill it out, yes I'm looking at you! Only present that content that is actually relevant or related to the web page's topic.WordPress sites especially, tend to have sidebars or footers full of widgets or plugins that are serving no real purpose but yet are slowing down your webpage a lot. "But they are so easy to add and they look really pretty..." I hear you say. That may be true but are they actually serving a purpose? If not, get rid of them.
Tip: If you want/need to link to Twitter, Facebook, Google +, Pinterest etc. just use a linked icon (font awesome icons are great for this) or image as opposed to a widget or plugin.
Prioritise Above The Fold
What we mean by this is that you should limit the size of the data (HTML mark-up, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. Structure your page so the initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest. This may mean that you must split your CSS into two parts: an inline part that is responsible for styling the above the fold portion of the content, and the part that can be deferred.Google suggests the following examples of how a site could be restructured to load faster:
- If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first.
- If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.
Optimise Images
It really is amazing how much you can reduce image file sizes without any loss of quality. You literally can't see any difference visually but the impact on web page loading speeds can be immense. Here are 2 options for software to help you optimise your websites images.Minify, Minify, Minify
That heading isn't for dramatic effect as you can, and should, minify your HTML, CSS and JavaScript. This is actually a lot easier than you think. It basically means removing any unnecessary spaces from your HTML, CSS and JavaScript code. There are even lots of websites that will do it for you for free, my personal favourite due to it's beautiful simplicity is this minifier.Enable Compression
The word compression tells you all you need to know about what this does but how does it work? All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and, most importantly, improve the time to render of your pages. See Google's explanation of text compression with GZIP to learn more.Good News: If you have a Blogger website then you automatically have gzip compression. If you don't believe me then test your website's compression.
Bad News: Some other hosting providers' basic hosting package do not support compression so be sure to check before you waste your time and effort working on it.
Browser Caching
Caching involves storing information from your website for reuse. Fetching information over the network is both slow and expensive: large responses require many round-trips between the client and server, which delays when they are available and can be processed by the browser, and also incurs data costs for the visitor. Therefore, the ability to cache and reuse previously fetched resources will optimize performance and speed up your website. The most common way to leverage browser caching for increased page loading speed is using a .htaccess file.Learn how to leverage browser caching.
Tip: If your website is hosted by Blogger you cannot use browser caching through the .htaccess method as you have no access to the .htaccess file. However you can try this alternative.
