We live in an era of instant gratification where speed matters. When it comes to the web, it’s no surprise that faster-loading websites tend to do a lot better than their sluggish counterparts. However, web page loading speed is also a critical SEO factor.
Since 2018, Google has started using speed as a ranking factor for mobile searches. The most logical explanation for this move would be that fast-loading web pages offer a better user experience. That, in turn, results in better engagement and sales conversions.
As a webmaster, the responsibility of speed optimization falls on your shoulders. Here are seven tips that’ll help you muster this responsibility successfully.
1. Delay JavaScript
Third-party resources and JavaScript often cause speed optimization issues for websites and Web Vital. The truth is, you can take care of most suggestions produced by your page speed analysis tool if you have a working solution.
That’s where Async and Defer come in.
- Async: This function downloads the file during HTML parsing. After the download is complete, it pauses the HTML parser from executing it.
- Defer: This function will also download the file during HTML parsing. However, it executes the file only after the parsing is finished. Furthermore, it ensures the execution of defer scripts in the order as they appear in the document.
JavaScript delay
However, in both cases, the resources will execute while the page loads. You will need to apply a solution where JavaScript loads after the web page gets loaded. So, it will not affect the page load speed.
Delaying this type of JavaScript will allow a webpage to load first. Once the page is loaded, it will load external JavaScript. This simple change can work wonders.
setTimeout(function(){ *insert your third-party code here* }, 3000);
However, it’s better to terminate delay once the user interacts with the site (uses mouse or scrolls up and down). Also, when you delay the script, the script should be executed by merging all scripts.
If you are using WordPress, it will be a lot easier to ensure JavaScript delay. You can use one of the several plugins for delay script.
Here are a couple of my favorites –
We often use the WP Rocket plugin to delay JavaScript. Its easy-to-use and takes care of all the above issues.
Using this plugin, you can delay almost all of the third-party JavaScript, including the following.
- GTM
- Chat Scripts
- Accessibility Scripts
- Hotjar
- Social API scripts (Facebook, LinkedIn, Instagram)
Apart from these, you can also delay other JavaScript like slider, plugin scripts, core scripts of the builder, or sometimes WordPress core JavaScript. However, do make sure to verify the site is working properly after delaying the internal scripts hosted on your domain.
2. Fonts and Icons
Fonts and icons are also one of the main reasons for sluggish websites. The following tips can help you resolve this issue.
A. Tips for Using Fonts
- You can load the Fonts from the local server instead of the external domain. If you are using WordPress, OMGF is an excellent plugin for the same.
- Avoid using multiple font variations on your website.
- Also, don’t use multiple font-weights.
- If you are using the Font only on one page, there is no need to load it for the whole site. You need to load it only for the specific web page. For WordPress users, Asset CleanUp is an excellent plugin to resolve this issue.
B. Tips For Using Icons
Usually, you need to use only a few Icons from the Fonts. However, most websites will still load complete Font assets for the same. It can slow down your site. For instance, if you are using Font Awesome, you will need to disable it to avoid multiple requests on the server. Instead, you can convert or create your fonts for the same icon using a plugin like Fontello.
3. Images/Video/Google Map
As virtual information is easy to digest, the current web development and design trend often focus on using multiple high-quality images and videos. While these can encourage your users to stay longer on your website, they also affect webpage loading speed significantly.
Taking the following steps can help you overcome this issue.
A. Tips For Using Images
- Avoid using PNG images whenever not required.
- Optimize images for faster loading.
- Use the right image sizes.
- Try to use separate images for mobile wherever required.
- Defer offscreen images.
- Efficiently encode images.
- Use Lazy Load for images, iFrames, and videos.
- Don’t set explicit width and height for image elements.
- Serve images in next-gen formats such as JPEG 2000, JPEG XR, and WebP.
- Use sprite images for small images.
You should always use an image for a video or a Google Map. You can load the actual video or map once the user scrolls to the map or video or clicks on them.
Most developers also struggle to ensure high loading speed on mobile and other small screen devices. It usually happens because developers often use the same images or media for both desktop and mobile views.
Even if you use separate images for both views, desktop images often load in the background when accessing the website via mobile. They also don’t prevent large image requests in mobile view. It’s a common mistake.
Applying the following solution can help resolve loading speed issues due to large images.
LCP: For most websites, LCP is a large image. You can always preload such images using the following code.
<link rel=”preload” as=”image” href=”/large-image.jpg” media=”define your viewport size”>
After making the necessary changes, verify that you are loading desktop images to desktop and mobile-only images to mobile devices.
4. Faster Page Switching
Page loading speed is also a concern when the users move from one page to another while browsing your website. The following solutions can help you resolve this issue.
A. Prefetch The Next Page
Instant.page reloads a page when the user hovers over the page link. Unlike QuickLink, however, it will prefetch only the link you are hovering over, not all the links on the page.
If you are using WordPress, the WP Rocket plugin will provide inbuilt functionality just like the instant.page.
However, this will not improve your website speed score as it will prefetch only one link. Also, instant.page requires superfast server response because users often click a link in around 300ms after hovering the mouse over it.
B. Prefetch All The Menu Links
Another solution for faster page switching is to prefetch all the menu links. When you implement this solution, you will see the pages working like React website.
The Flying Pages plugin will help you enable any of these options to speed up page switching on your WordPress website. It will detect pages in the viewport and on mouse hover, preloading them instantly.
However, it is better to prefetch the next page instead of prefetching all the menu links. If you are prefetching all the links, you need to ensure some delay before prefetching. If not, it can affect your current page load speed as there will be too many link prefetching requests.
Note: Never prefetch dynamically data injected links.
5. Reduce TTFB (Time to First Byte)
TTFB (Time to First Byte) comprises the following three components.
- Sending the HTTP request
- Processing the request
- Sending back the response
You can make the following changes to reduce TTFB.
- Use the latest Server Configuration (PHP latest version).
- Lower DNS response time (Use Global DNS server).
- Use Server Location and Target Viewer.
- Use Faster CPU and resources in Hosting.
- Use caching plugins (WP-Cache, WP Rocket).
- Keep minimum plugins on the website.
- Use a CDN.
- Reduce third-party or images requests
6. Load Plugins Only Where Necessary
When using open-source platforms like WordPress, developers often load all the plugins (and plugin assets) to all the pages, even if you need a particular plugin for a specific page. It affects your page loading speed badly.
It is better to enable the plugin only on a couple of web pages where you require it and disable it from others. Asset CleanUp is a popular plugin that will help you implement this solution quickly.
7. Caching
The cache acts as a memory bank, allowing browsers to store data temporarily without having to request it from the server. This temporary data storage can help websites load faster. You can set appropriate cache configuration on the server or use any third-party services to increase the speed.
If you are using WordPress, the WP-Rocket plugin is an excellent plugin for cache settings. However, it can do a lot more than just caching.
Here are a few crucial settings available in WP-Rocket that’ll help increase page speed.
- Enable caching for mobile devices.
- Enable caching for logged-in users.
- Set Cache timeline 0 (unlimited).
- Minify HTML.
- Minify CSS.
- Minify JavaScript.
- Load JavaScript deferred.
- Delay JavaScripts.
- Enable Lazy Load for images, videos, and iFrames.
- Active preloading.
- Prefetch DNS request.
- Advance setting to exclude page and cookies from caching.
- Settings for CDN.
8. Cumulative Layout Shift (CLS)
In addition to this, it is also a great idea to optimize the Cumulative Layout Shift (CLS). It can be distracting to users if the web page layout changes suddenly. This issue is more common than you can imagine.
Although optimizing CLS may not directly help improve the page loading speed, it can most certainly help improve user experience. Improved user experience, in turn, can help visitors stay longer on your website. It can also help increase your CLS score which is part of Web Vital.
Conclusion
As you may already know, loading speed is a critical SEO factor. A fast-loading website can help you improve user experience, generate better conversions, and establish your online brand. You can apply any or all of these solutions depending on your requirements and resources. These solutions can also help improve your page speed score considering Google’s Web Vital update. So, which solution would you want to implement first? Tell us in the comments.
