Slow Page Speed Hurts User Experience — And Affects Search Rankings [Interview]

Even in the era of blazing fast internet speeds and soon-to-arrive 5G for mobile, page speed — that is, how quickly a webpage loads — is still a major factor to consider when building or redesigning a site. 

Having a page load slowly will not only cause impatience and frustration among users, it can also negatively affect your search results in Google. I sat down with developer Tim Ostheimer to hear about why page speed needs to be on your mind when you’re working with a developer to update your site.

John Becker: What is page speed and why is it important?

Tim Ostheimer: The phrase ‘content is king’ is still true today. Content is the most important factor that determines page ranking. However, the algorithms used for page ranking look at many different aspects of your website to determine whether your page is worthy of being in the top results.

The best way to think about this is to look at the overall experience your webpage provides to users. Search engines will typically favor pages with content that is the most helpful and relative to the search query on websites that are optimized for all devices. This is because these are the pages where users find the answer to their question and spend more time on. If your website does not display well on mobile or takes a long time to load, the majority of users will have left before it even finishes loading all of your images. This shows search engines that your website isn’t a good result for their search.

JB: What is the biggest on-page factor that influences page speed

TO: Most commonly it is the size of assets being loaded, typically imagery and other media, that has the biggest effect on load time. A site with one or two large images could easily add a few seconds to your load time. Be conscious of the size of all media you're embedding on your webpage and look for any opportunities to optimize them by reducing their file size.

There is no specific file size that's appropriate for all images. You should simply try to use images that are rendered at an appropriate pixel size (height and width dimensions) for its usage and at a quality setting that does not result in noticeable blurriness or pixelation. 

Generally, no image for a website should ever need to be more than about 350KB, but most will even look fine at under 100KB. Ideally, you want your total webpage file size, including all assets, to be under 2 or 3MB. The lower the better.

JB: ​Is page speed still relevant in 2019? Is it something that's diminishing in importance as internet connectivity rates improve?

TO: ​Page speed is always going to be important, and even though the average internet speed increases over time, there will always be users who don’t have access to that speed or ones who are accessing websites from a mobile device and paying for each megabyte downloaded. If you have a large webpage that loads slowly, or one that doesn't display well on a mobile device, Google and other search engines are going to notice that.

JB:​ What about embedded videos or GIFs?

TO: ​Animated GIFs are often extremely large in file size since each frame of the GIF has image data which must be loaded. It is very difficult to optimize a GIF without horrendous quality loss, so I generally avoid using them except in certain situations, such as email, where there aren’t other options for animated visuals.

Video is a great way to add personality to your website and deliver valuable content, but you have to be careful about how many videos you use on a single page. Videos are large in total file size, but many of the hosting services do a very good job at something called asynchronous loading, which essentially means loading the video asset separately from the rest of the webpage. This ensures that the rest of the page loads normally while the browser downloads the video on the side instead of waiting for all assets to be loaded before the webpage becomes functional.

Unlike static imagery, video files are also streamed, which means each frame of the video is downloaded over time instead of all at once, and this helps ensure your website is usable and your video is watchable even if it hasn’t completely finished loading.

JB: Is page speed equally important on desktop and mobile? 

TO: ​Page speed is typically more important for mobile users. Search engines understand that users on mobile devices are usually going to be on a slower internet connection, their devices are slightly less powerful, and they're often using their own data that they're paying for.

Browsers on mobile even have built-in behavior, such as video files not being allowed to automatically play, to help ensure the webpage is not excessively large. Otherwise a single video could use up a large percentage of a user’s cellphone data plan.

Whenever you're optimizing a website you want to pay attention to assets that don't need to be loaded for all users. Ensure assets like these are loaded asynchronously so the file is only downloaded when necessary.

JB:​ Does asynchronous loading affect formatting? 

TO: ​That could depend on how the webpage is built, but most likely no. Asynchronous loading should only be used for assets which aren’t essential to the overall structure of the page. For something like a video, the embed method provided by the hosting service may determine exactly how the asset is loaded, but they will usually have a placeholder object which displays until then to keep spacing consistent. Usually this concern over formatting would only apply to media, but depending on any custom fonts or scripts you have on the site there may be other things to consider when asynchronously loading assets.

JB: ​Are there things that are less obvious that might affect page speed? 

TO: ​Yes, one example would be a slider — such as an image slider.

The reason why these are bad is because you are loading assets that aren't actually visible to the user until they click to see them. Additionally, sliders are a poor way of displaying content since most users will only see the first slide. Asynchronous loading can be used to delay the download of any media assets until they are needed, but there may be better options than using a slider anyway.

Another thing to be careful of is having too many embedded fonts on the site. There are many services like Google Fonts and Adobe Typekit which can allow you to load fonts asynchronously when needed, but you still want to be careful about how many you're adding. We suggest using just one or two and embedding only the necessary font weights and styles from those font families.

JB: ​Do you have any final tips on how someone may go about improving their page speed?

TO: ​Try to keep the number of HTTP requests as low as possible. These are the files and media assets that must be loaded, such as images and scripts, in addition to the webpage itself. Even if all of your assets are optimized well, a large number of unique HTTP requests can easily contribute towards a slower page, especially if they are coming from different servers. If not loaded asynchronously, even just one slow-loading asset can have a huge effect on page speed.

For some additional information on the technical side of this, I suggest reading Daniel Escardo's article, Time to First Byte.