Boost your rankings and conversions by increasing your page speed.
Increase your page speed to improve user experience, boost conversion rates and get better organic search rankings.
Why is Page Speed Important?
As technology evolves and it becomes easier to enhance your website with frameworks, plugins, scripts, media content and more, it's critical not to overlook this fundamental user experience metric that can have visitors leaving your website before it has even rendered in the browser.
Today, with mobile internet usage exceeding desktop, page speed is an increasingly important factor that affects user experience, conversion rates and search engine rankings across the spectrum of your visitor's devices.
Research from Google shows that 53% of visits are likely to be abandoned if pages take longer than 3 seconds to load and the average load time for mobile sites is 19 seconds over a 3G connection.
It stands to reason that Google has considered page speed to be an important ranking factor for desktop searches since 2010 and more recently, has rolled out another speed update that makes page speed a top ranking factor for mobile searches.
Note: PageSpeed Insights is a useful tool from Google that analyzes your web pages on both mobile and desktop devices, and offers suggestions on how to improve performance.
Here, we'll talk about some of the key factors that contribute to the loading speed of your web pages and the steps you can take to speed things up.
The file size of the assets requested by a webpage (including the file size of the web page itself) all contribute to page speed. High resolution images are one of the largest contributors to slow loading web pages. There are a number of ways to reduce the friction of an image heavy page.
Use the optimal image format for each image type.
For raster based images such as photographs, use the JPG format. Be sure to remove unnecessary image EXIF metadata such as camera and geo information. A small amount of JPG compression can go a long way. Start at 80% and move downwards until you start to see a slight reduction in quality.
For vector based images such as illustrations, icons and logos, use SVG or PNG formats. Remove unnecessary XML markup from SVG images.
Use the optimal image size for each responsive breakpoint.
Implement responsive images and deliver images that are the appropriate size for your visitor's device. This will prevent visitors with small screens having to download needlessly large images.
The async attribute can be added to any script tag that points to an external script file. This tells the browser to continue parsing the HTML document while the script is being downloaded. As soon as the script is downloaded, it will be executed.
<script async src="myscript.js">
The defer attribute is similar to async but it tells the browser not to execute the external script until the HTML document has been parsed. This method is useful for loading and executing scripts that are not essential for the initial rendering of the page.
<script defer src="myscript.js">
HTTP Redirects are used to automatically send visitors from one URL to another. Each time a redirect occurs, a HTTP request-response cycle has to complete which results in a longer wait time for you visitors. Minimizing the number of redirects on your site can improve your page speed.
See this in-depth Moz article on SEO best practices for redirection.
Use a Content Delivery Network (CDN)
A Content Delivery Network (CDN) is a service that stores cached versions of your web pages on multiple servers throughout the world so they can be served quickly to the visitors who are physically nearest to each server.
This is especially effective for businesses with international reach and a high volume of traffic.
Leverage Browser Caching
When you implement browser caching, the next time that visitor browses your website, the browser can access the resources already downloaded from the previous session rather than having to fetch them again from the server.
See this extensive guide on browser caching from Varvy.