The Ultimate Beginners Guide/Tutorial to Google Page Speed Insights
Vložit
- čas přidán 31. 07. 2024
- In this Page Speed Insights Tutorial, I will be simplifying every audit on the testing platform so that we can tackle page speed optimization as a beginner. Page Speed Optimization is not difficult once you understand the basics. So, this Ultimate Beginner's Guide to Google Page Speed Insights will help you grasp the idea of speed optimization without hiring a web developer.
💲 Ad Network )Page Speed Focused): jackcao.com/ezoic
🔨 Page Speed Optimization Tool (Highly Recommended):
👉 WP Rocket: jackcao.com/wprocket
🔨 Free Image Optimization Tools:
👉 Kraken: kraken.io/web-interface
👉 Imagify: wordpress.org/plugins/imagify
👉 Shortpixel: wordpress.org/plugins/shortpi...
👉 Convert JPG or PNG into WEBP: cloudconvert.com/jpg-to-webp
📗 Learn CSS Animations:
👉 www.w3schools.com/css/css3_an...
💕 Page Speed Optimization Resources (Mentioned in the Video):
✅ Case Study - Styles & Bags: • Speed up Your WordPres...
✅ Case Study - Dee Why Skin: • Advanced Google PageSp...
✅ Case Study - • Case Study: Speed Up W...
✅ Speed Optimization Tips: • How to Speed Up Your W...
✅ Playlist: • Site Speed Improvement...
🎓 WordPress Gutenberg Videos:
✅ Create a Magazine Site from Scratch: • Kadence Theme Tutorial...
✅ Create a Next-Level Home Page from Scratch: • Kadence Blocks Pro Tut...
✅ Create a Lead Capture Page from Scratch: • How to Create a Lead C...
✅ Create an Ecom Store from Scratch: • Create an Ecommerce We...
✅ Build Any Page You See from Scratch: • WordPress Tutorial for...
✅ Playlist: • WordPress Tutorial for...
⌚ Chapters (Time Stamps):
0:00 Introduction
3:10 Field Data vs Lab Data
3:45 The 6 Metrics from Lab Data
4:11 First Contentful Paint
5:25 Time to Interactive
6:02 Speed Index
6:27 Total Blocking Time
7:02 Largest Contentful Paint
7:32 Cumulative Layout Shift
7:51 Overview
8:35 Understanding how the web works
10:08 First & Largest Contentful Paint
10:13 Eliminate Render-blocking resources & Avoid Chaining Critical Requests
12:18 Reduce Unused CSS & Reduced Unused Javascript
13:08 Minify CSS & Minify Javascript
13:32 Preloading / Prefectching / Preconnecting
14:11 Preloading Largest Contentful Paint & Largest Contentful Paint Element
14:50 Preload Key Request
15:12 Preconnect to Required Origins
15:34 Avoid Multiple Page Redirects
16:15 Enable Text Compression
16:49 All Text Remains Visible During Webfont Load
17:24 Use Video Formats for Animated Content
17:38 Avoid Enormous Network Payloads
19:06 Total Blocking Time
19:31 Lazy Load Third-Party Resources with Facades
20:29 Minimize Third-Party Usage
22:46 Javascript Execution Time
23:21 Remove Duplicate Modules in Javascript Bundles
23:50 Avoid Serving Legacy Javascript to Modern Browsers
24:16 Avoid Excessive DOM Size
25:29 Minimize Main-Thread Work & Avoid Long Main-Thread Tasks
25:57 Cumulative Layout Shift
26:20 Image Elements Do Not Have Explicit Width and Height
26:57 Avoid Large Layout Shift
27:37 Avoid Non-Composited Animations
28:09 Image Optimization
28:23 Differ Offscreen Images
29:31 Efficiently Encode Images & Properly Resize Images
31:12 Serve Images in Next-Gen Formats
31:56 Gneral Optimization
32:01 Avoid Document.Write()
32:29 Uses Passive Listeners to Improve Scrolling Performance
33:06 Uses Efficient Cache Policy on Static Assets
34:31 Keep Request Counts Low & Transfer Sizeds Small
35:07 Google Page Speed Insights Strategy
37:17 Outro
🎓 More Helpful Videos:
✅ Fastest WordPress Theme: • Fastest & Most Lightwe...
✅ Gutenberg vs Old School Page Builders: • Gutenberg vs Page Buil...
✅ Gutenberg vs New School Page Builders: • Gutenberg vs Page Buil...
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#googlepagespeedinsights #googlepagespeed #pagespeedinsights #googlepsi #wordpressspeed #speedoptimization #jackcao #sitespeed #improvesitespeed
Great stuff Jack! Every detail that I had not thought of is here. Thankfully you have included a timestamped menu.
The quality of the content is killer!! What content Jack, everything explained perfectly well and I learned so much from this video... Absolute Banger!!
never never never found any youtube video this helpful on page optimization analogy explanations. Thanks a ton Jack. Please make more videos. Super like
I have to say by far your videos are awesome you make everything so easy to understand please keep it up.
Man, the content of your videos is so powerful and the editing is off the charts!!
Thank you!
Great video! Appreciate you making the concepts understandable to laypeople. Keep it up, Jack!
My pleasure! Glad you find it helpful 😊
Thank you Jack, For creating such a useful and informative presentation on Google page speed insights. 🙏
Big respect for the work you put into these videos. Insanely good!! Thanks again for all the hard work!!
Glad you like them! 😊 Your are awesome!
Absolutely insane tutorial, I was able to get a good grasp on this knowledge! Thanks a ton!
Yes! I was looking for this Google page-speed bible! Thanks! Watching it now!
Awesome! I hope this was helpful. 😊
Thanks for creating this video! Tons of great helpful content!
Thank you Jack... Amazing Tutorial. I really appreciate your of works... The Best!
Great video. Thank you!
Thank you, very informative!! :)
Really Really great content, thanks a lot!
A Complete digest on Web Core Vitals ... Great content as always... !!
Thank you! 😁
I don't have a super like button. This video is awesome
best explanation. thank you
Just one word - Ultimate
I love your tutorials. I use a lot of them for myself and developers. Save me a lot of time from doing it myself. Highly detailed and your analogies are on point. Got better metaphors than some rappers, lol. I'm hoping to connect with you in the near future!
Thank you for the compliment! Really appreciate it! Looking forward to connecting with you too. When you are ready, my email is jack@jackcao.com
@@JackCao I certaily will. Be on the look out for the word "iconic." That's for responding as well.
Best VID on speed, for a begginer...EVER. Is this solved by NOT having large KB images, hence I noticed that "Photosites" are slow (Beauty has a price) but sites with JUST graphics load quicker, so if you made the Home page load as Purley graphics and deferred loads on all the "compressed photos" that might work too.
Just one work - Ultimate!
Long life and prosperity! May the force be with you!
Thank you! 😊
My biggest site speed suckers identified by GPSI are slow 3rd party url connection to paypal and recaptcha - several seconds is common and sometimes up to 8 seconds on a lean homepage. Maybe a video sometime on most efficient payment and security options for woo that don't kill load speed.
A lot to explore on this 😁 So, may take time.
The quality of your content ist astonishing!
I cant imagine how much time you invest for such videos.
Huge respect and a bigger thank you Jack!
Cant wait to see your channel explode (what it deserves).
Maybe you can speed that up with an coop with a big channel?
8k followers are a shame for such content!
He is amazing and generous. He could slice it into 4 separate 9 mins videos instead...
Thanks a ton! Yeah, I spent a lot of time on this. It took about a week and a half to complete this video. But I am glad you enjoyed it. Haven't done coop before, but will look into it! Thanks for your suggestion! 😃
Thanks Marek! My apologies, I was so busy past couple of weeks. I saw your other comment but didn't have time to respond. Will do so in a while.
@@JackCao Chill down, dont get a heartattack ;)
@@JackCao No problem Jack. Great Job!
why I just found this video 2 months later :( thank you for sharing this, it's easy to understand!
I'm glad you found this helpful! I am not sure why CZcams didn't push this video as well. I thought it was great for beginners to understand Page Speed Insights. 😊
Jack is the Dad of SEO
excellent
Great boss,, we want 1or 2 video per week about WordPress speed optimization
I cant only be focusing on Page speed insights. I have covered a lot of it in this playlist already: czcams.com/play/PLaWK8UfrNqw3b89sWgI-DQKhPfZNuo5VO.html
Hey Jack, could you do a video on how you normally optimize the images before turning them into webp.
You're a beast
Please do complete page optimization video with google page insight and gtmetrix scrore
It will be great if you create exclusive in-depth video for optimising website with ezoic ads
How do I set a fixed width and height for that container? 27:34 ??? I already did it on elementor, gave the logo width and height, but it's showing on pagespeed sights that I need to give my logo width and height, I can't find this anywhere on CZcams, nobody actually did a video on how the went it and changed this, so frustrating 😩
Please how to speed up time to interactive
Thanks Jack. Nice video. I was able to get my speed to 100% without paying anyone. However, my web vitals is still failing even when am having 100% speed. I saw that initial server response time is still 0.85
Could it be the problem? And how do I reduce that.
What image optimizer do you use?
Unrelated to this topic but which chat plugin do you recommend?
I’ve enjoyed several of your videos…nice work! As I stumble on from Elementor to, 'X', have you dabbled with ZionBuilder yet? Curious…
Not yet. I am going to check that out soon. 😊
👍👍👍👍
Hey jack can i use screenshot of fastest theme test result vedio in my blog for demo purpose??
You can but please link back to my site: jackcao.com/fastest-wordpress-theme/
What about CLOUDFLARE??
What about Litespeed Cache plugin, if I'm not using Wp rocket. Will you make any video?
Lightspeed cache plugin works perfectly if your web host uses litespeed technology. WP rocket is more of a general caching plugin that works with all hosting. Unfortunately my web host is using nginx. I am considering a switch of web hosting. If I have the opportunity to work on a litespeed host, I will do a video about it. 😁
Thank you for this informative video. Loved everything about it.I have a question that I was unable to find a answer for the longest time ever. When I audit my site with google page speed, I get +90 both in mobile and pc. However, in google search console I still get warnings in page experience. Also, it shows that my cls and lcp is poor, yet google page speed says otherwise. Please help me find an answer. Thanks
Do all of your pages have a 90+ mobile score or is it just the main page?
@@JackCao all of them has +80.. most of them has + 90
@@heyitisme6434 Let's solve the LCP first. Do your pages have featured images at the top? If yes, try removing them. Leave the header of your content at the top. That would probably solve the LCP issue.
Which option to go for to counter "Ensure text remains visible during webfont load"
Make sure to have a "fallback font" that is websafe. For example "Arial". Alternatively, if it is really a hassle, just use a websafe font "Arial" and you won't have this issue.
You should upload a WpRocket full Tutorial Video.. please!
Actually, there is not much to talk about in WPRocket. The best setting is to turn everything on, but sometimes it breaks the site. So the best setting is really to try and test every feature to see if it breaks your site, and if it didn't then keep that feature on. 😊 I think that sums up the WPRocket tutorial.
@Jack Cao Is Accordion a culprit of Cumulative Layout Shift
Thanks for letting me know. Does it help if you place the accordion element below the fold?
@@JackCao yeah. I placed the accordion below the fold. But my problem is solved. I don't know if kadence glitched or something on that day. My headers and footers were shifting. My cls was around 5/6. But a few days ago the shifting stopped and my page is scoring 99 now.
@@smsaimoom69 Glad to hear that. I guess there were some theme updates in the interim.
So. Jack. You do not refer yourself as a web designer or developer but a just a WordPress Specialist, right? I really find that many digital marketers are finding creative ways to market their services and just curious if that's your strategy as well. I am a marketing web designer looking for inspiration. Thanks!
Hello there, how I can test or troubleshoot a live WordPress website without breaking it?
You will never know when your website will break. That's why you have to test one variable at a time so you know what is breaking the site.
Hey Jack, If your taking projects on, could you please Lmk, I’d Love to hire you! Thank you
Hmm..I got bad score after installing google tag. Before installing my score are good but after that from 90 it got to 50. Does this normal or something else need to change? Because I watch most of your video nothing mentioning about google tag on it.
Google tag is a third party code and whenever you need to draw information from a 3rd party source, it will usually slow down your site. What do you need Google tag for? Tracking?
@@JackCao Yes, I use for tracking purchase.
@@udinhebeki6213 Try either perfmatters to delay javascript of your google tag. That will most likely improve your score.
This is still not beginners friendly
Same thoughts here.
great content, but please, please stop saying “so” every few seconds
Noted!
Whats wrong with so? lol
Watched the video till the end and my only take away is buy wprocket... This is just a 40 minute ad for wprocket.. Useless...
Great video - thank you!