How page speed affects Web User Experience
Imagine you’re searching for particular information online and type a search query. You see a list of results and want to explore the first option that seems relevant. But as soon as you click/tap the link, you see an empty screen, and you understand the the the page is loading. You wait for a few seconds, but nothing happens; you click the “Back” button and select the next option in the list.
Page speed, a measurement of how fast the content on your page loads, has a tremendous impact on visitor’s satisfaction and your conversion. Google has indicated site speed (and as a result, page speed) as a ranking factor. When it comes to user experience, pages with a longer load time tend to have higher bounce rates and lower average time on page.
Page loading speed and user frustration
Jakob Nielsen defined the 3 response-time limits which are determined by human perceptual abilities:
- 0.1 seconds. This limit gives users the feeling of instantaneous response. This level of responsiveness is essential to support the feeling of direct manipulation. It’s also an ideal response time for the website.
- 1 second. One second keeps the user’s flow almost seamless. While users notice a slight delay, they still feel in control of the experience.
- 10 seconds is the limit for the user’s attention. For delays of more than 10 seconds, users will want to perform other tasks while waiting for the computer to finish. A 10-second delay in the web without any feedback will often make visitors leave a site immediately.
The response-time limit has continued to fall in recent years. Even though the 10 seconds is the limit for the user’s attention, in many cases, visitors will leave your website if it won’t load in a few seconds.
But even if they stay, they won’t have a pleasant experience. First, when people have to wait for content, they switch attention to the fact of waiting, not the task they want to complete. As a result, they are less likely to succeed in any difficult task. Second, the unexpected waiting will make users feel that they don’t have system control.
People engage more with a site when they can move freely and focus on the content instead of on their wait time.
Common reasons for slow page loading
Here are a few common reasons that cause slow page rendering today:
Server delays
Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server. Generally, the server response time should be under 200 ms. There are dozens of potential factors which may slow down the response of your server, but it’s possible to group them into three categories:
- Slow application logic (not optimized database queries, code, etc.)
- Insufficient hardware resources (not enough CPU, RAM, etc.)
- Slow network connection
The 2nd and 3rd groups of factors are directly relevant to the hosting. That’s why hosting selection, as well as its physical location, has a tremendous impact on the loading time.
Unnecessary redirects
Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. It’s essential to identify and reduce redirects. Yslow will show you how well your site is performing.
Heavy CSS, HTML, and JavaScript files
It’s crucial to reduce the size of any CSS, HTML, or JavaScript files that are larger than 150 bytes. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource. But do not use gzip on image files!
Heavy images
GIF, PNG, and JPEG formats make more than 90% of the entire Internet’s image traffic. It’s vital to optimize images for web experience — reduce their file size without significantly impacting their visual quality. The fewer bytes the browser has to download, the faster the browser can download and render content on the screen. It’s especially important to do it on mobile users because images can still cause delays on mobile devices.
- Use proper file formats. Some image formats are heavier than others. PNGs are generally better for graphics with fewer than 16 colors, while JPEGs are generally better for photographs. GIF and PNG are lossless formats, and they are heavier than JPG.
- Use tools like TinyPNG to compress images without much impact on visual quality.
- Use Content distribution networks (CDNs). CDNs are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your content (usually, images) are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.
Fancy animated effects or page widgets
Fancy animation and complex widgets require complex data processing both on the server and client-side. Some web designers think that a dynamic loading (a procedure when the animation or widget data is rendered after the page appears on the user screen) can save the day. In reality, the visitors can easily overlook the widget with dynamic content because they assume that the container with the widget is empty.
Subtle animated effects are not only good in terms of usability but they are also good in terms of page loading time. For example, if you want to give users the information that the content is loading, it’s better to use a skeleton screen for that.
Measure your loading time
The procedure of speed optimization starts with research & analysis of the current loading behavior. First things first, you need to get a high-level report on how well your page performs in terms of the loading time. It’s recommended to use PageSpeed Insights or GTmetrix for that. Both tools analyze the content of a web page and generate suggestions on how to make that page faster.
Second, you need to do in-depth research about the loading and see each thing loaded by your page. When you see how much each thing takes to load, it easy to decide what content you want to remove or optimize to increase loading time. Both Google Chrome and Mozilla Firefox have a web developer console with a section Network. In this section, you can see a waterfall with all objects loading on your page. It will help you identify unnecessary bloat and remove it.
Conclusion
When it comes to web development, your goal is to keep the visitor engaged with the page and deliver the optimal experience, regardless of device or type of network. The faster the user will access your website, the better chances you will have for the conversion.
