Picture of Nathan Gaidai
Nathan Gaidai
Table of Contents

Make Your Mobile Pages Load Faster

Table of Contents

Nowadays everything seems to be put on x100 speed, compared to previous decades. Everyone and everything seems to be in a hurry and that rush is also affecting business strategies, plans, websites, etc.

Getting information instantly, financial transactions with a click of a button, and entertainment in our pockets 24/7 are a few examples of this. The internet is one of the factors to having data available to users instantly, which also changes the human mentality as well. And, just like businesses, this is affecting us as well.

The more people are in a hurry, the more likely it is that they will be impatient, especially if they have to wait. If the information that they are searching for is not available within seconds, they will find another way to get that information.

And that is a serious problem for modern businesses it’s drastically affecting their bottom line. Since pretty much everyone is on their phones all day long, making the mobile pages load as fast as possible should be a top priority for the business.

Users via mobile are typically more impatient and leave if the mobile pages take forever to load. Another reason is that mobile devices have slower processors and the connection isn’t as reliable compared to desktops. Loading time on mobile is slower in general compared to desktop, even if the website is fully mobile optimized.

As we have discussed in a previous SEO Jokers blog post, page speed is a major factor in mobile SEO and it also affects your ad rank. It also impacts user experience (UX) on mobile devices, further negatively affecting your rank, potential reach, ad quality, and revenue generated.

The data backs ups the necessity for better loading time on mobile pages since 47% of users expect websites to load in 2 seconds or less, while 40% will leave a website that takes 3 or more seconds to load.

Most experts suggest that under 3 seconds is the optimal time for mobile pages to load. However, anything over that and Armageddon happens: People freak out, leave the website and go to the competition, decreased revenue and conversions.

On the other hand, the reverse is true as well. The websites with the fastest mobile pages get the most traffic, best positioning, and overall the most amount of potential and existing users.

That is why we have dedicated an entire blog post, to help you optimize your website for the best loading time on mobile pages and reap the benefits from it.

 

Why Is Speed Mobile Pages So Important?

The data presented by Think with Google shows that 74% of people are more likely to return to that site in the future, while 67% of users on mobile pages are more likely to buy products or services if the website is mobile-friendly.

So having a fast and mobile-friendly website hold tremendous value and increases the potential for traffic, new clients, and overall conversions.

Although we have mentioned it briefly above, the 3 most important aspects that the speed on mobile pages is affecting businesses are:

  • Search ranking
  • Bounce rate
  • Conversion rate

 

Search ranking

As mentioned previously, Google crawls your website and uses a few tools to determine whether the website UX and content are adequate for what the client searches for. Using that information, it ranks your website on the search engine.

Within the broad term of user experience, an extremely big factor is loading time on mobile pages. The research shows that a good loading speed on mobile pages has a big impact on ranking in the top 10 Google search results.

Most top 10 ranked websites are optimized and designed for maximum speed, so it should be your top priority if you wanted to rank high.

 

Bounce rate

The bounce rate percentage is closely related to how fast the website loads. The bounce rate percentage decreases significantly if the loading time on mobile pages is faster mobile pages.

The data shows that the probability of bounce rate increases by 32% if the load time on mobile pages increases from 1 second to 3 seconds, while a staggering 90% if it jumps from 1 second to 5 seconds.

 

Conversion rate

A logical conclusion to having slow speed on mobile pages is an increase bounce rate and decrease in conversion rate as well. A study by Think with Google found that a 1-2 second delay in mobile speed impacts the conversion rate as high as 20%. And, if the delay is longer, it increases the bounce percentage and ultimately conversion rate.

These are just one of the reasons why we recommend implementing the best practices mentioned below will decrease the bounce rate and increase the conversion rate for your website.

 

How to Speed Test Mobile Pages

The first part of the process of improving the speed of the website is to measure the current performance of the mobile pages. That includes evaluating the current website health and overall excepted speed for mobile users.

For a comprehensive audit of the website in terms of overall health and speed on mobile pages, we would recommend using Google Lighthouse and PageSpeed Insights, since they provide easy insights into your site’s performance both for desktop and mobile pages.

As a side note, we would also recommend analyzing the UX with test groups and different devices to see the overall opening, refreshing, and transitioning speed to other mobile pages.

