Lighthouse Performance Test Results

[jvanulde]

Source: geo.ca-lighthouse-report.pdf

Consider the following tasks to improve performance:

• [ ] #117
• [ ] Reduce unused JavaScript: Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
• [ ] Eliminate render-blocking resources: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
• [ ] Reduce unused CSS: Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity
• [ ] Serve images in next-gen formats: Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
• [ ] Avoid enormous network payloads (Total size was 55,079 KiB!): Large network payloads cost users real money and are highly correlated with long load times.
• [ ] Serve static assets with an efficient cache policy (96 resources found): long cache lifetime can speed up repeat visits to your page.

[jaredkinger]

Updated Reports as of Jan 24, 2023

Mobile

Source: geoca-lighthouse-mobile-report-2023-01-24.pdf

Desktop

Source: geoca-lighthouse-desktop-report-2023-01-24.pdf

Live Scoring & Expanded Reports

For the most up-to-date scoring and expanded reports please visit PageSpeed Insights

[jaredkinger]

February 2023 Release Update

Performance

Enable text compression Text compression has been enabled for the geo.ca cloudfront distributions as detailed in issue #117

There are a few scripts coming from geoview's distributions that aren't being served with text compression and I have followed up here: Compress scripts on server #659

Reduce unused JavaScript

• Removed WordPress emoji scripts, removed from simply static build to get rid of 404 error
• Conditionally load shortcode scripts so they are only loaded when needed
• Disabled Elementor Font Awesome 4 Shim
• Removed duplicate leaflet scripts ( previously loaded 3 different times )
• Deactivated Phlox Elements plugin ( auxin-elements-plugins, auxin-elements-scripts, auxin-elementor-widgets, wp-medialement )
• Removed Phlox theme scripts ( auxin-modernizer, auxin-plugins, auxin-scripts )

Eliminate render-blocking resources

• Moved all scripts to the footer save for jQuery
• Reduced unused JS/CSS

Reduce unused CSS

• Removed WordPress emoji styles
• Removed Gutenberg editor styles ( wp-block-library, classic-theme-styles, global-styles inline style )
• Removed Phlox theme styles ( auxin-fonts-google, auxin-front-icon )
• Deactivated Phlox Elements plugin ( auxin-elementor-widgets, wp-medialement )
• Removed duplicate and unused Google Fonts
• Conditionally load shortcode styles so they are only loaded when needed
• Removed duplicate leaflet styles ( previously loaded 3 different times )

Avoid enormous network payloads

• Compressed background video from 89MB down to 14.5MB
• Compressed video poster image from 1MB down to 129KB
• Conditionally loaded map scripts/styles to reduce unnecessary requests

Serve static assets with an efficient cache policy Actively being worked as part of #117. Working on dev and should hopefully make it into the March 2023 release

Ensure text remains visible during webfont load

• Set Noto Sans and Open Sans font fallback to sans-serif. Set Google fonts to font-display: swap
• Still need a fix for theme icons

Reduce the impact of third-party code Loading Adobe Analytics asynchronously. This did not make it into the Feb 2023 release but is ready for March 2023 release

Does not use passive listeners to improve scrolling performance Added the following inline script after loading jQuery to fix this:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

Accessibility

[user-scalable="no"] is used in the  element or the [maximum-scale] attribute is less than 5. Removed user-scalable=no from meta viewport tag in Phlox theme

Links do not have a discernible name Fixed by issue #79

Best Practices

Displays images with incorrect aspect ratio Fixed by issue #79

Missing source maps for large first-party Javascript Source maps weren't being included in the simply static build. Removed references to source maps in the javascript files

SEO

Document doesn't have a valid hreflang Document does not have a valid rel=canonical Enabled absolute URLs in Simply Static to resolve both of the issues above.

Miscellaneous Fixes/Improvements

• Moved mega menu CSS to the head instead of the footer to prevent flashing and removed the jQuery snippet that was showing/hiding the menu on ready
• Converted all breadcrumbs from Phlox to Yoast to allow for deactivating the Phlox Elements plugin
• Removed version query string from the leaflet scripts and styles to prevent a redirect
• Removed Gutenberg SVG filters to reduce DOM size
• Removed RSS, XMLRPC, WordPress Shortlink, REST API and oembed discovery links from the head tag to prevent soft 404s

Updated Reports as of February 17, 2023

Mobile

Source: geoca-lighthouse-mobile-report-2023-02-17.pdf

Desktop

Source: geoca-lighthouse-desktop-report-2023-02-17.pdf

Next Steps

• Custom WordPress Theme
• Elementor Cleanup / Optimization
• Critical CSS
• Deferred Javascript
• Image Compression
• Lazy Load Images

[jaredkinger]

April 2023 Release Update

Performance

Image elements do not have explicit width and height Some images were using custom Elementor thumbnail sizes that don't correctly output these attributes. The custom thumbnail sizes were changed out for the medium_large thumbnail size

Eliminate render-blocking resources + Reduce unused CSS + Reduce unused JavaScript The new lightweight custom GEO theme (#120) was rolled out which got rid of the bloated Phlox theme. This further reduced both the unused CSS/JS and cut down the number of render-blocking resources as the theme only includes what is necessary and loads scripts and styles conditionally.

Additionally the new theme allowed for activating several of Elementor's performance optimizations that were previously conflicting with the Phlox theme. These features are:

• Optimized DOM Output
• Improved Asset Loading
• Improved CSS Loading

Accessibility

[aria-hidden="true"] elements contain focusable descendents Several elements contained incorrect aria-hidden tags and those have been removed

Updated Reports as of April 18, 2023

Mobile

Desktop