Need for Speed – How To Increase Your Mobile Load Time.

As famously stated by Tom Cruise in the film Top Gun, “I feel the need… the need for speed.” However, it is not solely fighter pilots who yearn for swiftness; website users also have similar expectations. 

In today’s fast-paced digital world, visitors demand swift loading times from websites, and failure to meet these expectations may result in a loss of potential consumers. Thus, the optimization of page speed is of paramount importance for WordPress websites. Besides enhancing user experience, it can improve search engine rankings and increase conversion rates.

This article will cover various approaches to optimize your WordPress site for loading speed to maintain visitor engagement, foster recurring traffic, and increase business bottom-line revenue.

The importance of page load speed on mobile phones cannot be overstated in today’s digital landscape, with a growing number of internet users accessing websites on their mobile devices. According to StatCounter Global Stats, as of February 2023, the global ratio of internet users accessing the trend towards mobile usage has been increasing over the years and is expected to continue in the future, highlighting the importance of ensuring websites are optimized for mobile devices.

Improving the page speed scores of mobile devices on Google’s search engine results page can be considered a challenging task. It necessitates optimizing various factors, including reducing server response time, minimizing the blocking of resources during rendering, and optimizing the CSS and JavaScript code. However, it is essential to remember that achieving a perfect page speed score may not always be necessary or feasible, as it may come at the expense of the user experience or certain functionalities. And development time!

Nevertheless, numerous strategies can be implemented to enhance the PageSpeed scores of mobile devices. Some of the most effective methods include:

• Optimizing images by compressing them and minimizing their size, 
• reducing the number of requests made to the server to expedite loading, 
• enabling browser caching of resources such as images and scripts, 
• optimizing CSS and JavaScript code to reduce the time it takes for the page to load, and 
• leveraging a content delivery network (CDN) to distribute the website’s load across multiple servers, 

Implementing these methods will aid in decreasing the load time for users located not only in your local market but across the world.

The case study – Vitality Health Foods

As a case study, we will discuss how we optimized a site for one of our clients for mobile. This site was built using Elementor and optimized for performance using WP Rocket, the most famous page speed optimization and some manual fixes in Elementor and Apache web server settings.

What We Did to Improve Website Speed

We will individually discuss all the steps taken to improve the PageSpeed scores using WP Rocket.

1. Cache

It is observed that enabling the option “Enable caching for mobile devices” and its sub-option of “Separate cache files for mobile devices” helps improve mobile device scores.

2. File Optimization (Optimize CSS and JS)

• Minify CSS files: Make sure to always enable the minification of CSS files, as it is unlikely to cause any issues except in exceptionally rare cases.
• Combine CSS files: Always opt to disable the combination of CSS files, as it is unnecessary when using HTTP/2, and in fact, it will slightly impede the download speed for most users and servers. HTTP/2 can use a single TCP connection to send multiple streams of data at once so that no one resource blocks any other resource, so there is no need to combine the CSS files. If you’re wondering how to determine if your site uses HTTP/2, please click here.
• Exclude CSS files: This should be left blank.
• Optimize CSS delivery: It is worth experimenting with the Load CSS Asynchronously option. However, avoid using the alternative option of removing unnecessary CSS, as it is still unstable and can lead to various issues, including server problems. Furthermore, this option increases the size of the database, so it is highly recommended to refrain from testing it unless during the testing phase.

3. JS Optimization Options

1. • Minify JavaScript files: Enable, always. Except in very rare cases if it breaks something.
   • Combine JavaScript files: Always opt to disable the consolidation of JavaScript files, as it is unnecessary when using HTTP/2, and in fact, it will slightly impede the download speed.
   • Exclude JavaScript files: To avoid disabling minification for all files, exclude JavaScript files.
   • Delayed loading of JavaScript: Always enable the delayed loading of JavaScript. This option, if enabled, helps reduce the load time.
   • Delay execution of JavaScript: Make sure to enable the delayed execution of JavaScript, which is WP Rockets’ most crucial feature for performance.

4. Media

Enable all options in the media tab. A brief description of each option follows.