While it’s worth exploring both Google Lighthouse and PageSpeed Insights, we have also included additional tools that can help you assess speed on mobile pages mobile, so that you know how to proceed

 

Google PageSpeed Insight

One of the Google SEO tools pointed out above, PageSpeed Insights is a great way to measure and analyze the loading time of any of your URLs. This tool is specifically created to help websites make necessary speed optimization of your mobile pages.

This tool is so straightforward to explain:

  • Open up PageSpeed Insights
  • Paste your website URL
  • Click on the “Analyze” button on the far left and Google will run the website speed test
  • Once loading, it will generate a report that highlight which elements could be negatively impacting your speed
  • After going through and sorting the issues presented in the “Possible Optimizations” list, it will show the level of impactfulness of the remaining unoptimized elements.

Just like anything in life, when it comes to this list we need to “prioritize and execute”, meaning start to work on top priority items and then go through the rest.

 

Lighthouse Metrics

An excellent tool to test your WordPress website, Google’s Lighthouse is the go-to extension if you want to know how your mobile pages are doing.

  • Go to Lighthouse and install the extension to your browser
  • Open your website and find the extension
  • Click on the extension and select “Generate Report”
  • The Lighthouse Report Viewer shows the website performance, accessibility, best practices, SEO, etc.
  • It’s going to give you a breakdown report with a lot of useful information, including recommended “Opportunities” that you can go through to maximize speed

You can also generate useful mobile pages performance reports by using Lighthouse.

 

GTmetrix

GTmetrix is a free and useful tool to help you measure your website’s performance on a desktop, which has a feature to measure website performance of mobile pages if you purchase the pro account. It’s powered by Lighthouse, and scores your page, as well as offers recommendations to improve the score, and improve the performance of the website at the same time.

The really cool thing about this tool is that you can add it to your website as a plugin and run the reports from there, although it does work as a separate tool (just like the 2 above). The most commonly used features are the scheduled reports (daily, weekly or monthly basis), alerts about the status of the website, size to reduce for each element, etc.

 

WebPageTest

Analysis of the performance of the website should be a recurring task for all businesses because traffic, users, and conversions depend on it. That is why we would recommend also using the tool called WebPageTest.

This tool helps you find out which pages are slow-loading on your WP (WordPress) website and how to resolve the issues that reduce the speed.

Overall, even though you might think that you’re website is the fastest and overall the best, we would recommend using the above features to your advantage, daily in the beginning and then gradually weekly to monthly once the core issues have been resolved.

On that note, we have provided a list of the most the key points for you to focus on and speed up your mobile pages.

 

How to improve the speed of mobile pages

As one of the most important factors to a great Google first page positioning, load time of mobile pages is as important as ever.

Although all of the below should be considered a priority for developers, we have written in no specific order the most important aspects of the website for focus on and sorted to make your website more efficient.

 

1. Combining files

Usually, modern websites are aesthetically pleasing and have a lot of layers, pages, photos, visual appeal, videos etc. That means that a lot of code has been written to achieve that aesthetic appeal. But, it also usually means that there are a lot of files in which the code is written, which are slowing down the website as a whole.

That is why as a first step we would recommend combining multiple files into one (usually JavaScript and CSS files) where you are able to. Another example would be if you have multiple JavaScript files, to see if those can be combined into one (the same can be done for pretty much all files).

Best practices are to have one site-wide file (for example 1 HTML, 1 CSS, 1 JavaScript) that is one every page of the website, and a template-specific file for each page template on the site.

 

2. Minimizing HTTP Requests

Just like a bunch of extra files and unnecessary code, HTTP requests are also one of the biggest factors to decreasing the speed of the website. These requests happen when a browser asks for HTML or CSS files from the server, which means that the more on-page components (like images, videos, stylesheets, etc) on the website, the requests take longer, and along with that, the overall load time of we whole page.

