Speeding up your website is very important, not just to ranking well with Google, but to keep your traffic and profits high. Businesses want their websites to load as fast as possible because every second reduced from the loading time results in a 1% increase in conversion rates.
1. Reduce HTTP Requests
The number of HTTP requests your web page needs affects page load time, which impacts user experience, bounce rate, and other key metrics. Most of web page’s load time is spent downloading the different pieces of the page, including images, stylesheets, scripts, Flash, etc. An HTTP request is made for each one, so the more on-page components, the longer it takes for the page to render.
The quickest way to improve site speed is to simplify your design this includes:
- Streamline the number of elements on your page.
- Use CSS instead of images whenever possible.
- Combine multiple style sheets into one.
- Reduce scripts and put them at the bottom of the page.
Mobile users will have a particularly bad experience, as most of them will have to wait until everything on a web page has loaded before the page will even begin to appear in their mobile browser.
An easy way to check how many HTTP requests a site makes is through Google Chrome’s Network panel. This is a way of seeing what’s on your page and what’s taking a long time to load. It shows you all the files that a browser had to request and transfer in order to download the page and it shows a timeline of when this happened.
2. Server response time
Server response time is the amount of time it takes for a web server to respond to a request from a browser. Google recommends your target server response time of less than 200ms (milliseconds).
Four main aspects that come together to determine your server response time:
- Website Traffic – More traffic, more problems.
- Website Resource Usage – If each of your web pages used fewer resources, you could improve server response time and not spend money.
- Web Server Software – If you change your web server software or configuration you likely could improve server response time and not spend money.
- Web Hosting – If you improve the quality and scope of your web hosting you can improve your server response time, but you will have to spend money.
3. Enable compression
Large pages are often 100kb and more, and due to this sites can be bulky and slow to download. The best way to speed their load time is to zip them—a technique called compression.
Compression reduces the bandwidth of your pages, in doing so reducing HTTP response. You can do this with a tool called Gzip. Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. Compression is enabled via web server configuration. Different web servers have different instructions, however the most common ways to enable compression including .htaccess, Apache, Nginx, and Litespeed webservers.
4. Enable browser caching
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.
It’s important that you make your page fast for first-time visitors because they will have a clear cache. But you also need to enable caching to cut time off following visits.
Static resources should have a cache time of at least a week. For third-party resources like ads or widgets, they should have a cache time of at least one day. For all cacheable resources (JS and CSS files, image files, media files, PDFs, etc.), set expires to a minimum of one week, and preferably up to one year.
5. Minify Resources
6. Optimise images
For images, you need to focus on three things: size, format and the src attribute. Oversized images take up a longer load time, so it’s important that you keep your images as small as possible. You can use image editing tools to reduce colour depth to the lowest acceptable level and remove image comments. Image editing tools can also help you crop your images to the correct size.
- JPEG is your best option.
- PNG is also good, however, older browsers may not fully support it.
- GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a colour palette of 3 or fewer colours) and for animated images.
- Do not use BMPs or TIFFs.
Once you’ve got the size and format right, make sure the code is right too, you should avoid empty image src (System Reference Code). Src is a set of eight characters that recognises the name of the system component that spots the error codes and the reference code that describes the condition. When the system detects a problem, it displays an SRC on the system control panel. When you go through the following problem-analysis procedure, you can find out how to record the SRC on paper.
In HTML, the code for an image includes <img src=””>
When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add pointless traffic to your servers and even corrupt user data. Take time to re-size your images before uploading them. And always include the src attribute with a valid URL.
7. Optimise CSS Delivery
CSS can be used many ways by a web page and still work. Since there are many ways to use it there exist many different CSS setups. No matter how it is set up on your pages your CSS should be helping your web pages render faster not slowing them down.
CSS has style requirements for your page. Usually, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself.
An external style sheet is preferable because it reduces the size of your code and creates fewer repetitions. When setting up your styles, only use one external CSS stylesheet since additional stylesheets increase HTTP requests.
8. Prioritise above-the-fold content
Having just recommended that you use only one CSS stylesheet and no inline CSS, there is one warning you need to consider. You can improve user experience by having your above-the-fold (top of the page) load faster—even if the rest of the page takes a few seconds to load. Consider splitting your CSS into two parts: a short inline part that styles above-the-fold elements, and an external part that can be deferred.
9. Moderate plugins
Plugins containing a collection of functions that can be added to a website and can extend functionality or add new features to your website. Too many plugins can slow your site, create security issues, and often cause crashes and other technical difficulties. You should deactivate and delete any unnecessary plugins, then change any plugins that slow your site speed. Try selectively immobilising plugins, then determining server performance. This way you can identify any plugins that harm your site speed.
It is also very important to note that it’s not just about the number of plugins but about the quality as well. A website with 50 plugins can load much faster than a website with 10 plugins if the website has substandard plugins. To avoid these plugins that load a lot of scripts and styles, plugins that perform lots of remote requests and plugins that add extra database queries to every page on your website.
10. Reduce redirects
A redirect is a way to send both users and search engines to a different URL from the one they originally requested. Redirects create additional HTTP requests and increase load time, so it is best to keep them to a minimum. If you’ve created a responsive website, more than likely, you have redirects in place to take mobile users from your main website to the responsive version.
Google recommends these two actions to make sure a responsive redirect doesn’t slow your site:
Use an HTTP redirect to send users with mobile user agents directly to the mobile equivalent URL without any intermediate redirects.
Include the <link rel=”alternate”> markup in your desktop pages to identify the mobile equivalent URL so Googlebot can discover your mobile pages.
11. Social Sharing Buttons
Test your website speed
After these suggestions, you should test your website speed to see if there’s a difference, here are the top recommendations for testing your website speed:
Pingdom – With this tool, it helps you to get a reduced site load time as well as a reduced number server requests. This also compares your website speed to other websites online.
GTMetrix – This tool analyses your website speed using Google Pagespeed Insights and Yslow and gives you a rating from A to F, it also offers suggestions for improvement.
Google Pagespeed Insights – You should aim towards a score closer to 100. It also has a mobile speed test tool that you can use.
Yslow – This tool analyses your website speed based on Yahoo!’s rules for website performance.