Speed Up Your Mobile Site Or Lose Search Ranking
It's no secret that smartphones have changed the way we consume the internet, so much so that mobile and tablet have accounted for a higher percentage of web traffic than desktop since 2016.
Accordingly, Google has been rolling out a mobile-first index over the past several months which may have a drastic effect on the SEO performance of websites that aren't prepared when it goes into full force this summer.
Along with this significant change will come Google’s "speed update," which will take into account mobile page load time when determining your search ranking.
Speed isn't only important for search engines. It also has a significant impact on user experience. Google measures page speed as the time between when a page is called and when it initially loaded. As load time increases from one second to three, the probability of a visitor bouncing rises 32%.
That number can go as high as 106% for six-second load time, and even a whopping 132% for 10 seconds. Now, considering the average time it takes for a mobile landing page to load is 22 seconds, there is room for improvement all around.
Here are a few things you can do to speed up your mobile site and miss fewer opportunities to meet your audience’s needs:
Use Fewer Redirects
Redirects have become an easy way to improve SEO and drive more site traffic, but the "speed update" poses a challenge. Put simply, redirects are a way of forwarding visitors from one web address to another. When a visitor clicks on a regular mobile link, the device requests a specific document at the referenced address and the server provides it.
With a redirect, the server returns a new web address instead which the device must visit to submit a new request for the document. Depending on how many redirects are involved, this process adds several seconds to page load time, so it is best to use them sparingly.
Redirects are exceptionally slow on mobile due to the many steps involved each time a device needs to communicate with a server. Mobile users are also typically on less reliable networks than desktop users.
When tackling your mobile site redirects, consider a tool like Varvy’sRedirect Mapper tool. It will show you how many redirects you have on at a given URL so you can trace their roots and remove any that aren't necessary.
Use Smaller Or Fewer Images
This is typically the first-place designers, developers and marketers begin when optimizing their site for mobile. Yet as mobile devices have advanced so have mobile sites. The average size of a mobile page tripled between 2011 and 2015 from 390 kilobytes to 1180 kilobytes with poorly optimized images mostly to blame as they make 63% of page "weight."
The simplest way to compress and scale your images for mobile without sacrificing quality is to use a tool like Compressor.io. As for your code, you can use responsive cascading style sheets (CSS) media queries to specify which version of an image to load on specific screen dimensions to avoid loading unnecessarily large files.
Minify Your Code
Minification is the programming process of reducing the amount of code on your web page. That doesn't necessarily mean sacrificing features. Annotations, white space characters, newline characters and block delimiters are some of the most common culprits of wasted code space. Check for unused CSS styling as well, especially in websites that have been redesigned or offer multiple viewing options.
All this can be done manually, but there are online tools to help you automate the minification process including CleanCSS, UglifyJS, Minify Code and Better WordPress Minify. You can also use the PageSpeed Insight Chrome Extension to generate an optimized version of your webpage’s HTML code.
Switch To Lazy Loading
Out of sight, out of mind. That's the premise behind the "lazy loading" web development technique. Since above-the-fold content is all a visitor sees when they land on your page, it doesn't matter much if the hidden content further down is ready, at least until the visitor scrolls. There are several ways to achieve this:
• Install the Lazy Load jQuery plugin
• Restructure your code into above-the-fold and below-the-fold sections in order of visibility
• Use only one external CSS file or a single, page-specific inline CSS block that allows above- the-fold content to load immediately
In the few seconds it takes to load, you can show a loading spinner or other message instead of withholding visitors from the valuable content they seek.
With the ever-growing importance of the mobile web, it's vital that brands make site speed a priority. Don't give mobile visitors a reason to go elsewhere for content you already provide. Just a few modifications to your site code can make all the difference between boosting your web traffic or losing it.