3.19 - Preload fonts avoid testing elements where font-family doesn't apply

[DahmaniAdame]

Enhancement opportunity
We are currently checking all elements on the page for both the position and visibility.

We should limit our processing to elements that can be styled or styled by font-family. This results in 10% less elements to check on average, and up to 30% less in some cases.

User story

As product, I want to limit visibility and position checks to elements that can be styled with font-family, so that we reduce unnecessary processing and improve performance.

Acceptance Criteria

• Elements that cannot be styled with font-family are excluded from processing
• TAGNAMEs that do not support font-family styling are filtered out early in the logic
• List of tags to exclude:

[
  // Metadata/document head
  'BASE', 'HEAD', 'LINK', 'META', 'STYLE', 'TITLE', 'SCRIPT'

  // Media
  'IMG', 'VIDEO', 'AUDIO', 'EMBED', 'OBJECT', 'IFRAME',

  // Templating, wrappers, components, fallback
  'NOSCRIPT', 'TEMPLATE', 'SLOT', 'CANVAS'

  // Resources
  'SOURCE', 'TRACK', 'PARAM',

  // SVG references
  'USE', 'SYMBOL', 

  // Layout work
  'BR', 'HR', 'WBR', 

  // Obsolete/deprecated
  'APPLET', 'ACRONYM', 'BGSOUND', 'BIG', 'BLINK', 'CENTER', 'FONT', 'FRAME', 'FRAMESET', 'MARQUEE', 'NOFRAMES', 'STRIKE', 'TT', 'U', 'XMP'
]

[Miraeld]

⚠ This has nothing to do with WP Rocket Repo, but Rocket-scripts one.

Scope a solution

In here:

1. Add the following constant:

// Elements that cannot be styled with font-family
        this.EXCLUDED_TAG_NAMES = new Set([
            // Metadata/document head
            'BASE', 'HEAD', 'LINK', 'META', 'STYLE', 'TITLE', 'SCRIPT',
            
            // Media
            'IMG', 'VIDEO', 'AUDIO', 'EMBED', 'OBJECT', 'IFRAME',
            
            // Templating, wrappers, components, fallback
            'NOSCRIPT', 'TEMPLATE', 'SLOT', 'CANVAS',
            
            // Resources
            'SOURCE', 'TRACK', 'PARAM',
            
            // SVG references
            'USE', 'SYMBOL',
            
            // Layout work
            'BR', 'HR', 'WBR',
            
            // Obsolete/deprecated
            'APPLET', 'ACRONYM', 'BGSOUND', 'BIG', 'BLINK', 'CENTER', 'FONT', 'FRAME', 'FRAMESET', 'MARQUEE', 'NOFRAMES', 'STRIKE', 'TT', 'U', 'XMP'
        ]);

2. Then in the same file, create a function canElementBeStyledWithFontFamily(el)

    /**
     * Checks if an element can be styled with font-family.
     * 
     * This method determines if the provided element's tag name is not in the list
     * of excluded tag names that cannot be styled with font-family CSS property.
     * 
     * @param {Element} element - The element to check.
     * @returns {boolean} True if the element can be styled with font-family, false otherwise.
     */
    canElementBeStyledWithFontFamily(element) {
        return !this.EXCLUDED_TAG_NAMES.has(element.tagName);
    }

3. Create a new function canElementBeProcessed:

function canElementBeProcessed(el) {
   return this.canElementBeStyledWithFontFamily(el) && this.isElementAboveFold(el);
}

4a. In here:
Add the newly created function as part of the condition:
.filter(el => this.canElementBeProcessed(el));

4b. Same as 3, but here

5. Add tests, after this one here:
   Example:

describe('canElementBeStyledWithFontFamily', () => {
        it('should return true for elements that can be styled with font-family', () => {
            const element = { tagName: 'DIV' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, true);
        });

        it('should return true for text elements', () => {
            const element = { tagName: 'P' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, true);
        });

        it('should return false for IMG elements', () => {
            const element = { tagName: 'IMG' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });

        it('should return false for SCRIPT elements', () => {
            const element = { tagName: 'SCRIPT' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });

        it('should return false for STYLE elements', () => {
            const element = { tagName: 'STYLE' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });

        it('should return false for META elements', () => {
            const element = { tagName: 'META' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });

        it('should return false for BR elements', () => {
            const element = { tagName: 'BR' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });

        it('should return false for deprecated FONT elements', () => {
            const element = { tagName: 'FONT' };
            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
            assert.strictEqual(result, false);
        });
    });

Efforts

XS thanks to this grooming

[jeawhanlee]

@Miraeld For step 3 & 4, instead of adding this filter individually, why not just do this directly in isElementAboveFold since we know that we only process elements above the fold, we can simply just filter the elements above the fold and return the final value. WDYT?

[Miraeld]

Yes we could indeed, but I was more thinking of keeping these checks seperated as they both are different and not really related.

But we could

[jeawhanlee]

@Miraeld What if we create a new method maybe called canElementBeProcessed to encapsulate the isElementAboveFold and the new proposed canElementBeStyledWithFontFamily and return true only when both methods return true>

[Miraeld]

Yes definitely

[Miraeld]

Grooming has been updated.