How to Boost WordPress Page Speed Optimization 2024 - Elementor and Non Elementor Sites - Free Tools
Vložit
- čas přidán 12. 06. 2024
- This is How to Boost WordPress Page Speed Optimization 2024 - Elementor and Non Elementor Sites - Free Tools.
This is the Improved and Simple 2024 Page Speed Booster Tutorial for 2024.
Get the codes: learn.websquadron.co.uk/wordp...
00:00 Introduction
01:08 Webpage to be Tested
01:35 Initial Basic Plugins
01:59 Basic Page Building Good Practice
02:18 Carousels/Videos in Hero are not good
02:34 Rundown of what’s to come
02:57 Pepsi Max Intermission
02:59 WordPress Basic Tip 1: Media Settings
03:34 WordPress Basic Tip 2: WebP Images
03:55 Using BulkResizePhotos
04:41 Other WebP Solutions
04:58 WordPress Basic Tip 3: Custom Load Fonts
06:04 Use Woff2 instead of TTF fonts
06:35 Using FontSquirrel for Woff2 conversion
07:02 Elementor specific Tips
07:04 Don’t always blame the tool
07:19 Elementor Settings
07:46 Elementor Features to be Activated
08:54 Page Speed Score so far
09:37 What is a good score?
10:03 Extra Optimisation Plugins
10:22 PhastPress Settings
11:07 WP Fastest Cache Settings
12:02 WP Meteor Settings and when to use
13:20 Code Snippets’ Snippets :)
17:40 Page Speed Score after Optimisation
19:57 One Stop Performance Solutions
23:44 Try out the Tips
24:11 Conclusion
Links:
BulkResizePhotos: bulkresizephotos.com/en
FontSquirrel: www.fontsquirrel.com/tools/we...
Code Snippets: wordpress.org/plugins/code-sn...
Snippet Codes: learn.websquadron.co.uk/wordp...
PhastPress: wordpress.org/plugins/phastpr...
WP Fastest Cache: wordpress.org/plugins/wp-fast...
WP Meteor: wordpress.org/plugins/wp-meteor/
Airlift: airlift.net/
Elementor Hosting - managed wordpress hosting :
be.elementor.com/visit/?bta=2...
Elementor Pro - The builder that will make you a pro
be.elementor.com/visit/?bta=2...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your CZcams Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - Jak na to + styl
Yes! All the best, Imran. And thank you for doing what only you do best. You rock 😊
Amazing!
Happy New Year Imran🎉, thanks so much for the amazing content you do. Your work is amazing and effective.
Happy New Year to Imran and family. Grateful for all the guidance and knowledge you have shared over the years.
Great video. To the point. Thank you Imran
Amazing video... Very helpful video...thankyou.... Happy New Year 🎉
Imran, have an amazing new year, man! And your family too!
Thanks for all the knowledge you share here!
Happy new year!
Hey man,
Thanks a lot for this awsome content. Really appreciate it.
Wish you a very Happy new year for you and your family too.
Same to you!
These tips are truly amazing. Thanks a lot!!
As always, great video !
Thanks for this Imran, great stuff.
All the best in the New Year. Always good advice. With both of my websites, after carefully following your CZcams videos, I consistently have 98 or above on mobile, and 100 on desktop. For me the actual number doesn't mean much but the load times are key. LEt's not forget Google measure speed at the best conditions, some users will have a lot slower times, hence keeping the actual load times short helps with suboptimal user load times from poor servers.
Brilliant. 🎉
Thank you so much Imran! You've helped me so much
Glad to hear that!
Thank you for your amazing tutorial
First video I watched in 2024!!! Great video, Happy new Year Imran!!
Happy New Year! Stay safe!
Same here!
Thank your guide! Very good and useful for us!
My pleasure!
ppy New Year, Imran. Great overview! Pointers worth acting on, going forward (note to self).
I hope they help :)
@@websquadron, I've started implementing them already.
um.... "Happy" New Year, even.
*Happy New Year Imran!*
great sir
love you from Pakistan
I have been following your videos for a long time, you are my idol.
I like the way you treat elementor and help people show how they can use it and get excellent results both in terms of speed and use.
Thank you.
Wow, thank you :) That means a lot.
Great!
Happy New Year, Imran!
Same to you!
Truly good work! =DDD
Love your videos, thanks for keeping them so up to date!! With custom font files, are you suggest we ONLY need WOFF2 versions? Or should we be uploading other versions as well? Thanks again!
Just go for Woff2
Thank you. I'm new at this and have been watching a lot of your videos. I appreciate your clear and entertaining explanations for things. So much to learn! But now I understand what WP Meteor did to my page. 😅
I was a big supporter of WPMeteor but I have my reservations now if it's used on pages with Carousels or Videos.
nice!! how to set WP Fastest Cache preloader🥰
Awesome video as always! I noticed that the Ensure Webfont is Loaded snippet you show on the video is different from the one on the website. Which is is correct?
Happy New Year!
That one is an old one - but the one you need to use is on the website.
When checking the box "Preload" in WP Fastest Cache it asks to choose the method "Default" or "Sitemap". Which one is better for Wocommerce and Elementor Pro?
Then when choosing "Default" it is asking to check certain options like homepage, posts, categories... which is better to check (btw, there was no products)?
Then after checking Homepage it asks to set a number of pages per minute. Which is better in your opinion?
Thank you so much for your videos
Happy New Year, Imran! As always great video!! Can we do the same for Brick Builder? I just purchased a new license and am trying to learn as much as possible. It would be great if you could make a tutorial for bricks.
You can use the WordPress Tips 1,2,3 and the Plugins and the Code Snippets. This video is made for WordPress and although I point out extra tips for Elementor, you can ignore those. Notice the title: Elementor and Non-Elementor :) :)
Thank you, great way to start the new year ;) ! I wonder if you might consider doing a video about optimizing on page with Elementor: what widgets are better than others to use. For example for a list is it better to use a headings + text widgets of maybe icon boxes widgets or a price list widget? For big pages that's making a huge difference on the top of those explained in this video. Another idea would be about addons for Elementor premium paid versions, which are the best ones, best coded, stable, advanced features but also with modern designs ( some of it are 10 years ago designs for widgets) Anyway thank you for the excellent content you share with us, have an amazing 2024!
I'll have a think.
To be honest, I don't build any EL site with any add-ons now as they really are not needed, even wit Repeater Fields, there is a Code Snippet for that too.
Question part#1 Happy New Year!
Hi Imran, Thanks for this different perspective and detailed speed optim. video.
I know your focus is Emenetor, but i give it a try, maybe do you have experience with DIVI speed optimization ideas? I tried several versions, ideas and more... but one of my site is still slow mainly mobile perspective.
You can use all of the non-Elementor tips :)
@@websquadron yeah, I did, but it didn't help. Thanks anyway!
thanks for the video. very informative. any suggestions on how to optimize & convert to webp existing images? users uploaded images on my site that even though they are optimised before being served, they take a lot of space on my server.
I had some code in my FB Group that I need to relocate
Awesome video! Any thoughts on how to improve a woocommerce product detail page which usually includes a slider at the top (product images) and express payment buttons (e.g. PayPal)? This combination is a real PageSpeed killer..
How slow is it currently and can you send me a URL for a specific product page?
Just discovered your video, this was SO good. No vague talk, no maybe this might work...simply got to the facts. Well done.
Welcome aboard!
I'm so glad you've addressed the WP meteor problem, It's amazing how much it instantly affects your page speed if you jack it all the way up but they subsequent problems with loading menus make it unusable at full power so I've also gone back to using WP fastest cache. I'd love to see a breakdown of how much each different technique/plugin individually affects roughly what percentage of speed score e.g. I'm often in a position where I need to speed up an existing site and I find adding a caching plugin has the largest affect on the score
Very useful content Imran. Is there anything to combat low text-HTML ratio?
This can tricky when balancing need vs metrics.
I would (try to):
- Reduce excess HTML, JS, & CSS.
- Optimise images to ensure we don't have tons of @media codes
- And increase readable content on the site :)
@@websquadron Thanks Imran 👍
Hi Imran, what is your opinion about LiteSpeed Cache plugin if the site is hosted on a LiteSpeed server? Maybe you have some recommended settings for LSCache? Thanks in advance.
Litespeed is great and definitely recommended if you’re on a LS server
Hi @Imran, thanks for sharing your videos. I have a tricky question about Elementor (pro).
Is it better performance and speed optimized to create all sections of a page in Templates/Theme Builder of Elementor (pro) and then include their shortcodes respectively in the page we are creating, or it is better to create, as much as we can, the sections of a page directly inside the page and include the shortcodes of those sections which cannot be created directly inside that page?
Yes and no. Yes for repeating sections on other pages, but it can make managing content a pain when you need to modify for one page and not another.
@@websquadron, thanks for your reply. I am thinking which one is best for page loading speed measured in front-end?
Great video as always! Question, Elementor allows me to add custom code, can I use that instead of code snippets?
I always find that using Code Snippets is easier to manage when you have many codes.
@@websquadron I see. Will still stick with code snippets
Hey Imran! I use Siteground Hosting and they have their own optimization plugin which includes caching, image compression, and serving photos as WebP. Is there a difference in uploading WebP vs. having them convert after and are the plugins you recommended here better than Sitegrounds Optimizer - wondering if there is a difference in quality between plugins. Thanks!
Quality differences are minor. With BulkResize I have more control over the output.
Thank Imran, its great as always.
Just wanted to let you know that "Explicit Fixed Width and Height when you have Elementor Carousels and want to apply Elementor Optimization." is not quite working and is giving an error when trying to activate it.
Is that with carousels or can you paste the error?
Watched your video on this from last year. Very similar. Did it on one site as a test. Had 70ish on desktop. Deactivated what was not needed in Elementor settings. Added in WP Fastest Cache and now 99. GTMetrix is now at an A grade also. 99% Performance and 1.1s for. Fully Loaded Time
Crazy how little things like this help.
HI IMRAN is your system better than seraphinite accelerator? should i apply your suggested changes or continue with seraphinite accelerator
It’s up to you but I prefer mine otherwise I would have covered SA :)
Hi Imran! Thanks for the amazing video. I have a small question tho, I'm currently using WP Fastest Cache and for some reason when I check my site health status on my Dashboard it keeps showing me 'You should use a persistent object cache'. Do you think it's because the plugin isn't working for me? Should I try a different one?
WordPress will always show prompts like that, for instance they don't like it if you only have 1 Theme. No need to worry.
not all hosting plans have this type of cache
Agreed, but that's one of the things I check fir our sites or client sites.@@juanb.274
What's the reason for keeping the 150 for the thumbnail, and make everyone happy? 🙂 Thank you for your videos and happy New year Imran!
I have never had a problem or suffered any loading speed issues when Thumbnails etc for Posts/Product images are involved; though some would prefer not to have the full resolution loaded - hence why I kept it in. But I have 300+ websites built over long periods of time that have 0 applied for all sizes with 0 issues.
Great video. Is there a reason to use Code Snippets vs using a child theme and putting that code you provide in the child functions php file?
You could do that :) I just like having CS as easier to manage
@@websquadron amazing and thorough tuts dude. Thank you.
Hi! Thank you, I have a problem, please if you can help me, the PhastPress whn is set up Minify scripts and improve caching makes that the drowndrop menu dont show in mobile, there is a solution for this for not having to deactivate that function? Thank you a lot
You may need to ask AI to generate some code to stop it applying.
Great video but does analyzing the Page Optimization results work on a local dev server or only on say a staging site that is online?
Not really unless you have some inbuilt performance checker.
So, I would need to move it to an online option such as a staging site. I like to develop locally and then move to the server when ready. 😢 Thanks for the info. Appreciate you!
Hi Imran, I'm just rewatching this video after I got wprocket and used it on a few sites, I compared it with your method and the results are pretty similar. What is your personal view on wprocket VS your 3 plugin combo for site speed optimization?
Honestly I think it comes down to which is easier to manage for you? Plus these tips are free with no subscription :) WPRocket is really good so I won't say these tips are better. What is good about these tips is that you have more control and you know what you added/did. Whereas with some Performance Plugins, the exact code or what it does can get confusing.
@@websquadron Now when you put it like that, then the control part certainly does it for me. I think I'll stick to your method and use wprocket occasionally. Cheers and thanks for all you do for the web community🙏
What's the difference between using Elementor's Custom Code and using the Code Snippets plugin?
I prefer to use Code Snippets to keep things clean and easier to manage
Thanks!
Could not add woff2 files to Media.
"Sorry, you are not allowed to upload this file type"
Where to enable it? 🙇🙇
Are you adding via Custom Fonts?
And who is your host provider?
Thank you Imran for this video. When I added the Reduce revisions code snippets, I got an error message that the settings is already existing. I don't know where that is. Can you help me?
Are you using other plugins/tools?
@@websquadron I have akismet, classic editor, ad inserter, advanced editor tools, elementor, litespeed cache, rankmath, web stories and code snippets. Which of them could be responsible?
Do you add the code snippets as PHP or CSS?
I add as PHP into Code Snippets.
Elementor specific Tips
I believe these settings need a re-visit as they have changed things around, a lot
It will be in Jan 2025 as I suspect more improvements from now until the new year.
A question about image compression: if I convert a JPG photo to WebP, it has 360kb, if I compress the same photo using TinyPNG, it only has 304kb. Why should you still use WebP?
Depends on the image size. Try it with a larger image.
Can we use WordPress and Elementor optimization snippets together? I’m building some pages with Gutenberg and some with Elementor, and I need to optimize both ways
By the way, Happy New Year, Imran! This video is fantastic, probably the best tips, and most importantly, everything is free! Thanks for that!
Thanks - of course you can use them together :) Wishing you a great year too!
Thanks Imran for another great video. Since I applied your methods my scores went up instantly. I check my score daily several times and it fluctuates from mid 80's to mid 90's for mobile. Could this be because of the server? My desktop score is constantly in the 90's...
Yup, server speed is always a pain.
@@websquadron on my second website PhastPress and WP Fastest Cache didn't work for me. Then I tried with PhastPress and WPMeteor combination and the score went straight up to the 90's. But, then one problem came up. None of the links on the website are clickable when WPMeteor is active :( Any ideas why is this happening? Can anything be done to solve this non-clicking link issue while keeping WPMeteor active? Thanks!
Any optimization recommendations for a site using Bricks instead of Elementor?
See my link as that contains similar codes for Non EL sites too
How do we figure out what fonts are on our site, and what weights we are using? And do you have a link to where we download the G fonts initially?
fonts.google.com
Could use the OMGF or Yabe plugin to get your fonts identified but then you need to go through the hard work of adding and replacing where you used google fonts
@@websquadron thank you. I posted that question before getting to the end of your video. So I'm about to try airlift. WP Rocket didn't help my site, I'm guessing because of the server. Do you think airlift will have that issue? And with airlift, do we need to do any of the things you mentioned like compress photos, upload fonts, etc.?
@@websquadron I just installed and ran airlift. Previously I was using WP Optimize with A2 Optimizer. Mobile scores went from 76 to 83 -- still not what I was hoping would happen. Do you know what might be missing from Airlift?
❤
Nice tutorial
How to get the code snippet please
The codes link is in the description: learn.websquadron.co.uk/wordpress-page-speed/
@@websquadron thanks
i use bricks builder, after set, website load very slowly😢
Which bit as they work on Bricks so it would depend on which snippet or setting caused the delay. Care tom share the URL? What does Page Speed Insights show?
Appreciate the video, but for me any way, it tanked all my page speed scores compared to WP rocket 🙁
It very much depends on what is already there, and sometimes doing this post-build won't always help. Plus not all tips need to be used. My advice is to build with 99/100 from the get-go and then monitor as you build.
Hi Imran,
Little question about your approach of lazy loading :
- You disable it in elementor settings.
- You disable it in PhastPress settings because you say you gonna do it elsewhere.
- You add a snippet to block the lazy load again, because you wanna be in control of what is lazy loaded.
- Then the video is over and your performance score is indeed very good.
So my question is : do you actually use lazy loading and where/when ?
Thanks a lot for your content, dude 🙂
Only when the page has a lot to load then I will activate LL for those images. It’s one of those things you have to test to see if it’s worth disabling
@@websquadron through which plugin do you activate it? Can you do it for specific images?
treasure is mine of one peiece
In my elementor there is no option for optimized DOM output , i cant find it
I don't understand?
In Elementor > Settings > Features > Optimized DOM Output , this option is not visible in my elementor
@@user-em7nc5eo9z what is your elementor version?
@@user-em7nc5eo9zI don't have that option available either.
getting this error jQuery is not define, also my background videos and animation are not working. Any solution?
Deactivate the snippets and plugin and check again.
It will depend on what else is on your site.
@@websquadron should I deactivate the plugins you used or test all plugins one by one?
You'll have to test everything one by one as it will depend on your site.@@salmanhmiran2534
I'd like to ask about your opinion, but I my message is not visible... If first you have to approve it, and that is the reason, sorry, I've sent it several times, as it always dissapeared :(
you're the best WordPress youtuber you know that right ?
15:02
I went from 53 to 71 before the snippets, and then after inserted the snippets i went down to 49... wierd.
Which snippet in particular pulled you down? Test after each one .
Happy New Year, Imran. Did you have a stroke or something? Your right side looks not good, my friend. Hope everything is alright. All the best for 2024.
Ha :) Not noticed myself :)
@@websquadron Seriously, watch YOUR right corner of mouth. So I guess everything is fine over there.
@PicSta ah I see what you mean. I had a brain tumour removed in 1999 and I still have facial paralysis on that side of my face. Sometimes when I talk my mouth doesn’t move much.