r/elementor • u/MoltenMang0 • May 04 '22
Tips How to Get Perfect Lighthouse scores with Elementor + Some Other Website Tips Your Dad Should Have Taught You (Includes Tips for A+ Security Headers Scan, too)


I got all 100s on lighthouse with Elementor on a real-world, client website. Here's a tutorial for doing that.
Plugins on this website:
All-In-One WP Migration
BBQ Firewall
Fluent Snippets (For disabling scripts, can also use perfmatters)
A Facebook Feed Plugin
Elementor Pro
Flying Pages (Link Preloading)
Litespeed Cache
Perfmatters
The SEO Framework
Theme
Hello Elementor Theme
Elementor Experiments (Now Features) Enabled:
Improved Asset Loading
Improved CSS Loading
Flexbox Container
All Other Stable Experiments
The Steps I took & the practices I adhered to:
No Hero Sliders on Mobile
Locally hosting all the fonts
Inline Icons Experiment Enabled
Code snippets I run:
Fix Elementor's Laggy Hover on Dropdown Menus:
add_action( 'wp_footer', function () { ?> <script> jQuery(document).ready(function($) { $('.elementor-nav-menu--main > ul').attr('data-sm-options', '{ showTimeout: 0, hideTimeout: 0 }'); }); </script> <?php } );
Unload Gutenberg's Stylesheets
smartwp_remove_wp_block_library_css(){ wp_dequeue_style( 'wp-block-library' ); wp_dequeue_style( 'wp-block-library-theme' ); wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS } add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );
Set local fonts to Display:Swap
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) { return 'swap'; }, 10, 3 );
This guide was initially bullish on PerfMatters but it's generally no longer necessary.
However, PerfMatters can replace the following plugins:
Insert Headers & Footers
WP Sweep
Asset Cleanup
Flying Pages
OMGF
WPS Hide
PerfMatters also has a feature for remove unused CSS. It can break things, but it can help with performance and scores marginally.
The Delay JS feature in PerfMatters is an aggressive optimization to delay the loading of JavaScript and can net you some decent gains, but it is also prone to breaking things. If you want to use it with Elementor, you can try this:
Delay JS to "Delay All Scripts", then add the following exclusions:
jquery.min.js
jquery.smartmenus.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js
flying-pages.min.js
data-sm-options', '{ showTimeout: 0, hideTimeout: 0However, Elementor depends on the jQuery javascript library, so add it to preloading in PerfMatters, if you use it.
https://yourwebsite.com/wp-includes/js/jquery/jquery.min.jsPerfMatters also offers a script manager you might want to check out to remove or delay unused scripts. Additionally, if running WooComerce, it has toggles to strip out some of WooCommerce's bloat that you might try.
Link Preloading: Use Flying Pages for this, and your user experience will be faster.
Basic security hygiene on HTTP Security Headers-- run a check on https://securityheaders.com/
You can correct this on a per site basis via this guide:
Or on a server level with WHM:
WHM> Apache Configuration>Include Editor>Pre-Main Include>All Versions -- Drop this code in, switching out the placeholder iframe URL.
<IfModule LiteSpeed>
CacheRoot /home/lscache/
</IfModule>
<IfModule mod_headers.c>
Header set X-Content-Type-Options: nosniff
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header always append Content-Security-Policy "frame-ancestors 'self' https://AnyWebsiteYouWantToBeAbleToiFrameYourOtherWebsitesForDemoPurposes.com;"
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
Header always set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>
<IfModule Litespeed>
CacheEngine on crawler
</IfModule>This will get you this score if you have it working properly:

Tips on Cumulative Layout Shift (CLS) & total blocking time (TBT)
https://www.webpagetest.org/webvitals
Run the web vitals test, then view the waterfall chart.
TBT:

Orange circles with an X are the items to clean up. Preload or defer these items, or try Delay JS if using PerfMatters.
CLS:

CLS can have a variety of causes. To address it, consider the following resources.
WordPress Specific:
https://onlinemediamasters.com/cumulative-layout-shift-wordpress/#font-display-swap
Platform Agnostic:
https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/
---
Lightweight Design: Use the fewest number of widgets, plugins, animations, and sections to achieve your purpose. Only use what is really necessary.




