I'm a devoted Astra Pro user as well as an avid Tech SEO/CWV optimizer since it's one of those things that I control and it only takes a couple hours to achieve near perfection. Here is how I optimize for speed.
My stack is:
- Managed hosting. (Not the most popular "engine" one that is often used - I find it too restrictive.)
- Child theme
- Astra Pro
- No page builders (Elementor, etc)
- WP-Rocket cache.
- TinyPNG, optimizing all images and converting all images to WebP (I'm old-school, and use a 15 year old version of Macromedia Fireworks to optimize before uploading as well)
- CloudFlare.
- 14-15 other plugins used for forms (set to load css/js ONLY on pages where used), etc.
All testing is done at: [
pagespeed.web.dev...]
All CLS (IMO, the most important metric) diagnoses is done at: [
webvitals.dev...] which shows you EXACTLY which containers are causing the layout shift in a visual way.
1 - ALWAYS test pagespeed in a browser that you
are not logged in to your WordPress backend. Always load your test page(s) (mentioned next) into the same, non-logged in browser you plan to test CWV BEFORE you test. This assures the page creates a cached version and the cached version will be tested.
2 - Start by setting a baseline for the theme/stack. This usually eliminates the need to do much more, except in cases where the individual content pages have a lot of images to optimize, form pages, etc. Create a BLANK page and BLANK post, set them to no index, remove any sidebars, footer, etc. On these two blank URL's, you want nothing but the header to load, since it is generally going to affect 100% of your pages and have the highest impact on performance.
3 - I preload my fonts and logo image by editing the header.php in my child theme. I also instruct WP-Rocket to ignore lazy loading of the logo. I preload before the GA4/GTM script, and directly beneath the < head > tag.
I may spend 2-3 hours on these blank pages alone, getting the score as close to 100% as possible. In general, GA4 and GTM are the only two things that slow the site down when I am done in here. On my site, I have achieved a 98 CWV score on the blank pages, which means I can forget about it (for now) and move on.
4 - Add the footer to the page, rinse and repeat all testing. Once you're done with the header AND the footer, if you plan to add a sidebar to the page/posts do that now and rinse and repeat your testing. When I add the footer to the page, I'll add a <div> to the content area that is 700 pixels high, this means the blank div will show in the viewport and footer will not interfere with LCP.
The goal is this is to figure out where your hurdles are and clean up without getting too distracted by the 30 other onpage factors that come from the content being there. Once you have gone as far as you can, set these two pages back to "draft" but keep them as anytime you see speed slowing, this is where you return first.
Note: After every change, you must flush the cache and if you use CloudFlare, you must purge the site. Otherwise, testing tools will just show your previously cached version.
Optimize these first!
Once you get to the point you are ready to optimize the content on each page, it's MUCH easier to focus on that alone.
Tips - While I use a "featured image" on posts and pages, I disable it in the Astra page setting and place the featured image manually after the first paragraph so it does not load into the view port on mobile devices.
Here is a screenshot of my home page [imgur.com], which is very heavy in images, text, a form and several other onscreen elements. Total page size is 799kb before compression, 370kb after.
Yes, it takes patience and work, but it can be done.
FWIW, the site was still affected by HCU.
Edit to change tonypng to tinypng.
