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):
🔨 Page Speed Optimization Tool (Highly Recommended):
👉 WP Rocket:
🔨 Free Image Optimization Tools:
👉 Kraken:
👉 Imagify:
👉 Shortpixel:
👉 Convert JPG or PNG into WEBP:
📗 Learn CSS Animations:
👉
💕 Page Speed Optimization Resources (Mentioned in the Video):
✅ Case Study – Styles & Bags:
✅ Case Study – Dee Why Skin:
✅ Case Study –
✅ Speed Optimization Tips:
✅ Playlist:
🎓 WordPress Gutenberg Videos:
✅ Create a Magazine Site from Scratch:
✅ Create a Next-Level Home Page from Scratch:
✅ Create a Lead Capture Page from Scratch:
✅ Create an Ecom Store from Scratch:
✅ Build Any Page You See from Scratch:
✅ Playlist:
⌚ 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:
✅ Gutenberg vs Old School Page Builders:
✅ Gutenberg vs New School Page Builders:
__________________________________________________________________________
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
best explanation. thank you
Really Really great content, thanks a lot!
Jack is the Dad of SEO
Hey Jack, If your taking projects on, could you please Lmk, I’d Love to hire you! Thank you
Absolutely insane tutorial, I was able to get a good grasp on this knowledge! Thanks a ton!
What image optimizer do you use?
Great video. Thank you!
Watched the video till the end and my only take away is buy wprocket… This is just a 40 minute ad for wprocket.. Useless…
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!
Great video – thank you!
You're a beast
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.
Thank you Jack, For creating such a useful and informative presentation on Google page speed insights. 🙏
Just one word – Ultimate
Just one work – Ultimate!
I don't have a super like button. This video is awesome
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 YouTube, nobody actually did a video on how the went it and changed this, so frustrating 😩
never never never found any youtube video this helpful on page optimization analogy explanations. Thanks a ton Jack. Please make more videos. Super like
Unrelated to this topic but which chat plugin do you recommend?
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.
excellent
👍👍👍👍
You should upload a WpRocket full Tutorial Video.. please!
Hey Jack, could you do a video on how you normally optimize the images before turning them into webp.
@Jack Cao Is Accordion a culprit of Cumulative Layout Shift
Long life and prosperity! May the force be with you!
why I just found this video 2 months later 🙁 thank you for sharing this, it's easy to understand!
Thank you Jack… Amazing Tutorial. I really appreciate your of works… The Best!