The fastest way to fix this issue and increase the speed of mobile pages is to simplify your website design by implementing the following recommendations:

  • Have a standardized number of elements on your website pages, which by most estimates shouldn’t surpass seven. To able to achieve this, we would recommend removing unnecessary features, reverting the copy, and getting rid of overlapping forms.
  • Instead of images, use CSS wherever possible. Style effects like rounded corners, shadows, gradients, etc can be easily achieved with CSS instead of doing so on the image itself. The reason is that it makes the website more lightweight (images with a lot of layers and stylized features are usually heavy) when the same can be achieved more efficiently with CSS.
  • Consider deleting scripts or putting them at the bottom of the page. By doing so, the HTML content of the website will load first (both for desktop and mobile pages), and the user won’t have to wait for the script to finish downloading, which improves the “above the fold” load time.
  • Combining all images into one large image (in a CSS sprite sheet) will reduce the references to individual images and boost the load speed of your mobile pages

3. Optimizing Images

One of the most common reasons for poor website load times both for desktop and mobile pages is incorrect optimization and compression of images. The reason for that is, like we mentioned above, big and well-designed images have huge sizes that unless optimized will affect how was the website loads.

You can spot unoptimized images on your website that takes more than the rest of the page to load properly and even when using the “Open image in a new tab” feature, you can see how massive the image is.

To improve your website load time, we would recommend compressing all of your images (no exception) before uploading them to your website. There are both professional editing programs and free tools online for this for optimizing your images.

If you are asking about the optimal image size, in general, the image that is uploaded to your website shouldn’t exceed more than 150-200 KB. It’s because big images (larger than 1-2 MB) consume a large bandwidth while loading, use a lot of server resources, and most importantly annoy your customers.

For a perfect optimization, you need to think of three key points: Size, src attribute, and format.

A few additional useful tips from our end include:

  • Crop images before uploading them on the website, to get maximum customer and server benefits (like for example, an image that is 1200x1200px)
  • JPEG is the best image format, so try to avoid GIFs, BMBs, etc.
  • Make sure to remove image comments and reduce color depth
  • Delete <img src=’…’> codes, which can add unnecessary traffic to your servers

 

4. Reducing redirects to a minimum

In most of our previous blog posts, we have discussed the importance of redirects (especially from other websites to yours) as it helps inform search engines that your website can be found at a different address or if you want to eliminate the problems with broken subpages and links.

However, just like in life, you need to have balance with redirects as well. Too many redirects can significantly slow down your website speed because the server needs time to find the original URL.

That is why you should keep only the most important ones, while removing the rest of the redirects, to avoid affecting the page loading and discouraging users.

 

5. Simpler web design

Though flashy and appealing designs attract user attention and potentially can increase interest, the excess banners, and pop-up windows negatively impact the website loading time and overall UX of the pages in the long run.

That is why, when designing mobile pages we recommend analyzing which elements and functionalities are essential and which just add extra unnecessary size.

Simply put, too many extra elements, images, videos and effects are not only slowing the mobile pages but also discouraging users to stay as much as possible on the website.

The perfect website design has simple and original solutions that down the attention of website visitors, while at the same time not slowing down the overall load time of the website.

Also, we have included a useful video can cover the 3 key web design principles to get you started:

 

6. Optimizing what loads first

We briefly touch on this in one of the key points above, but it’s important to adjust the order of which parts of the mobile pages should load first, and faster than others. It’s usually referred to as critical-path rendering, in which we prioritize the “critical elements”, like the headers, content of the page, and basic layout of the page to load first while delaying the items that are considered less critical, especially if they will delay the loading of more critical items.

This process of prioritizing the load time of the most important elements first tends to drastically improve the UX and the load experience of the website.

It is also referred to as the “above the fold” load time, which loads the most important elements that the users initially see first while taking a few more seconds to load everything else down the page.

 

7. Removing unnecessary plugins

There are a lot of plugins that you can use to help you make your website and mobile pages (especially WordPress) to be as fast, effective, and scalable as possible.

Yet, not all plugins are created the same.

Some might be recommended to you from YouTube videos, friends, colleagues, etc but tend to significantly affect the speed of the mobile pages, especially if it’s a case with a plugin that you have tried once, left on the site, and forgot to delete.

Poorly coded plugins can lead to performance issues and chew up a lot of data. So, the plugins that are not that useful (or are not used at all) need to be deleted.

The same goes for any future plugin that you come across. It’s a matter of analyzing if the plugin has more benefits and side effects. If the latter is true for the plugin, you’re better off without it.

There are quite a lot of valuable plugins that most websites should use (we’ve even recommended some in this blog post), and there is unfortunately no standard rule for how many plugins you should have on your website for maximum efficiency.

