How to Boost WordPress Page Speed Optimization 2024 - Elementor and Non Elementor Sites - Free Tools

Подписаться 69 тыс.

Просмотров 49 тыс.

50% 1

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 RU-vid 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

Хобби

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 165

@djmonty8137 15 дней назад

Thanks a lot men! Wish you all the best with your works. much love!

@gregorminko7002 6 месяцев назад

Yes! All the best, Imran. And thank you for doing what only you do best. You rock 😊

@NeilSnapePhotography 6 месяцев назад

All the best in the New Year. Always good advice. With both of my websites, after carefully following your RU-vid 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.

@maddy1mymk 6 месяцев назад

Happy New Year Imran🎉, thanks so much for the amazing content you do. Your work is amazing and effective.

@pixelgap 6 месяцев назад

Great video. To the point. Thank you Imran

@devonrd 5 месяцев назад

These tips are truly amazing. Thanks a lot!!

@livezen8223 6 месяцев назад

Amazing video... Very helpful video...thankyou.... Happy New Year 🎉

@leonardofavaretto2289 6 месяцев назад

Imran, have an amazing new year, man! And your family too! Thanks for all the knowledge you share here!

@websquadron 6 месяцев назад

Happy new year!

@mimi0615 5 месяцев назад

As always, great video !

@tonyfuckinchang 5 месяцев назад

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

@alimranmayeen9156 6 месяцев назад

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.

@websquadron 6 месяцев назад

Same to you!

@davidmarek72 6 месяцев назад

Thanks for this Imran, great stuff.

@user-br1qt8if2n 5 месяцев назад

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.

@websquadron 5 месяцев назад

Wow, thank you :) That means a lot.

@sy-shahadot 6 месяцев назад

Thank you for your amazing tutorial

@MelTaylor 6 месяцев назад

Happy New Year to Imran and family. Grateful for all the guidance and knowledge you have shared over the years.

@wgm247 6 месяцев назад

Brilliant. 🎉

@edywerder 6 месяцев назад

First video I watched in 2024!!! Great video, Happy new Year Imran!!

@websquadron 6 месяцев назад

Happy New Year! Stay safe!

@franshescomviran5741 5 месяцев назад

Same here!

@user-hv7zs2oe7k 6 месяцев назад

great sir love you from Pakistan

@ngocnguyensimple 6 месяцев назад

Thank your guide! Very good and useful for us!

@websquadron 6 месяцев назад

My pleasure!

@FANTIE 6 месяцев назад

*Happy New Year Imran!*

@QuaverloveStudio 6 месяцев назад

ppy New Year, Imran. Great overview! Pointers worth acting on, going forward (note to self).

@websquadron 6 месяцев назад

I hope they help :)

@QuaverloveStudio 6 месяцев назад

@@websquadron, I've started implementing them already. um.... "Happy" New Year, even.

@taherc Месяц назад

Thank you so much Imran! You've helped me so much

@websquadron Месяц назад

Glad to hear that!

@lovietech3885 28 дней назад

Amazing!

@carolreed8056 3 месяца назад

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. 😅

@websquadron 3 месяца назад

I was a big supporter of WPMeteor but I have my reservations now if it's used on pages with Carousels or Videos.

@deanazelinova5103 6 месяцев назад

Happy New Year, Imran!

@websquadron 6 месяцев назад

Same to you!

@RaeStanton2481 5 месяцев назад

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!

@websquadron 5 месяцев назад

Just go for Woff2

@christianlecuyer6380 4 месяца назад

Great!

@visualmodo 5 месяцев назад

Truly good work! =DDD

@ylyaskudratullayev 5 месяцев назад

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

@JohnXionidis 6 месяцев назад

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!

@websquadron 6 месяцев назад

That one is an old one - but the one you need to use is on the website.

@diana2ke 6 месяцев назад

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!

@websquadron 6 месяцев назад

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.

@TimTop321 3 месяца назад

nice!! how to set WP Fastest Cache preloader🥰

@youtubevideo2341 6 месяцев назад

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.

