The Impact of Page Speed on Mobile SEO

There are several ways people measure page speed. Depending on who we’re talking to, people could be referring to the load time of a page, or they could be referring to the page’s render time. Load time can be measured in a few different ways, but for the purposes of this post, we’re referring to the point in which a visitor requests a new page and the page is fully loaded in their browser. On the other hand, render time could refer to the time it takes for the first bit of content to display on the page (or above-the-fold), or it could be referring to the time it takes for the whole page to display. Because load time is the most easily understood and the most accurate in terms of what it’s measuring, it’s what we recommend using to gauge page speed. Often, taking action to improve page speed is recommended without defining what a “good” page speed is. While that is for good reason (the faster the better), it’s important to set a target to measure incremental improvements. Load times under 2 seconds generally are the result of pages with minimal design elements and a fast server. When you start adding in extra design elements as well as 3rd party content, load times can double or more. This isn’t collectively a terrible thing, but under most circumstances, load times exceeding 4 seconds are going to start frustrating visitors. At this point, on-site page speed optimizations can easily result in decreases in 1-2 seconds. On the other hand, if a page is taking greater than 7-8 seconds to load, it’s very likely that there is an issue and it needs to be seriously addressed. This is a generalized statement and many will still benefit with slower load times, but are looking to improve page speed for the future.

Importance of Page Speed in Mobile SEO

From here, we know that the impact of slow-loading mobile web pages can affect the user experience and the mobile ranking results.

Next is the mobile ranking factor. There are a few things we need to take note of here. First, Google has changed its indexing in search from desktop to mobile-first. This means that the main search results will be retrieved from the mobile web page compared to desktop. Failure to optimize the mobile web page can affect the search results. Second is mobile friendliness. Using Google Webmaster Tools, we can check whether our web page is mobile-friendly or not. One of the factors is page speed. Fast-loading web pages can help in achieving high mobile friendliness results. Third is page speed itself. Fast-loading web pages will get a high crawl rate and will also index the page in a short time.

They lecture on the user experience using the ratio of people who feel frustrated with slow-loading web pages. On average, 71% of users will feel frustrated when a web page loads slower on mobile compared to desktop. This is caused by slow internet speed and the web page itself. The loading of high-resolution images and the display of web pages that are not mobile-friendly also contribute to slow-loading web pages. It is also said that if a user comes across a slow web page, they are unlikely to return to the same web page in the future.

User Experience

Consider the last time you accessed a website on your mobile. Were you satisfied with the load time, or did you find it absolutely frustrating, to the point where it was difficult to find what you were looking for? If it was the latter, you won’t be surprised to know that you’re not the only one – in a recent web performance study, 71% of mobile internet users stated that they expect a website to load as quickly, if not faster, on their mobile phone as it does on the computer they use at home. Furthermore, 74% said they would only wait 5 seconds for a web page to load on their mobile before up to 50% would leave and abandon the page. With this in mind, one can safely conclude that poor page load times directly affect a user’s perception of your site. It’s safe to say that if they don’t like what they see in the first few seconds, they’re likely not going to stick around. This theory is backed up by a Google-conducted study on mobile user experience, where they stated that “users often abandon sites that do not load within 3 seconds”. This shows that there is a strong correlation between page speed and bounce rate – if you can capture the user’s attention right from the outset, they are more likely to explore your site and even engage in some of the conversions that have been mentioned. On the other hand, if load times are slow and the users feel like they’re not getting what they want out of it, it’s likely they’re going to exit out and look for an alternative-different site to better meet their needs.

Mobile Ranking Factors

Another important factor to consider is the crawler activity for mobile sites. Unlike static web pages, the user’s interaction on mobile sites frequently triggers crawlers to access and retrieve the modified content, which is then used to update Google’s index. Given that crawlers will only spend a finite amount of time retrieving content for a site, a quicker page load time effectively increases the total number of pages that a crawler can access and retrieve within a given time frame. This in turn increases the chances of a page’s modifications being processed in a timely manner, which can greatly affect the site’s search engine rankings.

The overall results from these studies effectively and repeatedly prove the common intuitions of SEOs and developers, that faster load times yield better results. This is partially due to the recent announcement from Google of incorporating site speed as one of the signals used in their ad and search engine rankings. This is a clear indicator that page speed will hold an enormous importance in mobile rankings, as the loading speed of a mobile site is largely dependent on the speed of the users’ individual mobile devices; making optimization an increasingly necessary task.

