How to improve performance test in web page

on

  •  Optimised images load faster and consume less mobile data
  • Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
  • Large network payloads cost users real money and are highly correlated with long load times. -  Reduce payload 
  • Set an explicit width and height on image elements to reduce layout shifts and improve CLS - Set image dimensions
  • Keep the server response time for the main document short because all other requests depend on it.
  • A large DOM will increase memory usage, cause longer style calculations and produce costly
  • Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. 
  • Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. 
  • These are the largest layout shifts observed on the page. Each table item represents a single layout shift, and shows the element that shifted the most. Below each item are possible root causes that led to the layout shift. Some of these layout shifts may not be included in the CLS metric value due to windowing.

Avoid Large Layout Shifts

    • Set Explicit Size for Media Elements:
      • Add width and height attributes to images and other media elements to avoid layout shifts. For example:
        html
        <img src="images/misc/arrow.png" alt="down arrow" width="XX" height="XX">
<img class="icon" src="images/socialmedia/facebook.png" alt="icon for facebook" width="XX" height="XX">

    2. Properly Size Images

    • Serve Appropriately-Sized Images:
      • Resize and compress images to match the display size they need to be. Use responsive images where applicable.
      • Example for resizing:
        html
        <img src="images/hotel/dining_rooftop.jpg" alt="Dining" width="XX" height="XX">

    3. Minify JavaScript

    • Minify and Compress JavaScript Files:
      • Use tools like UglifyJS or Terser to minify JavaScript. This will reduce the file size and improve load time.
      • Example of minifying using Terser:
        bash
        terser script.js -o script.min.js --compress --mangle

    4. Reduce Unused JavaScript

    • Remove or Defer Unused JavaScript:
      • Identify and remove any JavaScript that isn't necessary for the initial page load. Defer loading scripts until they are required.
      • Example of deferring JavaScript:
        html
        <script src="script.js" defer></script>

    5. Efficiently Encode Images

    • Optimize Image Encoding:
      • Use image optimization tools like ImageOptim, TinyPNG, or online services to compress images.
      • Example:
        html
        <img src="images/hotel/dining_lattes.jpg" alt="Dining" width="XX" height="XX" loading="lazy">

    6. Serve Images in Next-Gen Formats

    • Use Modern Image Formats (WebP, AVIF):
      • Convert images to WebP or AVIF format for better compression and faster loading.
      • Example:
        html
        <picture>
  <source srcset="images/hotel/dining_rooftop.webp" type="image/webp">
  <img src="images/hotel/dining_rooftop.jpg" alt="Dining" width="XX" height="XX">
</picture>

    7. Reduce Network Payloads

    • Optimize and Compress Resources:
      • Compress resources using gzip or Brotli compression.
      • Remove or optimize large resources.
      • Example for server-side gzip compression:
        apache
        <IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
</IfModule>

    8. Improve Critical Request Chains

    • Optimize Critical Path:
      • Minimize the length of critical request chains by reducing dependencies and prioritizing critical resources.
      • Inline critical CSS and defer non-critical CSS.
      • Example for inlining critical CSS:
        html
        <style>
  /* Critical CSS */
</style>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

    9. Reduce DOM Size

    • Optimize DOM Structure:
      • Limit the total number of DOM elements and depth to reduce memory usage and improve rendering performance.
      • Simplify nested elements and remove unnecessary wrappers.

    10. Improve Initial Server Response Time

    • Optimize Server Response Time:
      • Ensure the server responds quickly to requests by optimizing backend processes and using caching strategies.
      • Use a Content Delivery Network (CDN) to reduce latency.

    11. Accessibility and Best Practices

    • Ensure Accessibility:
      • Conduct manual testing and adhere to accessibility best practices.
      • Ensure HTTPS is used throughout the site to protect user data and build trust.

    12. Minimize Main-Thread Work

    • Optimize JavaScript Execution:
      • Break up long-running tasks and use web workers where appropriate to offload work from the main thread.

    By implementing these recommendations, the performance, loading speed, and user experience of the webpage will be significantly improved.

Comments

Post a Comment