Skip to main content

Offscreen Images

Priority: Critical

Impact: Negative

What issues it may cause​

  • Increased Load Times: Loading all images, including those offscreen, during the initial page load can significantly slow down the page rendering time. This delay affects the perceived performance and user experience, as users have to wait longer for the content they can actually see to load.

  • Excessive Bandwidth Usage: Loading offscreen images consumes additional network bandwidth, which is inefficient, especially for users on slower connections or with limited data plans. This unnecessary data transfer can result in higher costs for mobile users.

  • High Memory Consumption: Processing and storing all images, including those not immediately needed, can increase memory usage. This is particularly problematic on devices with limited resources, leading to slower performance and potential crashes.

How do you fix it​

  • Prioritize Critical Images: Load images that are immediately visible to the user first, and defer non-critical images until later

  • Implement Lazy Loading: Use lazy loading techniques to defer loading offscreen images until they are about to enter the viewport. This can be achieved through native HTML attributes (loading="lazy") or JavaScript libraries designed for lazy loading.

  • Optimize Image Delivery: Ensure that images are appropriately sized and compressed. Using modern image formats like WebP can reduce file sizes while maintaining quality.

Learn more about deferring images.

What is the positive impact​

  • Faster Page Load Times: By loading only the images that are visible in the initial viewport, the page can render much faster, enhancing the user experience.

  • Reduced Network Usage: Lazy loading offscreen images minimizes unnecessary data transfer, conserving bandwidth and reducing load times, particularly beneficial for mobile users.

  • Lower Memory Consumption: Deferring the loading of offscreen images helps keep memory usage low, which is critical for maintaining performance on devices with limited resources.

How to fetch the data for this report template​

You will need to run a crawl for report template to generate report. When report has been generated and you have crawl id you can fetch data for the report using the following query:

query GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
          nodes {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            savingsScoreSum
            wastedSecsSum
            wastedKibSum
            failedAuditsCount
            warningAuditsCount
            infoAuditsCount
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }

Try in explorer