Mobile websites that load quickly are significantly more likely to satisfy visitors and get them to come back for more. For instance, if visitors encounter a mobile site that is difficult to navigate or slows them down, they would likely click away to a different site or app, and this would negatively impact mobile rankings for that site. This behavior often stems from a frustrated user, and frustrated users on mobile devices represents an all too common scenario, with approximately 2/3 of mobile device users saying they’ve experienced problems when accessing websites (KISSmetrics). A similar study by Compuware reveals that a 2/3 second improvement in page load time yielded an approximated 27% increase in engagement—evidencing the strong connection between page load times and increased mobile rankings.

Factors Affecting Page Speed in Mobile SEO

CSS and JavaScript files are often the roadblocks that prevent a page from loading as quickly as possible. As a rule of thumb, the bigger the CSS or JS file, the longer it takes to load. By minifying and combining files to remove whitespace and comments, you can make files smaller and more compact, which means the browser has less to download. Using CSS image sprites in place of multiple image elements also reduces the number of requests. Although Google’s Page Speed tool often includes combine JS and combine CSS as high priority rules, consideration should be made for the use of server or client-side caching when combining files. This is because if the URL of a complex page’s JS or CSS file only changes slightly, the user may not have to download the file again after it is stored in the local cache. Finally, loading CSS files in the head of a document and JS files at the end of a document prevents progressive rendering in browsers with the exception of Internet Explorer. In the context of Mobile SEO, awareness of this type of browser behavior is essential for mobile web developers.

To ensure that a webpage loads fast, all the images should be optimized and compressed. According to Akamai and Gomez.com, in a survey of nearly 1400 consumers, nearly half of web users expect a site to load in 2 seconds or less. A site that loads in 4 seconds gets half as many visitors as one that loads in 2 seconds, while a site taking 8 seconds to load gets a quarter of the visitors. From this, we can conclude that speeding up your page has a direct impact on the number of visitors to your site. Images often consume most of the downloaded bytes on a page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the greatest byte savings and performance improvements for a webpage. On the side of CSS sprites and data URIs are a few cutting-edge techniques for reducing the number of image requests, but this is beyond the scope of image optimization. This article can be found out here. On the plugins page, there are also a list of several PNG optimization tools. A fantastic accompaniment to using these tools are the YUI Image Optimization rules. Although written for the Yahoo! User Interface, the general principles outlined in this article are applicable to any content site.

Image Optimization

Considering that images account for about 68% of a site’s total weight, optimizing images can have a big impact on a web page’s load time. Optimizing an image involves reducing the size of the image file without impeding the quality of the image. One form of image optimization is image compression. There are two types of image compression: lossy and lossless. Lossy compression will reduce the quality of the image, but it will create a much smaller file. Lossless compression will reduce the size of the image file with no harm done to the image’s quality. Using the correct form of image compression can reduce the size of an image by up to 5 times. The most common cause of slow loading images is that the image is bigger than it needs to be. Making an image smaller than its actual dimensions, as well as reducing the file size of the image, will decrease the load time of the page the image is on. It is important to note that even though the image will be smaller, the quality of the image still needs to remain high. Google PageSpeed also suggests avoiding using images to display important text content, as this will probably result in using images that are too big because the image needs to be high enough quality to read the text. An alternative to using an image would be to use styled text with CSS. This will drastically reduce the size of the element in comparison to an image and would also save HTTP requests. Lastly, it is useful to make use of srcset so that it can serve different images to different screen resolutions, as well as loading the correct-sized image according to the device being used.

Minification of CSS and JavaScript

Now, since CSS doesn’t actually alter any file or data referenced in the HTML document, the best course of action would be to maximize efficiency in the creation of the straight CSS file. Usually, the size of a CSS file does not matter, as it’s being copied straight from the web and pasted into an external style sheet. However, if the CSS file is very lengthy and another developer needs to understand what’s going on, it becomes impractical. So, for efficient CSS, the best route is to create a file with a basic structure and organized format to easily locate and alter any attributes presented. This way, you have clear, concise data in the CSS file that results in the same clean presentation in the HTML document.

The way JavaScript works, as a language, it obeys the syntax structure of “{ }”. So, a good way to visualize what the script is doing is picturing a snow cone. The snow cone represents the construction of an object and the syrup represents the data that the object encapsulates. Now, what you’re getting with the object of the snow cone is customizable attributes and behaviors. If I were to write a script plain and simple, the attributes and behaviors would peak out and, at times, cross over with other data that I didn’t wish for the script to alter. This is actually how JavaScript affects HTML, resulting in an unorganized and hard-to-follow pattern of data. The best way to remedy this is by the application of what is called Object-Oriented Programming (OOP). With the creation of JavaScript 2.0, more and more developers are switching over to OOP because it’s more efficient and saves time, thus producing a cleaner and more organized script.

Both CSS and JavaScript are extremely useful to web developers. They provide more efficiency and add to the overall aesthetically pleasing and interactive user experience that we have come to enjoy on the web. However, every little bit of effort comes at a cost. If you took a really large JavaScript file and tried to shove it into a plain HTML document, it would most likely be in a disorganized state and be really hard to follow.

