The Ultimate Beginners Guide/Tutorial to Google Page Speed Insights
Рет қаралды 13,080
Күн бұрын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
@Andrew-C-Witham 2 жыл бұрын
Great stuff Jack! Every detail that I had not thought of is here. Thankfully you have included a timestamped menu.
@kingpaul4133 2 жыл бұрын
The quality of the content is killer!! What content Jack, everything explained perfectly well and I learned so much from this video... Absolute Banger!!
@yapchenpo95 2 жыл бұрын
Yes! I was looking for this Google page-speed bible! Thanks! Watching it now!
@JackCao 2 жыл бұрын
Awesome! I hope this was helpful. 😊
@RobertOHaver 2 жыл бұрын
I have to say by far your videos are awesome you make everything so easy to understand please keep it up.
@biplabroy8991 2 жыл бұрын
never never never found any youtube video this helpful on page optimization analogy explanations. Thanks a ton Jack. Please make more videos. Super like
@WickyDesign 2 жыл бұрын
Thanks for creating this video! Tons of great helpful content!
@hristiyanzarkov3882 Жыл бұрын
Absolutely insane tutorial, I was able to get a good grasp on this knowledge! Thanks a ton!
@saqibKisana Жыл бұрын
Thank you Jack, For creating such a useful and informative presentation on Google page speed insights. 🙏
@dinukakularathna2824 Жыл бұрын
Great video. Thank you!
@JeanvanWyngaardt 2 жыл бұрын
Big respect for the work you put into these videos. Insanely good!! Thanks again for all the hard work!!
@JackCao 2 жыл бұрын
Glad you like them! 😊 Your are awesome!
@webgeneral 2 жыл бұрын
Man, the content of your videos is so powerful and the editing is off the charts!!
@JackCao 2 жыл бұрын
Thank you!
@zeembry 2 жыл бұрын
Thank you Jack... Amazing Tutorial. I really appreciate your of works... The Best!
@AlexVegamobile 2 жыл бұрын
Great video! Appreciate you making the concepts understandable to laypeople. Keep it up, Jack!
@JackCao 2 жыл бұрын
My pleasure! Glad you find it helpful 😊
@andersa9655 2 жыл бұрын
Thank you, very informative!! :)
@venkatesenkizhapandal2243 2 жыл бұрын
I don't have a super like button. This video is awesome
@RomalBhulani Жыл бұрын
Just one word - Ultimate
@anthofender 7 ай бұрын
Really Really great content, thanks a lot!
@AlexMese 7 ай бұрын
best explanation. thank you
@RomalBhulani Жыл бұрын
Just one work - Ultimate!
@jayamukherjee6433 2 жыл бұрын
A Complete digest on Web Core Vitals ... Great content as always... !!
@JackCao 2 жыл бұрын
Thank you! 😁
@marketingtrench 7 ай бұрын
Jack is the Dad of SEO
@Sammyli99 2 жыл бұрын
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.
@maestrostevens 2 жыл бұрын
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!
@JackCao 2 жыл бұрын
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
@maestrostevens 2 жыл бұрын
@@JackCao I certaily will. Be on the look out for the word "iconic." That's for responding as well.
@alvarojflores 2 жыл бұрын
Long life and prosperity! May the force be with you!
@JackCao 2 жыл бұрын
Thank you! 😊
@andval256 2 жыл бұрын
excellent
@devikaputri7501 2 жыл бұрын
why I just found this video 2 months later :( thank you for sharing this, it's easy to understand!
@JackCao 2 жыл бұрын
I'm glad you found this helpful! I am not sure why KZfaq didn't push this video as well. I thought it was great for beginners to understand Page Speed Insights. 😊
@Leon-ld2rb 2 жыл бұрын
Hey Jack, could you do a video on how you normally optimize the images before turning them into webp.
@dougbeggs3832 2 жыл бұрын
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.
@JackCao 2 жыл бұрын
A lot to explore on this 😁 So, may take time.
@faithnomore101 2 жыл бұрын
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!
@GigaBuzzStore 2 жыл бұрын
He is amazing and generous. He could slice it into 4 separate 9 mins videos instead...
@JackCao 2 жыл бұрын
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! 😃
@JackCao 2 жыл бұрын
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.
@faithnomore101 2 жыл бұрын
@@JackCao Chill down, dont get a heartattack ;)
@GigaBuzzStore 2 жыл бұрын
@@JackCao No problem Jack. Great Job!
@programking3363 2 жыл бұрын
Great boss,, we want 1or 2 video per week about WordPress speed optimization
@JackCao 2 жыл бұрын
I cant only be focusing on Page speed insights. I have covered a lot of it in this playlist already: kzfaq.info/sun/PLaWK8UfrNqw3b89sWgI-DQKhPfZNuo5VO
@DirtyBonerGaMePLAYZz Жыл бұрын
You're a beast
@tamilnadurealestatehub 2 жыл бұрын
Please do complete page optimization video with google page insight and gtmetrix scrore
@uchegbuikenna4901 Жыл бұрын
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.
@introvertmind 2 жыл бұрын
It will be great if you create exclusive in-depth video for optimising website with ezoic ads
@thelongarmmarine 2 жыл бұрын
I’ve enjoyed several of your videos…nice work! As I stumble on from Elementor to, 'X', have you dabbled with ZionBuilder yet? Curious…
@JackCao 2 жыл бұрын
Not yet. I am going to check that out soon. 😊
@jjf609 2 жыл бұрын
Unrelated to this topic but which chat plugin do you recommend?
@kimwold 2 жыл бұрын
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 KZfaq, nobody actually did a video on how the went it and changed this, so frustrating 😩
@gashumba888 Жыл бұрын
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!
@JamesOSullivan-hc8ml Жыл бұрын
What image optimizer do you use?
@heyitisme6434 2 жыл бұрын
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
@JackCao 2 жыл бұрын
Do all of your pages have a 90+ mobile score or is it just the main page?
@heyitisme6434 2 жыл бұрын
@@JackCao all of them has +80.. most of them has + 90
@JackCao 2 жыл бұрын
@@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.
@MdAlAmin-xj1km 2 жыл бұрын
What about Litespeed Cache plugin, if I'm not using Wp rocket. Will you make any video?
@JackCao 2 жыл бұрын
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. 😁
@diogordo_2970 Жыл бұрын
Please how to speed up time to interactive
@sachinsaagar7531 2 жыл бұрын
Hey jack can i use screenshot of fastest theme test result vedio in my blog for demo purpose??
@JackCao 2 жыл бұрын
You can but please link back to my site: jackcao.com/fastest-wordpress-theme/
@jayamukherjee6433 2 жыл бұрын
Which option to go for to counter "Ensure text remains visible during webfont load"
@JackCao 2 жыл бұрын
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.
@tjain90 2 жыл бұрын
👍👍👍👍
@rimonchowdhury1289 2 жыл бұрын
You should upload a WpRocket full Tutorial Video.. please!
@JackCao 2 жыл бұрын
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.
@harrisondoi7697 Жыл бұрын
Hey Jack, If your taking projects on, could you please Lmk, I’d Love to hire you! Thank you
@smsaimoom69 2 жыл бұрын
@Jack Cao Is Accordion a culprit of Cumulative Layout Shift
@JackCao 2 жыл бұрын
Thanks for letting me know. Does it help if you place the accordion element below the fold?
@smsaimoom69 2 жыл бұрын
@@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.
@JackCao 2 жыл бұрын
@@smsaimoom69 Glad to hear that. I guess there were some theme updates in the interim.
@URandomGuy 2 жыл бұрын
What about CLOUDFLARE??
@udinhebeki6213 2 жыл бұрын
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.
@JackCao 2 жыл бұрын
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?
@udinhebeki6213 2 жыл бұрын
@@JackCao Yes, I use for tracking purchase.
@JackCao 2 жыл бұрын
@@udinhebeki6213 Try either perfmatters to delay javascript of your google tag. That will most likely improve your score.
@luiscarlodino2466 2 жыл бұрын
Hello there, how I can test or troubleshoot a live WordPress website without breaking it?
@JackCao 2 жыл бұрын
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.
@rosechance2776 2 ай бұрын
This is still not beginners friendly
@rosechance2776 2 ай бұрын
Same thoughts here.
@ekredel 2 жыл бұрын
great content, but please, please stop saying “so” every few seconds
@JackCao 2 жыл бұрын
Noted!
@JatinderSingh-vg3st 2 жыл бұрын
Whats wrong with so? lol
@bookyodaianimate8982 Жыл бұрын
Watched the video till the end and my only take away is buy wprocket... This is just a 40 minute ad for wprocket.. Useless...
@myteacherdavespanish Жыл бұрын
Great video - thank you!
TobySketchLoose - Artist and Urban Sketcher
Рет қаралды 72 М.
Jack Cao
Рет қаралды 45 М.