A study done in 2009 revealed that online shoppers are willing to wait two seconds for a web page to load. If your aim is to grow a following for your blog and rank a higher in search engines, then you need to optimise your website to load quick and effective.
Google is obsessed with speed and researchundertaken by them clearly shows that if their search results are slowed down by a fraction of a second, people then start to search less which is bad for them. They are so obsessed with speed, they even included page load time in their algorithm as a ranking factor.
If your competitor's website is way faster than yours, then you need to optimise your page load time to rank and you can do so by using a website speed test site to see how you can significantly reduce page load time. This article will show you how you can shave off a few seconds from your web pages.
The first thing you need to do is go to pingdom to test how long your website takes to load and enter your website in the search bar and click on settings, choose Amsterdam, Netherlands as I see results are little more accurate and then press enter. After your website speed test has completed, you can more or less see how long your web page takes to load.
So let's look at a few different methods you can use to improve your page load time and before attempting anything, please make a backup of your files.
The term CSS minification refers to the process of removing any unnecessary spaces, characters and comments from your CSS file without affecting your source code needed to load your website and it's functionality.
Minifying your CSS can significantly reduce your page load time and this process can be done online for you by using this website. All you need to do is copy your source code and paste it into the text area and click minify. Once this has been minified, your optimised code will be displayed for you to copy and insert into your CSS file.
Another trick you could is combining your CSS into one file which will make your page load even a bit faster.
With tons of websites going responsive, the size of CSS and javascript files has since increased to
make your website respond/fit on different devices. Minifying your javascript can shrink your file 20% smaller and make your web page load a bit faster.
Combining your javascript files into one file will help you website load faster and reduce the number of HTTP requests. So if you have eight javascript files, you could combine them into one and then reference this in your HTML code under your external sheets area.
Another good practice to follow is placing your javascript file at the bottom of your HTML file just before the closing body tag. This will load your web page and then load your JS script file last. Proceed with caution as you would need to figure out the source code needed to load your website then extract the source code and place this into a new file. You'll then place this file closer to the top of your HTML code.
You could use this website to minify your javascript. Simple copy your javascript code and paste into text area then click on minify. Copy your minified code and paste into javascript file.
Minifying your HTML could also shave off a couple of milliseconds. This pretty much does the same process for CSS and JavaScript. To minify your HTML use this website and paste your HTML code, click minify and then copy the minified HTML code into your CMS.
Gzip can save you bandwidth and speed up your website at the same time. Gzip is an effective way to send files from your server to the browser and, may I add, a quicker way which makes your user happy.
So what does Gzip do? Gzip takes your web page, zips it which compresses it to a smaller size then sends it to the web browser which in turn then is downloaded quicker and presented faster to the user. For example, let's say your home page is 100KB and you enable Gzip which then compresses it to 10KB which is smaller and faster to download.
A tutorial can be viewed here about how you can enable Gzip and enabling this on a windows server (IIS) can be viewed here. Gzip compression can effectively save you 90% and have a huge impact on page loading time.
Reducing image size is important in ensuring that images are not slowing down your website. Optimising all your images on your entire website can save you loads of bandwidth and decrease the size of your HTML files. 90% of the time, website are slow due to large image files which are larger than 1MB.
My rule of thumb is trying to keep large images under 100KB and smaller images under 50KB without comprising your quality of a picture.
The best formats to use are the following:
• Jpeg - great for photos.
• PNG - limited colour range.
• GIF - lossless with limited colour range.
I know it's a laborious task to compress each and every photo, but the end result is effective and can make a huge difference. I love using this website to compress my photos; the only downfall is they must be done one by one and they can only format jpeg's.
Browser caching is a great way to speed up your website and what this does is storing logos, CSS files, etc. and when a user browses to another page then all those resources do not have to be downloaded again as the browsers saved it. This process is effective for repeat visitors and all these resources are stored in the browser's cache and this is how you can enable browser caching.
However, there is one issue: if you set your images to be expired in six months or a year and you change an image, repeat visitors might not see the change and older images will be displayed instead of your new image. The tutorial totally explains how to overcome this issue.
Browsers spend most of their time downloading different parts/sections of a web page like CSS files, scripts, images, etc. A web browser makes a new request for each item and the longer your HTTP request list, the longer your web page load time. Reduce your HTTP requests for a quicker load time.
You can do so by doing the following:
• Combine your CSS files into one file.
• Combine javascript files into one file.
• Remove unnecessary plugins you no longer use.
• Remove plugins that slow down your website.
You'll see great results by reducing your HTTP requests.
Redirects can increase your HTTP request for a web page. Only redirect if you really need to do so. Google recommends the following methods if you are redirecting mobile users' from your main website to your responsive website.
Above the fold means what your users see first when they get to your website, so the means the top part of your website. It is important to optimise your CSS files to first load your above the fold content first and then load the rest of your web page afterwards.
In order to do this, you need to extract the CSS code that is needed to load your above the fold content and split the files. You can check out this tutorial on how to optimise your CSS delivery.
Ensure that the web hosting company you decide to go with is fast and ensure that their servers are always up. The above methods can certainly shave off a few seconds off your web pages and can drastically improve user experience and can boost your ranking as well. Spy on your competitors and see how fast their websites are loading and try better that. Remember to optimise all of your web pages and not only your homepage.
I'd love to know how many seconds you shaved off your website and what you implemented?