We have also included a short and useful video that deconstructs how a lot of WordPress plugins can affect the website’s performance and security.

A lot of plugins on your website are not always a good thing. They can impact the load time of your mobile pages, and could potentially lead to security breaches and overall low website performance. That is why we would recommend carefully choosing your plugins and removing the ones already there that are not that useful.

 

8. Keeping your website light and fast

Again, related to the design of the mobile pages, most of the time the coolest website is not the most effective. It might be attention-grabbing and appealing with a million elements, which leads to an overall bigger total size of those elements, which leads to a poor load time.

Having an aesthetically pleasing but slow website with a huge amount of images, videos, CSS, and JavaScript code is referred to as “code bloat”, which is when your website gets weighed down with extra unnecessary code.

This happens mostly when we focus on the visual aspect of the website and not the key web design and business principles.

The most common tips for having an aesthetic and efficient website are the following:

 

  1. Simplicity

Simplicity is key for a lot of things in life, website design is included. If we take a look at past and present websites, we can see a shift from big, flashy, and complex designs to more modern, minimalistic designs.

Not only is minimalism a modern way of designing websites, but it also affects the speed of the website, which then translates to more traffic, higher ranking, more conversions, etc.

Especially on mobile pages, complex designs can be too dense, unclear, and crowded for users, which could potentially mean that the most important parts of the website might be shadowed or missed.

That is why we recommend having a minimal, open, simple, and effective design.

For reference, we have included a video that deconstructs 5 websites with amazing design:

 

2. Elimination

The user pathway that the customer goes through from social media (or marketing) all the way up to visiting our moile pages and make a sale (by our products/services) should be as easy and as seamless as possible.

The fewer steps, the better.

The development of modern technology and shortened attention spans means that even if we add 1 unnecessary step that the client needs to take, it’s going to negatively affect our bottom line.

We’ve seen examples of websites that have perfected the simplest lead funnel, by getting users to the home page (as the landing page), and then if they click on the CTA (button) it leads them to the lead form.

Imagine a scenario where you are the client on your website and you have to click on 5 different pages to make an inquiry about a product/service. Would you continue if you know that there is a similar website that helps you do everything in 2 clicks?

The moral of the story is, that humans in this modern age find the easiest and most convenient solutions to their problems. That is we need to make sure that we skip unnecessary steps of your user pathway (the funnel) to make the user experience even simpler and more convenient.

Making the funnel as simple as possible naturally helps with “code bloat” and rolling out just the most effective content.

 

3. Minimal use of images

Images are a great way to visually get your point across, and it also has SEO benefits. But just like anything in life, balance is key. Too many photos on the page lead to a slower load time on mobile pages, which is messing up the overall traffic and conversions.

This is supported by the fact that images make up a whopping 63% of the total page weight. The two best tactics for this are to compress images and remove unnecessary ones, or a bit of both.

 

9. Minify Your Code

An exceptionally useful tool that seasoned devs use is minification, which is a technique that they are using to streamline the code and is something that you can implement for your website from today onward. At its core, minifying your code goes a long way as it makes your website super lightweight by deleting code that is redundant and not necessary.

Although it might appear as a daunting task only meant for the “creme de la creme” of the dev world, there are a few free tools you can use to minify your code and get initiate results.

Make sure to spend some time on minification to make sure there’s no unnecessary code. It’s going to save you a lot of time, nerves, and customers in the long run.

 

10. Mobile caching

Websites they a while to load, most commonly because they are often full of data that needs to be loaded with images and videos. That is where caching comes into play.

Caching, especially for mobile pages, helps you save time by not having to wait to view the page again in the future since it will make the page elements automatically available.

The most effective approach would be to install a plugin on your WordPress website to improve your website’s speed, performance, SEO, user experience, and conversions.

The most popular WordPress caching plugins are W3 Total Cache, WP Rocket, and WP Super Cache.

 

11. Minimize use of complex design

Layouts and overly complex designs might look cool but again tend to negatively impact speed on mobile pages, SEO, and conversion rates. Also, Google penalizes websites that have a bad Cumulative Layout Shift (or CLS) score if the website has sudden layout shifts.

Along with your SEO and search rankings, it will also impact your website user experience score, as well as affect your visibility and traffic.

 

12. Creating an overall page load strategy

