3 Comments

March 1, 2019 ,

 Updated March 25, 2020

Although the average internet connection speed in the United States is trending upward, the typical web page takes longer to load, with some research pointing towards 8.66 seconds as the average load time across different industries.

The reason? More JavaScript, CSS, images, and HTTP requests.

The internet is bloated. According to SpeedCurve, the average web page is currently 3 MB large - a more than 300% increase since 2011.

This is a problem, particularly when you consider how page load time impacts a website's bounce rates.

Clearly, improving your website's performance should be a priority, particularly if any of your pages take more than three seconds to load.

Here's a look at nine ways to quickly boost website load times without advanced technical know-how.

#1: Make Sure You Are Using a Robust Hosting Provider

None of the other optimization strategies will matter without this. A reliable hosting service is your website's foundation.

Beyond price and the quality of customer service, pay particular attention to the following:

Server response times: a poorly configured server or one that's overcrowded with users and short on resources will considerably slow down your website. This is particularly true in the case of shared hosting accounts.

Server behavior under traffic spikes: some servers perform great when there are just two or three active users, but disappoint when there's a sudden spike in traffic, such as when a link to your website gets passed around social media platforms. For example, according to Mark Berka's research on the best web hosting, GoDaddy's shared plan can barely handle five simultaneous visitors before beginning to drop HTTP connections and timing out.

#2: Use a Content Delivery Network (CDN)

A CDN stores a cached version of your website on servers in multiple Points of Presence (PoP), which is a fancy way of saying "server." When a user attempts to access your website, the CDN will serve the user content from the PoP closest to their location.

As a result of the reduced distance between the user and your content, data is transferred quicker and hence your pages load faster.

CDN Network

Iage source: em360tech 

Take action:

CloudFlare is an excellent CDN and is free to use for the majority of website owners. Configuration is simple and involves two steps:

  1. Registering a free account
  2. Pointing your domain at CloudFlare's DNS

Using a CDN has many additional benefits, including better website uptime, easier audience segmentation, and reduced server resource usage.

#3: Optimize Your Images

​​​​According to this report, images account for over 21% of the average web page's bulk.

High-resolution images, or multiple images of any kind, can be particularly destructive to a healthy page load speed.

On the other hand, images can have a great effect on user engagement and help boost conversions.

How do we reap the benefits of both worlds? By employing some of these best practices:

  • Use PNG format for images that include simple text or line drawings
  • Use JPG for images with lots of colors, graphics, and visual elements
  • Trim your images before uploading
  • Compress your images to reduce size. If you're using WordPress, try the free Smush plugin.
  • Scale your images. Instead of uploading a large image and then using CSS to make it smaller, make sure the image is the appropriate size before uploading it.
  • Consider enabling Lazy Loading. This causes an image to load only when the user scrolls to it, as opposed to automatically loading all images as soon as they access the page.

The more images you use on your website, the bigger the speed boost you'll experience from following the steps above.

#4: Leverage Your Visitor's Browser Caching

By leveraging browser caching, you instruct your visitor's browser to store website files - such as images, CSS, and JS - on their local computer.

As a result, the user doesn't need to download the same files multiple times whenever they open a different page on your website, thereby improving load speeds.

Take action:

To leverage browser caching, you must modify the request headers of your resources and set an expiration time for each resource type. You can do this by adding the following code to the top of your .htaccess file, which you can find in the root of your domain.

Warning: if you have no experience editing the .htaccess file, you should probably ask a developer or hosting support operator for help

IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"

Note that we're using different expiration times for different content types. After a certain expiration time is reached, the user's browser will no longer use the cached version of the resource and will instead download it again.

It's a good idea to be aggressive with expiration times on all static content.

Note that leveraging browser caching will only improve website load times for visitors who have already accessed your website at least once; first-time visitors will not experience any benefits.

#5: Minimizing Redirects and Redirect Chains

The more redirects your website makes when a visitor requests content, the more HTTP request-response cycles there are, and the longer the total round-trip time (RTT) gets.

Redirects

source: Sitecheker.pro 

Put another way, it takes more time for requests for information to be processed by your server, thereby increasing the visitor's experienced load times.

Most frequently, excessive redirects and redirect chains are caused by poorly configured WordPress plugins and other scripts. Social sharing applications and advert tracking codes are particularly notorious for this.

