How to Boost Page Speed Optimization Wordpress for FREE in 2023 | Insight Score Optimisation.
Vložit
- čas přidán 19. 05. 2024
- 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...
Don't leave these steps until the end - or when you are staring at dismal Mobile and Desktop Page Speed Scores. This is How to Boost Page Speed Optimization Wordpress for FREE in 2023 | Pagespeed Insights Optimisation.
This is the MUCH Improved and Simple 2023 Page Speed Booster Tutorial for 2023.
You can skip the Elementor Settings if you want, but they are important and could relate to other Wordpress Page Builders.
00:00 Intro
00:54 Elementor Settings
01:39 Elementor Experiments
01:54 Using Custom Fonts
02:57 Wordpress Media Settings
03:31 Next Generation Format Images
Free WebP Converter: bulkresizephotos.com/
04:40 Scale and Crop Images and Mobile Versions
06:53 Basic Page for Testing the Score
07:52 PRE-OPTIMISATION Page Speed Score
08:53 My New Optimisation Plugins
09:12 Why am I not using Autoptimize anymore?
09:59 The Optimisation Plugin Settings
12:03 Code Snippets
All of the codes:
This includes codes to be used for all Wordpress and not just Elementor.
websquadron.co.uk/page-speed-...
12:22 Remove Google Fonts
12:53 Ensure the Webfont is Loaded
13:35 Stop Lazy Load
14:13 Remove Unused Javascript
14:39 Fix Explicit Image Width and Height
15:07 Remove Gutenberg CSS
15:56 POST-OPTIMISATION Page Speed Score
17:03 You should follow these steps BEFORE you start building.
Book your 1-2-1 Consultation: websquadron.co.uk/socials
Shorter 30 min sessions are available.
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
websquadron.co.uk/page-speed-performance-wordpress-code-snippets/
Thanks so much, Imran! Went from 37 to 58 -79 on Mobile and 65 to 87 on Desktop!
One more question, Did you stil keept enable NGINX Direct Delivery & Memcached from SiteGround/Speed/Cache?
thanks!
is it better to keep every snippet separate, or to paste all code-snippets in one wp codesnippet file?
@@wario25vienna Sometimes you may to disable some if there's any conflict with a plugin etc so control can be great
Is there a way to load/install Google fonts to our server if I am not using Elementor? On this one site, I am using Gutenberg and Spectra blocks along with Astra Pro theme.
We must protect this man at all costs. Brilliant
I am so happy to have found you. Thank you for the pure knowledge drops. You've helped to clear up so many subtle Elementor issues that kept me from wanting to work with it. And the small tweaks to the WordPress settings are so helpful. LEGEND
Sweet. Thank you, Imran! And thank you for the code snippets snippets! When I'm unhappy in my work, I come to your videos to lift myself up and feel motivated again! I also get a ton of new ideas to think about!
My pleasure
You are So right! Imran is the ultimate motivator!
This is an incredibly valuable video and I appreciate that you keep things so straightforward. Thank you so much!
thanks for the amazing video i had been troubleshooting this clients site went from 54 on mobile to 84 and 73 on desktop to 98 this is amazing bro am going to keep using this method as always appreciate the work you put into getting us these resources man
You're the boss! This is going straight into my SOPs.
For whatever reason my site dropped to a miserable 45 Mobile/74 Desktop.
After most (not even all--mostly media files not being resized yet) of these changes, it's now at 89 Mobile/90 Desktop.
Incredible! Thanks so much. Love your presentation as well. Subbed!
Holy smokes man you have no idea how much you saved me, this works beautifully. thank you
I went from 4.4 FCP to 2.2 FCP, from 40 Performance to 91 performance, and nothing is broken. hahaha.
I. Am. Blown. Away. WOW! I keep bookmarking your content on page speed optimisation but couldn't get the chance to actually sit still and work through the steps until now. Glad I invested the time today, this is going to save me so much PAIN when dev sites are ready to go live. Awesome steps....a bit of cache clearing and everything is EXACTLY as you've demo'd. Thank you Imran, you are a legend!!!!!! 🙏
Thanks for this video Imran! I was struggling with my mobile speed for weeks. And yes I tried a lot of different plugging. After watching your video I went from a mobile score of 48 to a prefect 100%. Amazing.. Keep of the fantastic work...
Amazing! It's the first solution that actually works. I used a plugin from my own host, made for Wp, but I still couldn't get full optimization. There was a lack of adjustments on the server itself, which I couldn't make. I did a test with these recommended plugins and reached 99%! Really worth it guys!
Imran, this truly is very very valuable information. Thank you so much for this one.
You have saved me so much time and hair pulling out. Wow, your tutorials are absolutely amazing.
Thanks Imran, I've never found an impactful page optimization process that yields as this one.
Hi Imran, You are a godsent! I was struggling with my site until i came accross your videos! Keep up the good work.
Glad to hear that
This video is a freakin banger! I was re-creating my website and realized I hadn't done any speed testing whatsoever. So I performed a PageSpeed Insights video and my score was 35 on Mobile and 65 on Desktop. I followed the instructions on this video to a tee, and mind you this site was already developed. I installed the plugins, made all the changes, purged all the cache, I'm now sitting at scores of 92 on Mobile and 99 on Desktop. Thanks!
Excellent and really actionable tips. Thanks a bunch mate! It does what it promises! Chapeau!
Imran, thank you for this video at this time. I was preparing to rebuild a website and had almost decided against a fresh WP install. After seeing this and how the plugins/snipets worked, I will be reconsidering my approach. Thanks again!
You are most welcome
OMG YOU JUST SAVED MY WEBSITE AND LIFE!!!!!!!! YOU'RE THE BEST, like and new subscriber and for sure I'll recommend your channel!
Hey Imran, I just wanted to drop by and express my sincere gratitude for your outstanding video! You truly have a gift for explaining complex concepts in an easy-to-understand manner. Prior to watching your video, my score was below 74%, but thanks to your guidance, it shot up to a perfect 94% in no time! Your dedication to helping others succeed is truly commendable, and I can't thank you enough. I eagerly await more of your fantastic videos and wish you all the best for your future endeavors!
This is what I love to see :)
So glad the improvements worked for you.
Do share with your friends.
Thank you very much, after thousands of tutorials and watching videos, this is the definitive one. And let me say that sometimes your information is very dense, but this video is pure gold, thank you very much! From 45 to 93 on mobile
Glad it helped you.
As for the 'dense' comment - that's what you call a personal attack onto me and my approach - so please feel free to unsubscribe.
Great tutorial Imran! Thank you.
Went from 54 to 92 on Mobile and 75 to 88 on Desktop! Thanks so much!
Woop!!
I find this so useful, will try this out in my two latest websites. Thanks Imran.
Great informative video as usual Imran, will be giving this ago on my site.
So much help for beginner developer! Big thanks!
You are a gem, thank you so much Sir. Huge respect for you.
🤯Thank you Imran! Lot's of great info
OMG Thank you! I have speed up my site and my clients site..
The king is back. :)
Thank you.
JUst Subscribed mine went from an 80 to 99 you are life saver man
Great video !!! I had to learn all of this the hard way. Thanks for your videos.
Thanks Imran for this awesome vid. Following your advice I took a site from 65 on mobiles to 98 and what was 82 on desktops to 100. Amazing!
Nice work!
Awesome information Imran, thanks brother!
This video is really great. First Class!!!
Thanks a ton!
Thank you Imran! Much appreciated!
Dude you're legend, thanks so much!
I’m now better then most web developers. Thank you Imran.
This is quality man!!!
Dude, you are the GOD in terms of WEB site building and optimizing it, so passionate. My mobile score was around 70 now is 97. I don't have enoght words to describe my gratitude to you. God bless you and your family :)
Love it when I see progress!
Imran you are a legend, been trying to improve on mobile page speeds for so long and with not much success, followed your steps and now now have 100% performance. I've never seen this before, thanks buddy. Your videos are the best out there when it comes to elementor and problem solving. Keep the value coming my friend!
Great 👍
Well done. You're doing the hard work - I'm just the guide :)
Would you run Siteground Optimizer Cache plugins as well as these plugins recommeded in this vid?
@@petebutler2983 No. Deactivate SG Optimizer. Check the score with it, then remove SG Optimizer and do the video steps and then check again.
Make a backup first.
@@websquadron Will do TY 👍
You Rock as usual! Thank you!
Thank you so much for the amazing content & training' Imran 🙂
My sites have hat terrible load times.
Subscribing this video was gold.
Thanks 👍
Cool video and very informative
Gems dropped all through the video. Didn't and couldn't even use timestamps. Too much value to skip any part of the video. Thank you for sharing.
Big Hugs!
My webby went from 70 - 95... Wow.
Thanks so much!
Very usefulk as always. Many thanks Imran
Wow dude awesome vid.....Im no Wordpress Pro, but have been using it for a few years now and this was extremely informative.
Glad it was helpful!
The most amazing tutorial
OMG best vídeo about wordpress optimize on YT
Let others know :)
Thank so much !!
Im also with siteground and following your advice went from 66 with page speed to 95- very happy, many thanks
Nice work!
@@websquadron I'm also on Siteground. What do you suggest in regards to their caching and speed plugins? Do you add caching along with the setup you have here in this video? Great stuff, thanks for all you contribute!!
OMG 🤩 I am blown away by the results!! I went from below 50 to 93 on mobile and 98 on desktop. I've tried so many settings and plugins but nothing worked like this!!! Thank you!!!!
And that is the kind of thing that makes all of the effort massively worth it!
Got a 100!
Perfect solution. Couldn't find anything like it on the web. Whenever I searched for" The best plugins for....", dozens of plugins recommendations pop-up in front of me by the bloggers trying to make some commission. But hey, I need to know which one or two plugin I need to install. And that's what you have done bro!
Hats Off!
Glad it helped!
killed it again! you help me every upload!!
Awesome Mimi!
extraordinary!!!
OK, I set up a test site and rant through your example and got just about the same results. So I went to a site that I've been developing and retro added the plugins, ftp'd all the images down, then ran them through Bulk Resizer, uploaded them, then ran a query to change all '.png' to '.webp', and I'm getting 97-100 on mobile and desktop without doing any more tweaking. This is fantastic.
I've always looked at tuning wordpress as a bit of a black art, but your tutorial fixes 95% of most peoples issues and it's so simple! Thanks Imran for a wonderful tutorial.
So glad you kept the faith :)
Love it!
Thank you It really Helped from 6 to 59 !!!!!
You're welcome!
I'm (hopefully) going to have a blast tomorrow testing these on some client websites. 😊 Thanks Imran!
Make sure you get backups first.
See some of the results from commenters that have seen big improvements. Of course a lot will depend on the layout of the pages too.
@@websquadron Some quick testresults on my personal page:
Pagespeed insights went from 74 on mobile to 99. Desktop's at 100.
Pingdom went from 80-something (I think) to 98.
GT Metrix is at 100/99 now.
I haven't used Phastpress, because my scores went down a notch instead of up. So I stuck with WP Fastest Cache.
Installed WP Meteor.
And only used the code snippets "Remove Unused JS".
Oh and it was on the Enfold theme. On a shared hosting service.
Now I can't wait for a potential client to come along and say: "Our website has low performance scores, but our original designer says they can't be improved...".
"Well," says Ralf: "Let me have a crack at that..."
So thanks again, Imran!
@@RalfvandeSand Awesome Ralf :)
The tips are easy to pick and choose where relevant.
DUDE! this is amazing! I just got almost 100 in everything after following this video. I feel like I just gave my site a shot of steroids. Thanks! You're a life savior my friend!
Awesome!
Works for me, awesome :)
Great tips! It worked!! Thanks!
Had I known I needed to do this, I would have built my site this way! GRRR I’m crushed 😢 and hoping these plugins help. Still getting some green though on my page tests just not 100 score. Mobile needs a bit more work. Good info.
Thanks, these are some great tips, went from 40 on mobile to 93
Fantastic!
awesome, thank you it's work
Thanks a lot 🙌🏻
17:33 This part is funny. Great vid!!!
Thank you very much. 👍
thats great İmran , thanks
Always welcome
Great video!!!
Great Video!
😂 well I guess I’m in for a world of trouble because I’m halfway through my build 😬. I will for sure implement everything that you suggested. I hope that there are more videos with you going through all of these steps in more detail so that I can make sure to do it right. Thanks a ton.
Unfortunately for me the "Explicit Fixed Width and Height" broke my sticky header so I had to deactivate it.
Amazing video! In my opinion, the simplest and most effective approach to achieving a top page speed score is to use a lightweight theme or page builder.
Yup :)
Hehe. Bricks wins on that front :)
Some tips from here can be applied when the score drops a little even with Bricks :)
Hero, respect
Thanks bro, it works.
You're welcome!
Thank you for the lessons! At 76 I find learning WordPress and elementor a lot to take in. Sorry I cannot afford your elementor course! Thank you again! Mike
I understand :)
This is really amazing and informative video you awesome
Glad you liked it
Awesome Boss. From Bangladesh.
Thanks. This has actually helped.
Awesome.
Look forward to hearing about your results.
@@websquadron The plugins worked brilliantly - does what Siteground Optimiser claimed to do but doesn't. Hit all green on GT Metrix. Not 100% but still struggling with image management.
Excellent, once again. How about the purge website snippet that was recommended in the previous tutorial? Not needed anymore? I'm asking because you speak about it at some point in this tut. Thanks mate. Always brilliant!
Yup
It’s in the link.
Go to that page and it’s at the bottom
@@websquadron Thanks for the reply Imran. But should i also use that snippet or it isn't needed anymore?
I think I have become addicted to your educational videos.🤩
I have a very good idee, what do you think about creating 2 images for same product or post, ex. The first on is default (normal size), the second is very small size image, like 200*150 px.
with dynamics, I show the default image on the product page and the small one on the product grid or post loop.
Indeed you could try that with some testing.
Just make sure it pulls the right image.
But then again, if it's not affecting the Page Speed, maybe you don't need to out in too much effort :)
This is great, Imran. Super helpful as always. Question: Is there any way to build a site locally (I use a Mac and run MAMP) on my computer and have any indication on how it may perform when moved to a live server? I prefer to work locally for most of the work but have no way of knowing how things pan out. Thanks!
Tricky, unless you can open the site in Google Chrome and check Performance there.
Thank youuuuuuuu😭😭😭😭❤️❤️❤️
Awesome
Love this video Imran! You keep saying 'do this before you start building', so I'm wondering: what tips would you have if you want to update/improve a current, earlier build, website? How would you deal with all the older images in jpg and png? How would you deal with it already being build with Google Fonts? Would love to hear what you would do!
It can be tricky with a site that's already built.
1. Make a backup/staging site.
2. Perform the steps I outline 1 by 1.
3. Check the site at each step.
4. Keep making backups after each stage.
5. Repeat Steps 2-4.
I would download the images and then. convert to WebP and add them back in, or use a Bulk Image optimiser plugin.
I wold still add the custom fonts and then painfully make sure they are used for each heading text etc.
This was my problem as well! I'm optimizing a company's site that was already built a long time ago, and none of the images are WebP, and all the text is from Google Fonts. This is going to be an arduous process. :| But I'm so glad @websquadron responded, so I know what to do!
Thanks!
bring this king a crown 👑
BRILLIANT!!! I have implemented half of what was shown and already seen significant improvement in my site speed! Only thing is - with the Code Snippets, my list of options to check on/off is completely different to yours under the All Snippets tab???
Hmmmm.... they should be the same
Thank you Irman for another juicy tutorial! Do you recommand reducing size and quality of JPG or PNG images before converting to WebP?
Nope. Just convert. Then Crop and Scale in the Library.
Thank you so much!
No worries!
Hi, this is a great video, thanks for the effort that's gone into it! I wondered if you could help with an issue when I turn on WP Meteor and follow your instructions, all of my buttons and links become 'un-clickable' on my site?
The delay by WPM might be too severe. So lower the setting.
What a brilliant video, and it works! One question for the room. On a folio site with shit tonnes of photography, is it better to leave lazy load enabled?
When you click the link for the Snippets, you'll see a version of the Lazy Load code where you can leave all images set as LL and then only stop LL for the 1 image (that may be in the Hero Banner).
i went from 47 to 98 on mobile , well, this is something
thank you so much
Awesome Bebe.
Always make a backup before using these tips in case any affect your site.
@@websquadron for sure ,thx for advice. Keep doing a great job man 🙏
All The Problems Solved in 19 Minutes👌
Nice :)
Do share in other Groups where you think it will be useful.
@@websquadron Already Sent. It will Surely be Helpful for alot of my friends!
Today is my second time watching this video because it is really important. Why do a lot of people suggest lazy load, and why do I want to lazy load some pictures, and some not?
Because of the first few images are lazy Loading then it creates a delay before they are fully loaded and this affects the page speed.
Hi loved video just wanted to ask can this method be applied to an existing website running elementary?
It can, but take a backup first and work through he tips one by one.
Great!
very informative