Improving your website’s page speed and performance can not only benefit your SEO efforts but also provide significant value to general user experience, conversion rate optimization, and website accessibility. However improving a website’s page speed can oftentimes be an incredibly difficult project. Oftentimes it means rewriting code, optimizing image files, and updating a website’s technical infrastructure. However there are a handful of tactics that are easy to implement and can provide a significant boost to your site speed with minimal effort.
Here are three of such tactics that I regularly advise clients to take advantage of. Each of these elements are easy to implement for all sites, and can provide a significant boost in user experience and page performance.
1. Preload/Prefetch Site-wide Assets
Every web page is generated from HTML, CSS, JavaScript, and images. Each of these individual page resources need to be loaded completely before the page can be seen correctly by users. Oftentimes if the HTML loads before other assets have had a chance to load completely the page will not work entirely or at all until the other assets are loaded. To ensure that all assets are loaded at the same time, you can provide special markup in the HTML that loads critical design assets at the same time the HTML is rendered. This process is called preloading and can dramatically improve the page-speed and user performance of each webpage.
However because each page typically requires different design assets for the content found it can be difficult to include this type of markup on a page by page basis. Therefore it is best to preload site-wide design assets through the use of a HTML template or Content Management System. This will pre-load design assets that are utilized on every page of the website such as the website’s logo, main CSS files, and JavaScript libraries. By pre-loading these site-wide design assets, you are speeding up the performance of every page on the site by only adding code in one place.
Preload logos and other images
You can copy and edit the HTML below to preload logo and image assets within your website. Simply replace the image URL with the complete canonical URL to your image or logo. After editing the code you can copy and paste the markup into your site’s template or CMS right above the </head> tag. Most CMSs have a place to paste code into the head sections of the site.
<link rel="preload" href="https://example.com/images/logo.png" as="image" type="image/png" />Preload CSS and JavaScript
Preloading CSS and JavaScript is almost exactly the same as the images seen above. However there is some slightly different code utilized to declare the file types. Below are some examples of both preloading CSS and JavaScript files. With these examples you can paste in your own CSS and JavaScript URLs and add this code right above the </head> tag. Make sure to include individual preload tags for every sitewide CSS file. Typically for a site that’s built on something like WordPress this is a file found within the WordPress theme folder called style.css.
<link rel="preload" href="https://example.com/css/style.css" as="style" />
<link rel="preload" href="https://example.com/js/main.js" as="script" />2. Implement Instant.Page
As we have already learned, preloading can dramatically speed up page speed and performance. However the examples above only address sitewide design assets which does not apply to assets that are subjective to the content found on each page such as article images and CSS or JavaScript from plugins. To easily preload all assets on an entire page, we can Implement a lightweight and very powerful JavaScript framework called instant.page
Instant page is able to preload an entire page before a user has even visited, by triggering the page load process when a user hovers over a link. The instant.page JavaScript library immediately begins preloading the next page clicked within 65 milliseconds of the user hovering over a link. While this may seem like not much of a difference in regards to pagespeed it can significantly reduce the amount of time required for a complete page to be loaded. This JavaScript library is used by many large e-commerce websites and big brands that are trying to improve the user experience for visitors that are navigating through their website. Installing this JavaScript library is incredibly easy, you only have to copy and paste the code found below, right above the </body> tag.
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>The only caveat to using instant.page is that the preload process does not begin on the initial page load. instant.page’s preloading events only occur when a user clicks on an internal link to another page or section of the website. Therefore it is always a good idea to implement preloading like discussed in the first tactic, along with instant.page to ensure that a majority of the pages’ assets are preloaded on both landing pages and other pages the user visits after the initial landing.
3. Implement CloudFlare
I almost did not mention CloudFlare within this article because nowadays it seems to be so commonly used that it may seem unnecessary to mention within this post. However many people still do not know all of the features and capabilities that this powerful service offers free of charge to all of its users. Therefore, here are some page speed optimization features that you can utilize with your free CloudFlare account.
At the core of Cloudflare’s speed-enhancing capabilities is its Content Delivery Network (CDN). Cloudflare operates a vast global network of servers, strategically placed to ensure that when a user accesses your website, they receive content from the server closest to their location. This proximity reduces latency, allowing content to be delivered more quickly.
In addition to its CDN, Cloudflare excels in caching. The platform automatically caches static content such as images, CSS, and JavaScript files. By serving these cached resources from edge servers, Cloudflare reduces the load on your origin server and minimizes the time it takes to deliver these assets to users. This caching process is a significant contributor to improved page speed.
Support for advanced web protocols is another way Cloudflare boosts performance. The platform supports both HTTP/2 and HTTP/3, which are more efficient than the older HTTP/1.1 protocol. These newer protocols allow multiple requests to be sent over a single connection, which can significantly reduce the time it takes for a web page to load.
Cloudflare’s Rocket Loader feature is another tool designed to optimize loading times. Rocket Loader defers the loading of JavaScript until after the main content is rendered. This ensures that the page becomes interactive more quickly, improving the perceived performance for users.
Additionally, Cloudflare’s DNS services play a crucial role in speeding up your site. Known for being one of the fastest globally, Cloudflare’s DNS reduces the time it takes for browsers to resolve your domain name to an IP address, which is a critical first step in the process of loading a web page.
Many of the features discussed above come enabled by default; however it’s always best to explore the CloudFlare dashboard and check each of the features to customize the settings for your own needs. Their user interface is extremely easy and is designed so that anyone can manage these settings.
If you are able to successfully implement preloaded sitewide assets, implement instant.page JavaScript, and start utilizing CloudFlare, you will see a boost in page speed and performance metrics. However it should be understood that these tactics are targeted towards “real users” versus speed analysis tools. Therefore the most significant gains will be seen within real user data such as the CrUX report found within your Search Console Page Experience panel. Data for that report is a composite over the last 28 days of user behavior. Therefore you may not see additional changes after using these tactics until at least a month after they’ve been fully implemented.
Side note from Joe: If you implement the above tactics and still do not see an increase in your page performance metrics, contact me immediately and I will put together a plan to take you to the next level.