Take action:

If you recently installed new plugins or scripts, run your website through a website performance analyzer such as GTmetrix or Pingdom, and see if the new application is causing excessive redirects. If it is, it's a good idea to look for an alternative solution if possible and compare performance.

Additionally, if your website is configured to enforce an HTTPs (usually SSL or TLS) connection, make sure to share the https version of your website's URL on the web and with friends. If you share the unencrypted HTTP version instead, anyone who visits your website through that link will need to be redirected to the HTTPS version, thereby impacting load times.

#6: Enable gZip Compression On Your Server

Developed by Jean-loup Gailly and Mark Adler and released in 1992, gZip is a popular data compression and decompression algorithm that can be enabled on most modern hosting servers.

Gzip compression

Source: Grepitout.com 

When you enabled gZip, your website's files and stylesheets will be compressed before being sent to the visitor's browser. This can result in up to a 70% reduction in the total size of the page.

Take action:

To enable gZip, you can:

  • Contact your hosting support team and make a request
  • Install a WordPress plugin that will do it for you. WP Performance Score Booster is a stable solution worth trying.
  • Do it yourself by adding the following to your .htaccess file (Apache servers only):

# Compress CSS, HTML, Text, XML, JavaScript, and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

7#: Minify JavaScript and CSS

Make your website even smaller by reducing the size of your JS scripts and CSS stylesheets. You can do this through "minification," which is an automatic process that involves:

  • Removing comments and whitespaces from the code
  • Shortening certain programming patterns
  • Stripping redundant characters

The result is a smaller page size and reduced load times.

Take action:

If you are using WordPress, the easiest road to minification is using a plugin, such as Fast Velocity Minify.

If your website was custom built and doesn't use a popular content management system (CMS), you'll either need to ask a developer to help you out or use an online tool such as the Minifier to manually minify your largest CSS and JS files.

#8: Serve Your Content From a Unique URL

Some pages use different URLs to reference the same resource. For example, a single page can show the same image in multiple locations, using a different URL to reference it each time.

This is often a problem in WordPress, where the same image is assigned different URLs by default.

When this happens, your visitors are essentially requesting the same content (image) more than once, because their browser has no way of knowing what lies behind any particular URL until its content has been downloaded. As a result, the number of HTTP requests will increase and the page load time will deteriorate.

Make sure that you are using only a single URL to reference a particular file on a page.

#9: Reduce The Number of HTTP Requests

The more HTTP requests your user needs to make to load your website, the longer it will take for it to load. You can use this HTTP Request Checker to find out how many requests your website requires.

There are multiple ways to reduce the number of requests, and some of the steps we've already covered will indirectly help with this as well.

HTTP Requests

However, here are more things to try:

Merge your JavaScript and CSS: instead of loading up six CSS files and nine JS files, combined the stylesheets into a single file and the scripts into a single file. You'll reduce the total number of HTTP requests from 15 to two. The M+M+R plugin for WordPress can help you achieve just that.

Download fewer fonts: many websites connect to the Google Fonts servers to download and serve their fonts. What webmasters frequently do not realize is that every font family is a set of multiple files, each of which generates an additional HTTP request. Become aware of which font files you use on your website and only download those. Set up your website to serve fonts from your own server for an even bigger performance boost.

Inline Javascript: consider adding your JS scripts directly into the page's code as opposed to referencing it in an external file. However, this is only practical for relatively short scripts.

Minimize the number of plugins you use: unless you absolutely need a plugin, you should probably disable it. Plugins sometimes reference their own CSS stylesheets and JS scripts, all of which must be downloaded by the user for the plugin to perform its job.

  • Hi Fraser,

    I wouldn’t worry about the 4.7 second figure. GTmetrix by default displays the “fully loaded” time, which is the time it takes for everything, including background scripts etc., to load.

    What’s of actual interest is the DOM load time, which is the time it takes for content like images, text, and menus to load – basically the stuff the user actually sees on the page. This number will be much smaller than the Fully Loaded time – you’d need to dig a bit deeper into the GTMetrix report to find it though and I’m not even sure if it’s available in for free users.

    Cheers!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Sign up for How to Sell on Shopify

    Get access to our FREE full Shopify Course and product monetization. 

    >