How to Improve Website Load Speed

Let's start off by talking about how a browser works. When a user types a URL (www.carbondigital.us) into their browser, this signals the browser to look up the website's IP address. An IP address is a server address where your website lives (where the code is stored). Interestingly, you can access a website with just an IP address (try copying & pasting https://209.182.204.85/ into your web browser), but thankfully we have URLs so we don't have to memorize our favorite websites' IP addresses.

Once the browser discovers the website's IP address, it contacts the server where your website's code is stored. Once the file with the desired website's code is found, it's sent to the user's web browser to be parsed. Parsing just means that the browser is running the code and finding the resources needed to display the requested website for the user. 

A browser parses and renders a website file in 5 stages.

1. Building the DOM (Document Object Model) Tree - The DOM is built using the HTML from the website file This stage establishes the structure of the webpage and requests resources from any other URLs contained in the code (images, videos, etc.)
2. Building the CCSOM (CSS Object Model) Tree & Javascript - The CCSOM is built using the CSS from the website file. The CCSOM helps the browser understand the appearance rules set by the code and how to systematically apply them when rendering the website. Simultaneously, the browser is processing the website's javascript files. 
3. Creating a Rendor Tree - The DOM & CCSOM are combined. This process matches appearance elements (CSS) with structure/content elements (HTML). 
4. Determining Layout - The browser decides the location and size of your elements based on the type and size of the screen of the user's device. 
5. Drawing on Screen - The last step is when the browser "paints" the data onto the user's screen as individual pixels. 

So a lot goes on behind the scenes to create the "miracle" of the internet, and it all happens in seconds. When it comes to doing business on the internet you want this process to happen instantaneously.

Loading Speed and Its Importance 

Humans are impatient, especially when they’re on the internet. If your web page takes too long to load, your visitor could easily lose interest and click away to another website that’s faster. 

Loading Speed is affected by:

• Image file size
• Levels of compression
• Geographic distance between visitor and web server
• Server traffic  

Here are some stats that show how page load speed might be affecting your business:

• 70% of consumers admit that page speed influences their decision whether or not to buy from a website.
• 40% of people who visit a website will leave it if it takes more than 3 seconds to load.
• Visitors are 32% more likely to bounce from a website that loads in 3 seconds vs a website that loads in 1 second. 

Do you know how quickly your website loads? Do you know how it compares to the average? If the answer is no, you can quickly find out using Google PageSpeed Insights. If you check your load time and discover that your website speed score isn't up to par, there are five main things you can do. You can optimize hosting, optimize image size, enable browser caching, use a content delivery network (CDN), and/or use lazy loading. 

Website Hosting 

Hosting is where your website's code and files are stored. When a company purchases hosting, they are paying for storage space and bandwidth. You will also want to consider security, location, customer service, etc. 

There are several different types of hosting solutions. We're going to talk about 3 types of hosting options: shared, self-hosted, or managed/dedicated hosting solution. 

Shared hosting is hosting where your website shares a server with one or more other websites. Shared hosting is the most affordable solution, but you get what you pay for. When you choose a shared hosting solution, your website speed is dependent on the traffic of the other websites on the server. 

Self-hosting is when a business stores their website on servers that they own and maintain itself. This hosting method gives the business owner the most control over their hosting environment. Self-hosting is not impossible for small businesses, but it can quickly become an expensive task.

Managed hosting is when a business stores its website on a dedicated server that is managed by a third party. When a business chooses this type of hosting, it ensures that its website's performance will not be slowed down by other websites on the server. 

Optimizing Images

According to HTTP Archive, unoptimized images make up, on average, 75% of a total webpage’s weight. Unoptimized image files can have a huge impact on the performance of your website. To optimize an image for the web you need to understand image file size, image formats, compression levels, and image dimensions. If you understand how to manipulate these elements, you can serve your visitors a high-quality image that has a fraction of the file size and load time.

Carbon Digital uses Imagify to optimize our images for our WordPress site. With Imagify, we can quickly compress and resize batches of images to fit the container size without sacrificing image quality. 

Lazy Loading

Lazy loading is a technique that web designers use to improve page load speed. The technique holds off on loading an image until it comes into view. It does this by only loading the images above the fold (the visible part of a web page before scrolling down) and then loads the rest as you scroll down.

To a website visitor, it will look like the image had already loaded by the time they scrolled down to see it. This allows the content on a web page to load faster providing the visitor with an improved user experience. According to a study by Backlinko.com, lazy loading is the second-best tactic for reducing load time! If your goal is to improve your SEO and loading times, you should definitely set up lazy loading on your website. The effect on loading times is instant and significant. 

At Carbon Digital, we use lazy loading to quickly lower client load time and improve Core Web Vitals scores. We implement lazy loading by installing the WP Rocket plugin. WP Rocket also enables caching. 

Caching

We've all cleared our cache before, even if we had no idea what it meant. Caching is when web content from frequently accessed web pages is temporarily stored. When caching is enabled, your browser will download resources that are unlikely to change between visits like logos, icons, fonts, scripts, etc.

On future website visits, your browser will access these files from the cache and only need to download newer content from the server. Since your web browser doesn't need to download as much information from the server, the website's loading speed improves. 

There are three types of caching: site cache, browser cache, and server cache. Site (aka page/HTTP caching) caching and browser caching are closely related. Both are client-side caches that store the same types of images and files. The main difference between the two is that browser caching is controlled by a browser. The browser initiates downloading and storing of website resources and communicates with servers to update the data in cache. Server caching is done on the server-side. Server caching stores content, code, queries, etc. 

Caching is one of our favorite techniques for quickly making website performance improvements. Our team uses the caching plugin WP Rocket to enable site caching and apply the plugin’s browser caching rules to WordPress sites. 

Use a Content Distribution Network

A Content Distribution Network (aka Content Delivery Network or CDN) is a network of servers that cache your website's files in locations geographically closer to website visitors. We suggest studying your website traffic when considering using a CDN. If you're based in North Carolina and have a significant customer base on the other side of the country or in a different country, this could have a huge impact on loading time. On the other hand, if all of your traffic is within a 100-mile radius, we suggest looking into any or all of the above suggestions instead.

Conclusion 

There are many options for developers and marketers to make dramatic improvements to their website's load performance. Our team uses a combination of all the tactics above to boost load performance.

As we mentioned above, Carbon Digital's developers use WP Rocket to turn client websites into high-performance websites. WP Rocket allows our team to quickly implement lazy loading, caching, and integrate with a CDN.  

We also carefully choose a quality hosting provider. You get what you pay for with web hosting, and the cheapest option from a domain seller is not going to provide your visitors with the experience they deserve. Last but not least, when uploading images, our graphics team uses Imagify to resize and compress images to keep our pages light. 

This combination of tactics has done wonders for clients and our company website as well. According to our Google PagesSpeed Insights, we have a mobile performance score of 97 and a desktop score of 99. 

If you'd like to learn more about implementing lazy loading times or our entire page load optimization package, feel free to reach out to us!