To Everyone using the Woodmart Them – Core Web Vitals, google pagespeed gtmetrix

Dear All,

As many are waking up to the Core Web Vitals (including myself), I decided to write down in a few paragraphs my journey to improve the core web vitals of my site. Most of the recommendations probably apply to other themes as well but I’m using the fantastic theme Woodmart and saw great improvements when taking these actions.

I am not affiliated to XTEMOS or any of the plugins I recommend here, these are simply the products that I use and work well for me (yes, I’ve tested many others). All recommendations are just my opinions from my experiences. I welcome others to please expand on this post and share their experiences of what works for them. It may not be complete or perfect – use at your own risk, make a backup of your site before you do any of this!

1. I’m going to start out with an overlooked feature of woodmart that is extremely powerful and will shrink down your CSS dramatically. Especially when looking at core web vitals and google page speed this will have a positive effect on your score.
   1. Woodmart link -> CSS Generator
      Go through the list of CSS and turn off everything you don’t use. Save the file, clear your cache and check your site. Do this over and over again until you removed all the items you are not using
   2. Woodmart link -> (in case you use WPBakery) WPBakery CSS Generator (I unchecked all) and generated the file and no changes occurred to my site
2. Ensure you are hosting your site on a reputable and fast hosting provider (hostgator, bluest etc. are not great) . I’m not going to make any recommendations here as I’m not quite sure about what the ‘best’ is. It all depends on how much money you are willing to spend. It will have a significant impact on general performance of your website.
3. Use a CDN, if you don’t know what a CDN is, please google it.
4. You have too many plugins, yes we all do (most likely). Each plugin will add it’s own JS, CSS and who knows what else. Go through your list of plugins and start deactivating AND deleting all plugins you are not using or perhaps it’s really not that important to have after all!. Really, delete these plugins, most issues are because of plugins, I still have too many, slowly working on eliminating them to bare minimum.
5. Use a caching plugin, yes you need one! All WordPress sites need one in my opinion. I personally use WP-Rocket and it’s performed extremely well.
   1. Configuration for WP-Rocket (checkbox on the following)
   2. Enable Caching for mobile devices
   3. Minify CSS Files
   4. Optimize CSS Delivery
   5. Minify Javascript Files
   6. Load Javascript deferred
   7. Delay Javascript execution
   8. Lazyload -> enable for images
   9. Enable link preloading
   10. I added items to Prefetch DNS Requests – I’m not writing mine down as yours will probably be different
   11. I preload a font – I’m not writing mine down as yours will probably be different
   12. I added items to Cache Query String -I’m not writing mine down as yours will probably be different
   13. Control heartbeat – set all options to “reduce activity”
   14. At time of writing I’m NOT using webp caching YET as woodmart is not completely ready for webp implementation through imagify, once image dimensions are added everywhere I will consider this again and update this item. (Imagify I will touch on later, but it ads a picture element for webp, and that is a bit out of the scope for woodmart)
6. Install an image optimizer, I started using imagify. It works, not the fastest but I choose it because I also use WP-Rocket and both plugins are owned by the same company so I’m hoping they work well together.
   1. Configuration for Imagify (checkbox on the following)
   2. Auto-optimize images on upload
   3. Backup original images
   4. Keep all EXIF data from your images (might not be important for you)
   5. Create web version of images
   6. I am NOT using “Display images in webp YET, imagify rewrites a picture tag when you have a CDN and it doesn’t work yet with woodmart, this is a limitation of Imagify in my opinion as it cannot set the rewrite rules properly when using a CDN.
   7. Resize larger images (I set it to 1600, but should probably be lower). If it doesn’t allow you to change this value to a lower setting reach out to support and they send you a plugin to suppress some of the weird large image sizes in WordPress.
7. If you run a store with WooCommerce I recommend installing “Disable Cart Fragments” – google it

I’m hopeful for the next version of woodmart to include more image dimension information and more tweaks to optimize the site. Ideally an additional option for modifying the CSS for mobile would be fantastic but I understand that is difficult.

Thank you XTEMOS, Woodmart is a fantastic theme, hope this will help some people use your theme (or others) better.

Again, my experiences – it may not be complete or perfect – use at your own risk, make a backup of your site before you do any of this! If you have better suggestions, please let us all know and write about it.

All the best

Hello,

Thank you very much for sharing your experience here. We much appreciate your efforts and we are sure that this checklist will be useful to other customers.

Kind Regards

No problem, hope it helps someone.

Sure, I have edited your post and cleaned unnecessary HTML tags.

[Author]

Posts