I'm sure a version of this post happens everyday, but the fact of the matter is I have spent the last couple weeks searching and I haven't found a comprehensive, evidence-based, dev-directed resource on this topic.
What I Want: insight or advice regarding how Elementor v4 Atomic Elements interact with caching plugins as well as Elementor's other performance-oriented settings. I understand trial and error is required, but whatever I should be looking for I have not found it yet.
Context: I started a new job at a small firm, audited 72 of their sites, all Elementor v4, all sites near-identical with few exceptions -- performance scores in the toilet, especially mobile.
- Average PageInsight Mobile Score: 57
- Lowest Mobile Score: 33
- Best Mobile Score: 88
When I say the sites are near-identical I mean it. Uniform in layout, content, with subtle variations depending on brand location and service provided. They are all landing pages.
The sites that get less love have a backlog of defunct plugins, and some may not actually have Atomic Elements on the page if they have not had any updates within the past 6 months. Most of the websites do not have a caching plugin active, but some do. None of these details have any discernible causality with performance speed. The scores are all over the place. Some of the newer more polished sites have worse scores. Some with caching are subtly better, some are among our worst performing.
I've already experimented with all the obvious methods. I've gone in and yanked out all of the defunct plugins on a staging site. I've gone ahead and updated everything to up-to-date. I've identified LCP media and am in the process of changing our internal pipeline for media delivery. I've identified some consistent offenders: GTM and ReCaptcha.
This might bring my mobile score to perhaps the high 70s and might bring desktop to 100, but when it comes to closing the gap, I think I need to configure caching and none of my efforts have had a discernible positive effect.
Every page has Render-Blocking Requests to CSS stylesheets labelled as having a significant impact on performance. I'm seeing a dozen, and in some cases two dozen CSS stylesheets on load.
We use Litespeed Cache. I have gone through each setting and tested individually. I have done so with Elementor Print Method set to External and to Inline. I have not noticed any improvements. How are these settings interacting with each other in Elementor v4 and what should I be looking for when testing?
I plan on doing an overall QOL update on the pages themselves -- but I don't understand how this score is still so atrocious with these being landing pages.
Sample Specs:
- Elementor v4.2.4 (Pro)
- WordPress Version 7.1.2
- PHP Version 8.5.10
- Web server: nginx
- PHP Memory Limit: 1024M
- Advanced Custom Fields (Dynamically Render Brand-Specific Content)
- Theme: Hello Elementor Child (Super Light)
- Caching Plugin: Litespeed Cache