Search engines have been built to model the behavior of human users, meaning they experience and rank pages and overall websites like a typical user would. To be able to improve the speed and search ranking at the same time is to know what is critical to the user and bot experience in the first seconds that they are on the page.

That is where the page load strategy comes into play. Because the page has a lot of integral elements, we can specify which elements and parts of the website will load first, second, etc.

Because the standard text doesn’t weigh that much, we can focus our load strategy on the most common culprits and slow a page down:

  • JavaScript
  • Videos
  • Images

Firstly, we can take JavaScript on the website as an example: As a standard rule, users engage with interactive elements on the website after a few seconds, so the JavaScript on the website doesn’t have to load first. For example, things like plus boxes and expanders can load as kind of “placeholders” before JavaScript is needed.

Generally, JavaScript is slow to load and weighty if we gave a lot of cool-looking visual elements. That is why it’s ideal for the page load strategy to include something that users can look at that will load first, the JavaScript can load in the background, while users look at the page.

Then, we have videos and images and weigh down the website significantly, even if optimized and compressed. If they are placed low on the page, it will not affect the overall speed (and the bot & user experience) of the website, if set a delay on the load time.

The concept of making a loading page strategy (or delaying the loading) for content that is below the fold is called, “lazy-loading”, which can be accomplished in a variety of ways for example with deferred, async, and Google’s lazy-loading meta tag.

Again, a commonly referred to tool in this blog post is Google PageSpeed Insights which is also applicable for lazy-loading images. You can also use Google’s “lazy-load” image tag to optimize images (if you have not done so already).

 

13. Other reasons why your mobile pages may be slow

JavaScript, bulky code, un-optimized images, websites, etc. All of these are most commonly referred to when talking about what are the main culprits of a page loading slowly.

But there are a few other reasons as well.

For example, a dependency on 3rd party scripts such as trackers, visitor sessions, and external services, for example, Instagram feed, also can decrease page load time, so choose wisely. Also, if you are not able to find a reason for a poor website load time, it could be due to an issue with a user’s Internet Service Provider (ISP), rather than your website.

A final potential reason would be code (that is hidden from the user) but still weighing down the website. If the code is not useful, we would suggest removing it to make the website lightweight and agile.

 

Best tools to improve mobile pages loading time

Although it might not be written in Google’s mobile pages guidelines, page speed on mobile pages arestill important for mobile SEO for several reasons. One of those is that Google spends limited time crawling each site, and making sites load faster encourages Google to crawl more pages.

Improving the website speed, especially on mobile pages promote faster discovery and indexing of new webpages and new content published on the website, as well as a comprehensive crawling of deeper pages on the website. It’s going to impact overall organic traffic in the long term. How fast the page loads also have an impact on the user experience of the website visitors, which is reflected in bounce rates and conversion rates.

The goal is to aim and optimize all of the web pages to load in less than 1 or 2 seconds, as per Google’s recommendations. Anything above that is going to increase the bounce rate and reduce the conversion rate, which is a big no-no.

One thing to keep in mind is that how webpages load is different on desktop, compared to mobile browsers. On mobile pages, loading pages with fewer, more organized requests load faster, even if they are slightly bigger, while on desktop, small requests load faster.

Loading speed also depends on the number of elements that need to be loaded, that get fetched from the server when loading a page, which is called round trip requests, or RTRs. That is why a big part of optimization and improving the loading page on mobile pages is to minimize the RTRs.

For that reason, we have recommended a few tools and plugins that you can try out to help you achieve that goal, and long-term help your SEO, UX, and conversions.

 

NitroPack

NitroPack is an excellent cloud-based tool that is going to help you optimize the speed of your website as well as overall performance. When it comes to speed of implementation, compared to others, no other caching plugin can optimize your website performance as fast and easy as Nitropack does.

It also has an automatic optimization for HTML, CSS, and JavaScript, as well as a comprehensive image optimization toolset.

On the negative side, it has gotten a bad rep for its poor Customer Support, it is pretty expensive compared to other tools on the market, and they have a track record of outages.

 

WP-Rocket

Released in 2013, WP Rocket is an all-in-one caching plugin specifically built for WordPress websites, and solves the problem of both slow loading websites and confusing caching plugins. The advantages are that it has an easy-to-use interface, minimal setup, and great support quickly established its presence as a market leader. It helps over 900,000 websites to continue to evolve as one of the leading caching plugins for WordPress.

