I rarely comment on videos but this was exceptional. I was experiencing the same frustrating issues and I'm going to try this on my next site. Thanks for posting.
Joel, I'm very glad to see this and appreciate you taking the time to leave a comment. After some more experimenting, I think it is also possible to remove the "full" sized image from the Elementor controls since Optimole does all the work. I tried this approach on a recent build and got 97 mobile, 100 desktop on Google! I even used Typekit fonts and got away with it. This method has reliably been getting 70s-90s mobile and 90s-100 desktop so far when combined with some thoughtful choices about plugins, SVGs, and design. Let me know how it goes for you!
I was very excited when I saw this video. Looked like an instant fix for mobile issues coming from images. Unfortunately for me in my tests, I was unable to replicate such great results. I did implement the child theme and eliminate all the image sizes however. I found I could implement similar results using my current stack (Shortpixel and WP Rocket) and no great improvement with Optimole. Thanks for the info, it was very helpful in digging deeper into these issues.
Shortpixel Adaptive Images + WP Rocket should yield similar results as it behaves like Optimole (I only discovered this after making the video). However, there is also a delay after configuration before the results are likely to kick in. I've had to visit the site and then wait awhile for the page speed tests to notice the changes. Still, there are many other reasons sites can be slow, maddeningly! Thanks for the comment, and I'm bummed this didn't help your scores more. At least your uploads footprint should be smaller since de-registering the images should work with Shortpixel Adaptive Images as well. Please share any insights you come across as this method isn't perfect.
You are creating different sizes with optimole. You are relying on optimole and their cdn. Good idea to say this at the start of the video and also list the limitations of optimole for large qty image websites.
That's a good point, this method is relying on the Optimole CDN. Shortpixel Adaptive Images in the other solution I've found which seems to deliver dynamically sized and formatted images on the fly. These appear to be different than other image optimization plugins which offer CDN delivery, but don't necessarily deliver pixel perfect images on the fly. Definitely at the mercy of the Optimole CDN here, but we've achieved great scores with it and kept our website server footprint small.
This is awesome, very clear explanation! As a novice, I do have a question though. After doing this, how can you ensure that it also happens for the photos already present on your website? So that you maintain a clean database?
Watch this, it has the answer! Force Regenerate Thumbnails should clean things up after you configure Optimole. Back up first! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XSLpuofJd4k.html
Super helpful! It looks like the only lazy load setting you didn't activate was the native lazy load option. Why didn't you choose that one? Also, have you tried the smart cropping feature? Does that work at all? Thank you so much for making this. It was awesome to learn your favorite plugins for getting such great scores.
Thank you Steve. Great questions. I don't have a good answer for not trying native lazy load other than many plugins offer me a lazy load option and native lazyload may not be supported on all browsers (or is it?) so I just say "no" to all except Optimole to avoid any conflicts. Perhaps the native option would fall back to Optimole? Not sure, happy for any advice on this! I've never tried smart cropping as I tend to use the object-fit: cover option for most of my images, but that's another feature I haven't really explored and may be misunderstanding or missing out on!
great! I just saw the "Setup Elementor Typography" video and now this... been obligated to subscribe! Question: I think I got it, to a new site... but to apply it in to an old one, should I erase every image and then start all over with this method or is it a better way? Thanks man, your happy new sub from Chile
Good question Emilo. I'm currently experimenting with a way to clean out all the duplicate files from the uploads folder without causing problems (my first try failed). However, it shouldn't be necessary to do this. Optimole should work and start doing its thing right away and then you can change the media sizes and update your functions file. Finally, you can use WP Rocket or some other optimization plugin if desired. All of the existing image duplicates will still be sitting in your uploads folder, but Optimole creates and delivers optimized images from its server. Just be sure to enable lazy loading for all images so Optimole will add a canonical header crediting your site and not their server for the image. Hope it works!
@@4RI3L I used to use a couple other FTP clients in the past until I found out they were storing passwords in an unencrypted XML file. Transmit seemed to have better security and has always worked well. I can even drag and drop from site to site. This image method seems to be working well if I lazy load all images. Lately, I've been unloading all image sizes and controls which work fine. However, certain Elementor widgets still show image controls and I'm not sure how to hide them. I also noticed ACF wanted to use an image size for previewing image fields, but it didn't know what to get because I had de-registered those sizes. It still shows an image on the backend, but I'm not sure how it is choosing the size. Anyhow, let me know how this method goes if you try it. I'm loving the clean uploads folders and higher page speed scores.
So sorry, I just noticed this. Optimole can certainly optimize those Woo images. Deregistering their creation will take some extra work. I don't have the file sizes handy, but I think you can find them with a web search and then amend the code. I'd look it up, but don't have time at the moment. Deregistering the controls and all image sizes isn't perfect, but it's helped my sites a ton. If anyone has suggestions for improvements, I'd love to hear them.
I've not tried to de-register WooCommerce image sizes, so I'm not sure. This approach is 100% clean. I still notice certain Elementor controls on widgets which try to indicate image sizes or plugins which want to use them. For example, ACF image fields want to pick an image size for previewing custom field images on the backend. I set this to a % width to get around it. However, page speed scores and the uploads folder are WAY better using this approach so I'm still running with it. Besides Optimole, Shortpixel Adaptive Images does well with this approach.
@@muhammadaslan6256 I'm using the Hello Theme so I'm not sure what other themes will do in their functions. You might also try the Code Snippets plugin (wordpress.org/plugins/code-snippets/). The free version will let you place PHP snippets using the plugin so you don't have to try to do so in a child theme.