@websquadron 6 месяцев назад

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 :) :)

@robertrado7576 6 месяцев назад

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.

@websquadron 6 месяцев назад

You can use all of the non-Elementor tips :)

@robertrado7576 6 месяцев назад

@@websquadron yeah, I did, but it didn't help. Thanks anyway!

@gabz1989a Месяц назад

Elementor specific Tips I believe these settings need a re-visit as they have changed things around, a lot

@websquadron Месяц назад

It will be in Jan 2025 as I suspect more improvements from now until the new year.

@UnKnownGK 3 месяца назад

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.

@websquadron 3 месяца назад

I had some code in my FB Group that I need to relocate

@luxmediq 6 месяцев назад

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..

@websquadron 6 месяцев назад

How slow is it currently and can you send me a URL for a specific product page?

@dominikmikula 5 месяцев назад

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.

@petebutler2983 3 месяца назад

Very useful content Imran. Is there anything to combat low text-HTML ratio?

@websquadron 3 месяца назад

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 :)

@petebutler2983 3 месяца назад

@@websquadron Thanks Imran 👍

@My-WPs 3 месяца назад

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?

@websquadron 3 месяца назад

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.

@My-WPs 3 месяца назад

@@websquadron, thanks for your reply. I am thinking which one is best for page loading speed measured in front-end?

@JocelinCarvajal 6 месяцев назад

Great video as always! Question, Elementor allows me to add custom code, can I use that instead of code snippets?

@websquadron 6 месяцев назад

I always find that using Code Snippets is easier to manage when you have many codes.

@JocelinCarvajal 6 месяцев назад

@@websquadron I see. Will still stick with code snippets

@dpristavec 6 месяцев назад

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.

@websquadron 6 месяцев назад

Litespeed is great and definitely recommended if you’re on a LS server

@kelleywilson6926 4 месяца назад

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!

@websquadron 4 месяца назад

Quality differences are minor. With BulkResize I have more control over the output.

@my-2cents 6 месяцев назад

HI IMRAN is your system better than seraphinite accelerator? should i apply your suggested changes or continue with seraphinite accelerator

@websquadron 6 месяцев назад

It’s up to you but I prefer mine otherwise I would have covered SA :)

@WTPleo 3 месяца назад

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?

@websquadron 3 месяца назад

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.

@WTPleo 3 месяца назад

@@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🙏

@EPHONIC Месяц назад

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?

@websquadron Месяц назад

Not really unless you have some inbuilt performance checker.

@EPHONIC Месяц назад

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!

@educationforever314 4 месяца назад

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.

@websquadron 4 месяца назад

Is that with carousels or can you paste the error?

@marcba 6 месяцев назад

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!

@websquadron 6 месяцев назад

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.

@isischeca7722 3 дня назад

Hello Imran, very grateful to find you... I am writing to you from Google Translate because I do not speak English, you can imagine how interesting I found the information in your video, it is the best!! thanks for that. I am delighted with the size of my images when converting them to webP format but I have a question, what to do with browsers that do not support it? The truth is I don't know what to decide about this because I want my website to reach any browser...I would appreciate it if you could enlighten me a little on this topic...my greetings and a thousand thanks.

@websquadron 3 дня назад

Very few browsers don’t support webp. Which ones were you worried about?

@LiamGardner-kb3xe 2 месяца назад

Do you add the code snippets as PHP or CSS?

@websquadron 2 месяца назад

I add as PHP into Code Snippets.

@gieselman 4 месяца назад

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?

@websquadron 4 месяца назад

You could do that :) I just like having CS as easier to manage

@gieselman 4 месяца назад

@@websquadron amazing and thorough tuts dude. Thank you.

@jeffdp23 6 месяцев назад

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?

@websquadron 6 месяцев назад

WordPress will always show prompts like that, for instance they don't like it if you only have 1 Theme. No need to worry.

@juanb.274 5 месяцев назад

not all hosting plans have this type of cache

@websquadron 5 месяцев назад

Agreed, but that's one of the things I check fir our sites or client sites.@@juanb.274

@jimkody5288 22 дня назад