On the other hand, many other cache plugins have a standard free version while WP Rocket only has paid versions, and its preload bot can cause CPU overload on some servers, so we would recommend lowering or disabling this setting if it happens to you.

 

Cloudflare

Cloudflare is another great option for businesses that are looking to optimize their website speed and security. Simply put, it’s designed to optimize website loading times by acting as an intermediary between site servers and visitors.

As mentioned above, on top of optimizing website speeds, CloudFlare also offers security features to protect your website from threats. It also notifies you if Google Analytics isn’t working properly, caches all static and dynamic content, as well as the setup process and user interface being really intuitive.

Additionally, it’s worth pointing out that Cloudflare has a free version that lets you test their basic features, so you can get an idea of what kind of value you will be getting for your money.

On the flip side, the security features we mentioned above are only available for paid plans and under the free plan it takes 24-hours to propagate and update analytics data. While we are on the top, both stats and analytics have limited capabilities but are still better than nothing.

 

Pegasaas

One great plugin for optimizing your web performance is Pegasaas. It’s designed to provide small business owners access to automated web optimization service, as Pegasaas comes equipped with an automated WP plugin feature that can be integrated with your website to efficiently run over 30 web performance operations.

A few advantages that Pegasaas offers are your CSS, HTML, and JavaScript code, auto clear-page-cache, as well as the lazy load on the foreground and background Images, YouTube videos, scripts, etc.

Additional useful features that should be of use are reporting of PageSpeed scores, speed, and load metrics, as well as a staging mode.

 

Edgemesh

Next up we have Edgemesh, which is a web acceleration technology that provides a simple and fast way to accelerate your website performance.

What is unique about it is that it works as a client-side platform, compared to CDN which relies solely on an expensive network of data centers. That means that website visitors automatically become part of the Smart Mesh network and can transmit data peer-to-peer.

Particularly useful to point out is that setting up Edgemesh is fairly easy, it’s been documented that there have been major speed increases for some websites and it can automatically scale with demand. Also noteworthy is that they have a free plan.

That is great and all but there are negatives, like for example limited support on the free plan, very basic documentation and it tends to use the bandwidth from your website visitors.

 

Speed Kit

As the name suggests, if you are looking for a way to greatly speed up the responsiveness of your website, Speed Kit is a great choice. In a nutshell, it caches all of the static parts of your website, and dynamically replaces dynamic content.

With this caching, it means it significantly reduces the time from clicking something to something happening, making it near-instant for the client.

On top of that, it also boosts the UX, SEO, time-on-page, and of course the conversions rate on your websites. Speed Kit’s analytics also shows that they have accelerated WP websites by 50-300%, as well as supporting over 80% of browsers.

And, there are always 2 sides to every story, that’s why we recommend looking into the reviews before making the decision.

Quic.cloud

If you are looking for a CDN with excellent performance, that can host static and dynamic parts of your WordPress website, Quic.cloud is another fantastic option. The best part is that it makes your website load faster if the users are further away from the place where your site is hosted.

Additional services under Quic.cloud are available like WP security, image, and other optimizations, and it’s overall pretty easy to set up with LiteSpeed. On top of that, they provide generous and powerful free tiers.

On the other hand, their customer support works based on tickets only and they are usually pretty slow to respond, and they have an overall confusing pricing model.

 

Conclusion

Desktop is an important source of attracting customers, while mobile pages are even more important. If you haven’t paid too much attention to mobile yet, we advise you to start today.

On a scale from highest to low priority, improving the speed on mobile pages should be at the very top, as it affects so many aspects of the business like rankings, traffic, conversions, SEO, etc. It will make you also get an extra edge over your competition.

It might seem like an impossible task, but when deconstructed and atomically ticking off one after the other of the “to-do” list above, it will be the most rewarding. Even if hypothetically you only do the most important few improvements, they would prove to be well worth your time and effort.

Start implementing today, speed up your website, keep old and attract new clients and don’t lose another customer to slow load times.

If you are still unsure about where to start, we at SEO Jokers are happy to have a chat with you on how to optimize your website page speed, which ultimately will produce results.

To learn more, click here.

87 / 100