Skip to main content

FOIT Font Files

Priority: Critical

Impact: Negative

What issues it may cause​

  • Slow Page Rendering: When fonts fail to load correctly, it can delay the rendering of textual content on the page. Browsers may block the display of text until the font has fully loaded, leading to a noticeable delay in content visibility.

  • Flickering or Flash of Invisible Text (FOIT): If fallback fonts are used initially and then replaced with the intended fonts once they load, it can cause a flickering effect. This can be visually jarring to users.

  • Poor User Experience: Delayed text rendering can frustrate users, potentially increasing bounce rates and reducing the effectiveness of the web content.

How do you fix it​

  • Optimize Font Loading:

    • Use font-display CSS property: This property allows you to control how web fonts are displayed as they load. Options like swap, fallback, optional, and block can be used to balance between rendering speed and visual aesthetics.

    • Prioritize Local Fonts: Specify local fonts first in your CSS font-family to reduce the need to fetch fonts over the network.

    • Load Only Necessary Font Variants: Include only the required weights and styles to minimize the volume of data that needs to be loaded.

  • Reduce Font File Sizes:
    • Compress Fonts: Utilize formats like WOFF2, which offers better compression than older formats.

    • Subset Fonts: Include only the characters that are actually used on the site to further reduce file sizes.

  • Implement Efficient Caching:
    • Set long cache lifetimes for your font files to reduce repeat downloads for returning visitors.

Learn more about font-display.

What is the positive impact​

  • Improved User Experience: By ensuring text is always visible, users can start reading content immediately without waiting for fonts to load.

  • Enhanced Perceived Performance: Proper use of font-display can make pages feel faster, as users are not left staring at blank spaces.

  • Better Accessibility: Immediate text visibility improves accessibility for all users, including those with slower internet connections or on mobile devices.

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
            wastedSecsAvg
            urlCount
            wastedSecsSum
            gaPageviewsSum
            savingsScoreSum
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }

Try in explorer