Server Response Time

Server response time is the time taken by the server to respond to a browser request. This directly affects page speed. Common issues that affect server response time include slow database queries, slow routing, or a lack of adequate memory and a very large amount of traffic. The result is always the same: the server takes longer to respond to the request and the page can take a long time to load. Google recommends using a response time of under 200ms. Server response time can be measured using the time to first byte, which can be improved by using a fast DNS provider, running a CDN, or using a faster web server. This is key for mobile SEO, as server response times can often be slower and more inconsistent than their desktop equivalents due to less powerful processors and less RAM. Servers often respond differently under load compared to non-peak times, meaning server response time can also vary a lot. It is recommended that a mobile user agent is set up on the server to test server response time and page speed. This can be done because as of March 2018 Google will be switching to mobile-first indexing, which means that the mobile version of a website will be used for indexing and the mobile page speed will be the primary factor. This is due to the fact that over half of page loads are abandoned if a mobile site takes over 3 seconds to load. This is very important as slower response times on mobiles compared to desktops could mean that a website sees a decrease in search engine ranking due to the new mobile-first indexing and page speed becoming a more influential factor.

Strategies for Improving Page Speed in Mobile SEO

All information stored in the cache can be retrieved faster, and when it concerns a site, users can normally notice the difference in speed. Before a site is built, the web developer will determine elements on the page that will not change and store them in the cache. Then, when a user goes to the site, elements will change, leaving the cached elements to load faster. There are different types of caching for a website, including future or active caching. Active caching occurs when dimension attributes of a page do not change; an expiration date is set for when the page is no longer considered active. The page will then be cached again after the set date. Future caching occurs when a page has an expiration date that is designated by an administrator. Usually, future caching is ideal for changes that happen to a page but do not need to be reflected immediately. Other forms of caching include internal and external caching. Internal caching is often seen more as search engine caching, in which results are cached as long as the engine sees that they are valuable. The results are then finally uncached when they are no longer considered valuable. External caching refers to methods of offloading some web application processes in a cache shared by more than one server. A large scalability and phased-in approach are methods often associated with external caching. This is often ideal for larger companies that have experienced rapid growth and must separate data among multiple servers.

Caching

There are several ways to implement caching to speed up mobile site rendering. One commonly used method is to assign an expiry date for static resources; this way they won’t have to be re-fetched the next time the user visits the site. Another way is to configure the server to return a status of 304 (Not Modified) if the user agent’s cached version of the document is still valid. This process reduces the amount of data transferred and also reduces the amount of time required to render a mobile page. Using this technique it is also possible to instruct the browser to look for updates to the cached resource, while still serving the cached version in the meantime. One example would be to use the “max-age” Cache-Control directive with a value of ‘86400’ which would cache the resource content for 24 hours. After this time had passed, when the user agent attempted to retrieve the resource it would first uncover whether or not the resource had been modified using an HTTP GET request with an If-Modified-Since or If-None-Match header. If the server detects that the resource has not been modified, a status of 304 is returned and the resource is again loaded from cache. Implementing any form of validation reduces the amount of data transferred and should only fetch a new version of the resource if it is required.

Content Delivery Network (CDN)

Basically, what happens with a CDN is that your webpage is optimized for cache, which strengthens the delivery of your data. It is important to choose which content you require to be cached and which content is best to be updated dynamically. By doing so, you can provide users with very fast loading times on your mobile webpages, which has many positive effects.

A content delivery network (CDN) is a system of distributed servers that deliver webpages and other web content based on the geographic locations of the user. Implementing a CDN for your mobile webpage can significantly speed up load times. By caching your content on proxy servers located around the world, when a user clicks onto your webpage they are connected to the nearest server location geographically. So, for example, if your web server is located in America but a user is accessing your page from Spain, the CDN will deliver cached static content from a server in Spain. This is extremely beneficial as limited HTTP requests can be made, resulting in faster load times.

Mobile-First Design Principles

Mobile-first design is a term which was coined and popularized by Luke Wroblewski. The basic idea of mobile first design is that a website or application is first designed and developed for a mobile device, and then scaled up to a desktop computer. With the rise of mobile web usage, it is now considered best practice for new web projects to be designed for mobile, tablet, and desktop, and in that order. This is a complete reversal of the traditional strategy of creating a desktop site and then adapting a version for mobile. This change is largely due to the economics of web development. With two different versions of a website, you have two different designs, two different code bases to maintain, and twice the work when it comes to search engine optimization (more on that later). By designing for mobile first, even a large project can be boiled down to its core features and content. From a business perspective, it is a leaner and meaner strategy all round.