ARTICLES PRODUCT UPDATES,
SEO TIPS & INDUSTRY INSIGHTS

How to Improve Page Loading Speed with Campaign Sherpa

Page Loading Speed is a critical factor in website optimization. User experience, engagement, conversion rates and retention all rely on page loading speed, because website visitors are looking for specific information to fill a need. With the rise of social media and short form content, visitor attention spans are now shorter than ever, and a slow-loading website reduces the chance that users will explore your products or services. If users are not engaged within the first three seconds, the probability of mobile users experiencing frustration and leaving the website increases by over 50%¹. You have lost the chance to convert your visitors before you even started.

What Causes a Slow Loading Page 

When a visitor arrives on a website, they have a set of expectations based on their previous experiences on the web:

1) They expect to be notified that that website is responding;
2) They want to immediately see that the website has some useful information;
3) They need to know when they can interact with the website;
4) They want a smooth user experience.

If your website takes longer than 3 seconds to meaningfully load for a visitor, there are several factors that could be responsible. The most common reasons include large and unoptimized images and video, JavaScript performance, and CSS construction.

Campaign Sherpa Website Audits measure performance by identifying the size of pages and images and how quickly certain items load, how fast the webpage responds to button clicks, and page speed fluctuations on different devices. Campaign Sherpa also provides relevant suggestions on how to improve specific pages to optimize loading speed. 

Improve your Page Loading Speed

Depending on the factors identified in your Campaign Sherpa Website Audit, there are several possible ways to improve the loading speed of a webpage. Some common techniques are discussed below.

Images

Having large files on your webpage generally slows down the page load time because of increased download times. However, you may use image optimization tools like Squoosh.app to shrink their sizes as much as possible without compromising on image quality. The following checklist will help to optimize the image quality and delivery:

1. Use an image Content Delivery Network (CDN) if possible
   • First, if you have a CDN that allows for image optimization, take full advantage. CDNs are basically networks of servers strategically located around the world whose sole purpose is to deliver website content quickly and efficiently. Since they’re spread out geographically, your visitors will be able to access these resources from nearby locations, thus cutting out intermediate steps in data delivery and improving page load time. Cloudflare has this feature in its paid packages, but there are free, opensource versions out there.
2. Choose the right image format
   • Vector formats (SVG) are best for simple shapes such as logos or icons
   • For photos, use WebP image format for the best optimization, and then PNG or JPEG as a fallback. Make sure to specify this to the browser in the code.
3. Resize images
   • Create multiple image versions of the image (minimum of 3)
   • Tell the browser how large the images are in the code. You should use a combination of the imgsrc, and srcset, with width descriptors for the browser.
4. Remove image metadata
   • If not necessary, you can remove the extra data including camera information, geolocation, etc.
5. Do not use Text in Images!
   
   

Lazy Loading

Lazy Loading is a strategy that loads the website assets in chronological order, from the most important resources to the least. This means that any off-screen or below the fold images or video will not load until the user scrolls down the page. There are a number of ways to accomplish this, such as using event handlers to detect when the user is scrolling, or using an Observer API to find the distance from the fold, in a framework called browser-level lazy-loading.

JavaScript and CSS

To ensure fast loading pages, consider optimizing your JavaScript using the PRPL technique:

• Preload the most important elements of the website
• Render the first route
• Pre-cache remaining elements
• Lazy load other assets as mentioned above

This will help to improve the time to interactive of the website by preloading fonts, background images, critical CSS files, and only the most important JavaScript. In much the same way as we lazy load images and videos, we can split up the JavaScript in order to prioritize the loading of the most critical components. There are also tools that can help you split up the code in this way.

It is also possible to detect unused bundles of code with Chrome Developer tools. You can then remove unused or unnecessary libraries from your code to optimize the website.

Minification and Data Compression can also help to improve page loading speed, and can be accomplished with a JavaScript compression tool to remove whitespace or unnecessary elements.

Third-party resources

Having multiple copies of common scripts on your website can really slow it down. Using a Tag Management System like Tealium can ensure that you have only one copy of a script running on your site at any given time. Also, ensure that you remove redundant plug-ins and avoid excessive ads on your webpages to collectively improve performance. 

WebFonts

A fast loading page that displays the necessary content will also requires text to load immediately. Unfortunately, font packages are large and take a long time to load. The solution is to use a system font until the custom font is ready. This can be accomplished by using font-display, or by detecting when the custom font is loaded with JavaScript and updating the styling once it is. The CSS will need to be adjusted to make sure it is not using a custom font on the initial page load, and that it waits for the custom font to be loaded before updating.

You can also follow a similar lazy loading strategy, by using a fallback font on some sections of the website until the custom font is available, and then re-rendering with the custom font once available.

Final Notes

Load time is also an important factor in Search Engine Optimization – which means that with a few changes to your website, you can improve efficiency, user experience, conversions, and increase your search engine rankings as well.

Campaign Sherpa offers valuable insights for improving your page loading speed, and directs you to the most critical pages for improvement. The Campaign Sherpa team can also support and implement these changes.  Request your Free Audit to get started today.

¹ https://www.blog.google/products/admanager/the-need-for-mobile-speed/