Any optimization recommendations for a site using Bricks instead of Elementor?

@websquadron 22 дня назад

See my link as that contains similar codes for Non EL sites too

@triciaisham4701 5 месяцев назад

What's the difference between using Elementor's Custom Code and using the Code Snippets plugin?

@websquadron 5 месяцев назад

I prefer to use Code Snippets to keep things clean and easier to manage

@user-jt4wx8ix4v Месяц назад

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

@websquadron Месяц назад

You may need to ask AI to generate some code to stop it applying.

@perinho5349 5 месяцев назад

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...

@websquadron 5 месяцев назад

Yup, server speed is always a pain.

@perinho5349 5 месяцев назад

@@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!

@tal7atal7a66 6 месяцев назад

❤

@nmdk-design 4 месяца назад

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?

@websquadron 4 месяца назад

Depends on the image size. Try it with a larger image.

@troyjusthutz 6 месяцев назад

Just discovered your video, this was SO good. No vague talk, no maybe this might work...simply got to the facts. Well done.

@websquadron 6 месяцев назад

Welcome aboard!

@ShyArchitect 5 месяцев назад

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?

@websquadron 5 месяцев назад

Are you using other plugins/tools?

@ShyArchitect 5 месяцев назад

@@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?

@refluxroadmap 3 месяца назад

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?

@websquadron 3 месяца назад

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

@refluxroadmap 3 месяца назад

@@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.?

@refluxroadmap 3 месяца назад

@@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?

@nikasiradze13 6 месяцев назад

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

@nikasiradze13 6 месяцев назад

By the way, Happy New Year, Imran! This video is fantastic, probably the best tips, and most importantly, everything is free! Thanks for that!

@websquadron 6 месяцев назад

Thanks - of course you can use them together :) Wishing you a great year too!

@EricCheong0208 6 месяцев назад

Thanks! Could not add woff2 files to Media. "Sorry, you are not allowed to upload this file type" Where to enable it? 🙇🙇

@websquadron 6 месяцев назад

Are you adding via Custom Fonts? And who is your host provider?

@elflaquito6537 2 месяца назад

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 🙂

@websquadron 2 месяца назад

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

@elflaquito6537 2 месяца назад

@@websquadron through which plugin do you activate it? Can you do it for specific images?

@choro7atwebdz 8 дней назад

My website slow because use dynamic content if there is any way to fix that?

@websquadron 8 дней назад

Unsure as you’d need someone to have a look

@24hotspot14 6 месяцев назад

Nice tutorial How to get the code snippet please

@websquadron 6 месяцев назад

The codes link is in the description: learn.websquadron.co.uk/wordpress-page-speed/

@24hotspot14 6 месяцев назад

@@websquadron thanks

Месяц назад

Appreciate the video, but for me any way, it tanked all my page speed scores compared to WP rocket 🙁

@websquadron Месяц назад

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.

@TimTop321 3 месяца назад

i use bricks builder, after set, website load very slowly😢

@websquadron 3 месяца назад

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?

@user-em7nc5eo9z 5 месяцев назад

treasure is mine of one peiece

@SuperABOALAA 4 месяца назад

you're the best WordPress youtuber you know that right ?

@PicSta 6 месяцев назад

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.

@websquadron 6 месяцев назад

Ha :) Not noticed myself :)

@PicSta 6 месяцев назад

@@websquadron Seriously, watch YOUR right corner of mouth. So I guess everything is fine over there.

@websquadron 6 месяцев назад

@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.

@user-em7nc5eo9z 5 месяцев назад

In my elementor there is no option for optimized DOM output , i cant find it

@websquadron 5 месяцев назад

I don't understand?

@user-em7nc5eo9z 5 месяцев назад

In Elementor > Settings > Features > Optimized DOM Output , this option is not visible in my elementor

@educationforever314 4 месяца назад

@@user-em7nc5eo9z what is your elementor version?

@carolreed8056 3 месяца назад

@@user-em7nc5eo9zI don't have that option available either.

@robertrado7576 6 месяцев назад

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 :(