Learning Center.


Don't miss out!

Get notified about new guides from our Learning Center as soon as we add them.

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.

Optimize Images

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.

Minify HTML, CSS and JavaScript

Text files such as HTML, CSS and JavaScript can be 'minified' to remove unnecessary characters and spaces, resulting in a reduced file size. The following tools are available for free.

Remove Render-Blocking JavaScript

JavaScript is a key component of the modern web and enables us to create dynamic, interactive experiences. However, due to the fact that browsers are designed to download and execute scripts before they can continue parsing the HTML and images on a page, your scripts need some special attention to ensure they don't slow down your website.

Inline JavaScript

If you have some small scripts that are relevant to a particular page, instead of referencing an external JavaScript file, it's better practice to place them inline in your HTML document using the <script> tag.

<script type="text/javascript">
    // JavaScript code here

Asynchronous JavaScript

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">

Deferred JavaScript

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">

Reduce Redirects

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.

In addition to caching your web pages, CDNs utilize GZIP compression which can result in up to 70% reduction in file size for your text based files such as HTML, Javascript and CSS.

Leverage Browser Caching

When a visitor browses your website for the first time, all of the resources including images, CSS, JavaScript and HTML have to be downloaded from the web server to a cache folder on their local computer so the browser can render the pages.

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.

  • Did you find this article useful?
    Yes No

About the Author

Jonathan Morton
Jonathan works with Statcounter as a product designer and strategist. An advocate for the user, he is passionate about solving problems for Statcounter members through research, observation and testing.

Try Statcounter free for 30 days

No Credit Card required. Downgrade to the free plan anytime.
Try it for FREE!