Page loading time standard

The standard page load time for web and app can vary depending on several factors, including the type of content, user expectations, and the specific context of the application. However, in general, faster load times are considered more desirable for a positive user experience.

Research suggests that a significant portion of users tend to abandon a webpage if it takes longer than 3 seconds to load. On mobile devices, app load times of 2 seconds or less are generally recommended for providing a smooth and responsive experience.

Techniques to improve page loading time

Minify and compress CSS, JavaScript, and HTML files.

• Use nodejs and sass to build compressed css and javascript.
• Use cloudfront

Optimize and compress images.

• Compress image using online tools: TinyPNG – Compress WebP, PNG and JPEG images intelligently
• Compress and resize image before uploading to server, depending on where it will be used.
  • For example: avatar size should be 500 x 500 pixels only. Allow user to crop the zone they want to display, resize the image then upload.
  • Image for post: should be saved as full size and thumbnail. Thumbnail size is varying depending on the system. For example: 250 x 250, 500 x 500. Note: the image should be double the size of the display area (display as 250 x 250, image should be 500 x 500).

Use asynchronous loading techniques for non-critical components or scripts.

• JavaScript Performance – How to Improve Page Speed with async and defer (freecodecamp.org)
  • The bottom line is not to use the async attribute with scripts that manipulate the DOM. Use async with scripts external to the application which do not manipulate the DOM.
  • The bottom line is to use the defer attribute with scripts that manipulate the DOM. It will improve page loading by downloading the scripts in the background and execute after the DOM is ready.

• Render Blocking CSS (web.dev)
  • Conclusion: loading css of home page and css for UI libraries as blocking, css for other pages and feature libraries (file uploading, image processing…) as async.

Optimize server response times and database queries.

Consider the following techniques to optimize database queries:

• Use appropriate indexing: Properly indexing the columns that are frequently used in queries can significantly improve query performance.
• Optimize query structure: Analyze and optimize the structure of database queries to ensure they are efficient and retrieve only the necessary data.
• Avoid unnecessary queries: Minimize the number of database queries by combining or optimizing them to retrieve multiple sets of data in a single query.
• Implement database caching: Utilize caching mechanisms to store frequently accessed or computationally expensive query results, reducing the need for repeated execution.
• Regularly analyze and monitor query performance: Use database profiling and monitoring tools to identify slow-performing queries and optimize them accordingly.
• Connect to database using hostname is sometimes significantly slower than using IP address. For example: 127.0.0.1 is faster than localhost.

Prioritize above-the-fold content to ensure it loads quickly and enhances perceived performance.

Refers to the practice of loading and rendering the content that appears immediately in the viewport of a web page before the rest of the content further down the page. The goal is to ensure that users see and interact with the most relevant and visible content as quickly as possible, enhancing the perceived performance of the page.

Techniques:

• Lazy loading contents and images.
• Critical CSS: Inline or prioritize the delivery of critical CSS—the minimal set of CSS required to render above-the-fold content. Others can be load later.
• Asynchronous Loading: Load non-critical scripts and resources asynchronously to prevent them from blocking the rendering of above-the-fold content.

Employ content delivery networks (CDNs) to serve content from servers closer to the user.

Utilize caching mechanisms to store and retrieve static content efficiently.