Website loading speeds have also been extremely important to both search engines and website visitors alike. Studies have shown that bounce rates quadruple if a page takes just 5 seconds to load as compared to the accepted standard of 2 seconds. Of course, the debate rages whether or not bounce rates come into play when Google (or its numerous algorithmic filters) decide how high a site will rank for a particular query.
Page loading speed has clearly become a critical ranking factor as the web becomes more secure and mobile usage (for search, content consumption, and monetary transactions) continues to increase. According to Google’s own research, mobile sites with faster loading speeds have 70% longer visiting sessions and 25% more ad viewability and two times more ad revenue. Add to that Google’s preference to crawl and index mobile sites over their desktop counterparts!
So what options do you have to speed up page loading? Nearly all marketers know that browser caching, reducing plugins, or using CDNs are common tricks to improve loading speeds – but these systems are simply not enough to improve ranking these days, considering that 80% of the results on the first two pages load in less than two seconds. Here are some “next steps” past the basics for page loading optimization in 2020.
1. Utilize Lazy Loading to Speed Up Rendering
While high-resolution images can certainly make your website look more appealing, they can really slow things down. These images take a long time to download and they can also increase your website’s overall size dramatically.
Google’s research shows that the majority of web pages are over 1MB in size, but can be brought down by up to 250 kb simply by compressing or optimizing these images. However, this can compromise the quality of the image which impacts the overall look of your site.
The smart solution is to use “lazy loading,” which involves progressively optimizing the portions of a webpage that are loaded as the user scrolls down. So, a high-resolution image that is lower down on the page will not be fully loaded until the user has reached that point.
Web builder platform Duda conducted research on how websites can conform to Google’s latest Lighthouse 3.0 page loading standards, and integrated lazy loading into their platform, resulting in sites scoring over 90 in the Google PageSpeed test, with a ten-point lift in Lighthouse scores. Needless to say, these scores could have a significant impact on a site’s ranking.
2. Combine Files to Reduce HTTP Requests
HTTP (hypertext transfer protocol) requests are essentially information sharing invitations from one computer or host to another. When a visitor arrives to your site, their computer sends out an HTTP request for binary data to the server so they are able to download the content. About 80% of a webpage’s loading time is spent fulfilling HTTP requests – but browsers limit requests to four to eight simultaneous connections per domain in order to work around this liability.
3. Integrate CSS Sprites for Faster Image Loading
If there are numerous repeated images throughout your site, you can reduce HTTP requests and speed up the loading process by using CSS sprites. You need to combine images into a Sprite Sheet so that the browser only retrieves the images one time and reuses them on multiple pages by positioning the correct image into view.
This works best for symbols, such as your company’s logo or image icons, that are used on multiple pages in various sizes.
This doesn’t take much design wizardry – a simple CSS Sprites Generator tool found online can do most of the work; you only need to drag and drop the images you want to combine.
4. Eliminate Tracking Codes for Rapid Parsing
Another additional function that you should consider eliminating or reducing is the number of tracking codes throughout your site. While every other plugin or martech tool wants you to add their code to the page, purportedly in order to track and analyze key data, they can really slow down loading speeds to a crawl.
It is best to eliminate tracking codes on pages that are less important or drive in the lowest traffic and only use it on important pages. Also, whenever possible, paste the tracking code at the bottom – just before you close the tag – so that the content of the page is loaded and displayed to the user even while the code is still loading.
Some apps like Google Analytics specifically instruct you to place the tracking code in the header of the page, so that they can start tracking what happens as soon as the page starts loading.
As a marketer, you need to make an informed decision on the tradeoff between data collection and user experience.
5. Optimize On-Page Elements for Quick Functionality
There are a lot of little tweaks you can make to random on-page elements of your website other than images and videos. The little fancy bells and whistles are often the ones that place extra load on the server and prevent the page from loading quickly.
One is sliders and image carousels, especially in banners. Your customers are likely to see only the first or most attractive image in a slider before they lose interest (or get confused) and start to scroll down. In addition to being detrimental to conversions (by diluting attention), multiple images add to the size of the page.
Another is on-site search. Your site search should be quick and effective, especially on mobile. Users expect to find features like autosuggest and autocorrect with every search box; so, you need to make sure your code for returning results works like a charm every time.
Also focus on your checkout process if you have an ecommerce site. Many sites make shoppers suffer slow transition times from one stage of the checkout to next, and make them wait forever in suspense while their transactions are being processed. Speed up your payment processing by working only with tried and tested shopping carts and payment gateways.
Collectively, these small tweaks will make sure your interactions with customers remain simple and intuitive every time.
Loading speed has always been an important aspect for creating a user friendly and search optimized website, but I’m betting that in 2020, it is going to become even more imperative for businesses to pick up the pace. Google wants to provide its users with results from quality websites that offer a great UX – so a slow loading site just isn’t going to cut it.
By trimming the fat (reducing the size) of your content, optimizing images and scripts, reducing HTTP requests, and using tests like Google’s Lighthouse, you can expect to see significant and lasting improvements to your site’s loading speeds.