5 common mistakes that affect page load times

If your website takes a long time to load when users visit it, this article may bring some inspiration to your optimization work. But even if it doesn't help you solve your problem, you can learn what are some common errors that affect website loading time.

Why is the page load time important?

The loading time of the page directly affects the user's intuitive experience of the website performance. Some research data shows that once the page loading time exceeds 3 seconds, half of the visiting users will be lost while waiting.

Search Engine Ranking
• — Page load time is one of the important basis for search engines to rank your website in search results. Therefore, the load time of a web page affects how easy it is for users to find it on the web.
Conversion Rate
• — The faster the page loads, the more engaged the user will be. A slow website will obviously lead to lower conversion rates. If your webpage takes too long to load, executing the Call-To-Action (CTA) will consume a lot of time. During this period, the user's patience and enthusiasm will be worn away, and they will eventually close your website without purchasing your product or Use the services you provide. User Experience — The longer your website takes to load, the more satisfied your users will be. As a result, customer retention and repeat visit rates will be higher.
• Let’s look at a few examples based on research done by HubSpot:

• A page that is 1 second slower could cost Amazon $1.6 billion in lost sales each year.
• A 2-second delay in Bing searches will result in a 4.3% revenue loss per visitor, a 3.75% decrease in clicks, and a 1.8% decrease in query volume.
• Based on the data above, you can see how important page load time is to your website.

There are many factors that affect page loading time. Among these errors, I have listed the errors I encountered when building a website. Here are five representative mistakes.

Every time the browser needs to get a file, page or image from the web server, it will make an HTTP request, after which you can Use the "Network" tab in Chrome's "Developer Tools" to monitor which network requests the application makes, which requests are time-consuming, and other information.

General browsers usually limit the number of HTTP requests issued at the same time to between 4-8. Therefore, when the number of concurrent requests is large, long waiting delays will occur. Research done by Yahoo shows that 80% of your application load time relies on HTTP requests, and reducing the total number of HTTP requests is helpful to speed up page load times.

You can reduce the total number of HTTP requests of the web application in the following ways:

Merging CSS/JS files
• — You can try to merge the CSS files with JS files are merged into the same file, which reduces requests and eliminates the need to retrieve multiple files from the server. Since all CSS files are rendered in chunks, reducing CSS files will greatly improve page load times.
Content loading on demand
• — Instead of loading all of your application’s images at once, load them only when needed. This approach is called lazy loading or on-demand loading. When a user arrives on your site, you can load images only when the user scrolls to that specific location, rather than loading them all on click.
Enable Browser Cache
• — Allows caching of static images or website content that does not change frequently. When the user visits the website for the second time, the cache can load this content without sending a new HTTP request to the server. This makes content load faster.
The server supports HTTP/2
• - Using HTTP/2, only one connection needs to be established from the browser to the server to load a website, and multiple requests are allowed at the same time. This is much more efficient than creating a new connection for each resource.

If your website does not have a CDN enabled, load times will increase when users are physically located far away from the server. These delays become more noticeable with distance and affect all HTTP requests to the server. Using a CDN can improve page load times.

What is it? The full name of CDN is Content Delivery Network, which is content distribution network. CDN is a content distribution network built on the Internet. It relies on edge servers deployed in various places and uses the load balancing, content distribution, scheduling and other functional modules of the central platform to enable users to obtain the content they need nearby.

Using a CDN will enable users to obtain the resources required for a web page from the server closest to their location. Servers in a CDN are distributed in different geographical locations. So using this kind of CDN is one of the effective ways to improve application loading time.

For example, if your web server is located in California, your guest access network topology diagram might look like the following if you deploy a CDN.

Most CDN services have their own network backbone, which allows them to provide higher service quality, lower packet rates and faster traffic than the Internet. Loading speed etc. a bit. The disadvantage is that it is expensive.

3. File size and page size

Loading large size files from the web server or loading large page sizes will take a lot of time, so it may be in order Fetching several such large files makes page load times longer.

#Enabling compression is a common way to reduce the file size of HTTP requests and improve page load times.

There are two common compression methods:

The first method is Gzip. Gzip can locate similar codes in the file and temporarily replace them to make the file smaller. Currently, most web servers support Gzip compression. Enabling compression on HTML or CSS files can typically save about 50% or 70% on file size, thereby reducing page load times and bandwidth used. You can further reduce page load times by reducing the size of images used in your application.

Another compression solution is called Brotli. According to the official introduction, the compression is 20%~30% higher than gzip, and the execution efficiency is more efficient. I haven’t tested it specifically, so I can’t prove it. You can follow Consider your actual situation.

4. Load all resources at the same time

Loading all HTML, CSS and JS files at the same time will increase the page load time because the page is rendered before all these resources are loaded. The process will be blocked.

Delayed JavaScript loading is a mechanism for loading large JS files after other elements have been loaded. This method ensures that loading of page content is not affected by loading large JS files.

If you have an HTML site, you need to call the external JS file (defer.js) before the tag.

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

The above code says, "Wait for the entire document to load before loading the external defer.js file."

5. A large number of redirections

Generally, we use redirection to handle moved or deleted pages to avoid errors when users access them. However, more redirects means more HTTP requests. This can significantly increase page load times. Google recommends that website owners remove redirects to improve load times, especially on mobile-first sites.

You can use a similar website scraping tool to get all the redirect requests in your website. By analyzing this, you can stay on top of and clear out unnecessary redirects.

Generally, redirects are divided into two types:

• Server-side redirection — Fast and cacheable.
• Client Redirect — Slow and uncacheable.

Optimize web page load times by avoiding using client-side redirects for your pages while keeping server-side redirects to a minimum.

Conclusion

A site with fast execution and loading speed is believed to be beneficial to both webmasters and users. I hope this article can make you think about the page. Be confident enough about the importance of loading times.

If you are thinking about improving your website performance, I have some tools to share with you, such as Google Pagespeed Insights, Pingdom, YSlow, etc. These tools can provide complete reports that give you insight into your website’s shortcomings. Hopefully your website will have a better user experience as well.

Original source: https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 5 common mistakes that affect page load times. For more information, please follow other related articles on the PHP Chinese website!