1. 1. LazyLoad: enable all options, i.e. for images, iframes, and videos, also check the “Replace Youtube iframe with preview image” option.
   2. Consider excluding certain images, classes, or elements from lazy loading if their lazy loading causes a CLS issue. For example, in this case, the site logo has been excluded from the lazy loading because the logo wasn’t there when Google’s PageSpeed looked for “First Contentful Paint” and the same is true for the swiper slider elements.
   3. Image Dimensions: check the “Add missing image dimensions” option, as it helps reduce the CLS issue.

5. Preload

Enable all checkboxes in the “Preload Cache” and “Preload Links” sections.

In the “Prefetch DNS Requests” section, add the URLs of third-party sites like Google Tag Manager, Google Analytics and Google Maps, etc., to reduce the DNS lookups at the time of page load.

In the “Preload Font” section, add the URL path of the typescript and icon fonts. Please note that this box only accepts the site path i.e. fonts locally hosted on the same site. If you are loading fonts from CDN or using Google Fonts manually, you must add “display=swap” at the end of the font URL.

<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto&display=swap”>

6. Content Delivery Network (CDN)

Consider using a CDN if your site has one or more of the following scenarios:

1. 1. Global audience: If your website has a global audience, using a CDN can help to reduce the latency experienced by users in different regions, improving the user experience.
   2. High traffic volumes: If your website experiences high traffic volumes, using a CDN can help to offload traffic from your origin server, reducing the risk of server overload and downtime.
   3. Large or numerous files: If your website serves large files, such as videos or high-resolution images, using a CDN can help to reduce the load time for those files, improving website performance.
   4. E-commerce websites: If your website is an e-commerce site, using a CDN can help to improve the user experience and increase conversion rates by providing faster page load times and reducing cart abandonment.
   5. Security: If your website requires additional security features, such as DDoS protection or SSL encryption, many CDNs offer these features as part of their service.

Apart from WP Rocket settings, you may have to make some additional changes manually to increase the PageSpeed scores for your site. For example, if you get “Expiry Headers” and “GZip Compression missing” warnings, then there is a possibility that specific modules are not enabled in your Apache server, so please make sure that the required modules are enabled.

The Results of Our Optimizations

Applying page optimization fixes using WP Rocket to the mobile website of https://vitalityhealthfoods.ca/ has yielded impressive results. Google’s Search Console Insights report indicates that 96.6% of the website’s URLs now fall under the “Good” user experience category. 

Furthermore, the experience signals, namely core web vitals, mobile usability, and HTTPS, have been reported as “Good.” This significant improvement in webpage speed and performance can profoundly impact the user experience and the website’s overall success. By optimizing webpage speed, https://vitalityhealthfoods.ca/ has not only improved its core web vitals scores but also enhanced the mobile-friendliness and security of its website. 

These results demonstrate the critical importance of webpage speed optimization and the effectiveness of employing tools such as WP Rocket to achieve optimal page speed and performance.

In conclusion

Optimizing webpage speed has emerged as a crucial factor in enhancing user experience, improving search engine visibility, and ultimately driving business growth in the digital age. With the ever-increasing demand for quick and seamless access to information, slow-loading websites have become a significant obstacle to online success. 

The recent emphasis on core web vitals scores by Google has further underlined the importance of webpage speed optimization in online marketing strategies. Therefore, website owners and developers must invest in tools and techniques that can help enhance page load times, such as image optimization, compression, and caching. By prioritizing webpage speed optimization, website owners can not only boost user engagement and satisfaction but also potentially increase conversions and revenue. Thus, it is imperative to continue research and development in this field and explore new ways to optimize webpage speed to meet the evolving needs of internet users.

Boost2Business offers a comprehensive page optimization package to assist website owners in achieving optimal page speed and enhancing their online presence. The team of experienced professionals at Boost2Business specializes in optimizing webpage speed and performance and can work with website owners to identify key areas of improvement and implement effective solutions. 

Using our page optimization processes and tool recommendations, customers can expect to achieve faster page load times, improve user experience and engagement, and increase search engine visibility. Don’t hesitate to contact us for more information about Boost2Business’s page optimization package.