Intro to Shopify Speed Optimization 2024 - The New Performance Dashboard & Core Web Vitals

preview_player
Показать описание
Explaining Shopify's new Web Performance Dashboard and Google's Core Web Vitals (CWV) in the context of Shopify.
🔗 LINKS

Shopify has replaced the lighthouse speed score with three new metrics - Loading Speed, Interactivity, and Visual Stability.
You can click into these to see more details in the new Web Performance Dashboard (or go to Analytics - Reports - Performance).

Just as with the old speed score (based on Google Lighthouse), this is not a Shopify invention but a standard set by Google.

In Google, these metrics are called Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Together they are the “Core Web Vitals” (CWVs).

The CWVs are superior in a few ways:

1. They are based on real customer data

The old Lighthouse score is just a robot visiting your site, running tests and checking that you’ve ticked all the boxes. In other words, it’s lab data.
The CWVs however, are the recorded experiences of real customers that visited your store over the last 28 days, averaged out. In other words, field data.
This is so much more valuable because after all, what really matters is whether your customers are having a good experience browsing your store.

2. They matter most for SEO

Google has confirmed that your Core Web Vitals - not your Lighthouse score - are used as a ranking factor for Google Search.
Google does not consider your Lighthouse score in any way for search ranking.
So if your goal is SEO, then getting a few more points in Lighthouse won’t change much. But fixing your CWVs will.

3. They are clearer and more actionable

The CWVs make life a lot easier for you as a website owner. You now have just three levels to worry about — good, needs improvement, and poor.
No more worrying about whether a Lighthouse score of 65 is good enough. Just aim to score “Good” for all your Core Web Vitals!
Also, it’s easier to target each issue separately. Rather than being lost in the various suggestions that Pagespeed Insights would give. Now you have three clearly separate categories to improve.

Watch the video to learn more about the core web vitals - LCP, INP and CLS in Shopify.

📢 STAY UPDATED

Youtube won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on Youtube.

🙏 SUPPORT THE CHANNEL

Or click the "join" button under any video.

🛠 CODE SHOP

Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.

👍 MY FAVOURITE APPS & THEMES

📚 MY SHOPIFY CODING EBOOK

Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.

👨🏼‍💻 WHO AM I?

Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.

Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:

⏭ CHAPTERS

00:00 Intro
00:59 Lighthouse score vs Core Web Vitals
02:24 Real user data
03:50 SEO impact
04:49 Using Shopify's performance dashboard
06:02 Loading Speed (LCP)
12:02 Interactivity (INP)
15:08 Visual Stability (CLS)
18:55 Beware of scammers
20:38 Real speed experts

#Shopify #SpeedOptimization #WebPerformance #ShopifySpeed
Рекомендации по теме
Комментарии
Автор

Yes please make more videos on this topic and by the way thanks for the video ☺️

mohitbeniwal
Автор

Loved it! Excellent video Eduard!
You explained everything perfectly 😄
It's gonna be tough for scammers now that people can see web vitals.

amine-ammari
Автор

Great content, as always. Essential listening for anyone trying to understand and work on their site themselves. Thanks, Ed! 😊

alanclunnie
Автор

I loved your content.Please make more because this kind of content couldnt be found easily on web

PROTECHSOLUTION-qekj
Автор

Hi Ed. Thanks for the video. Squoosh is great tool....thanks for bringing it up...even I am ok with Photoshop.

#1
Shopify uses PNG for the hero images.
PNG is good for the ICON type images where you have couple basic colours.
For the product photo hero image would be recomended JPEG....even I upoaded 170kB hero JPEG Shopify transforms to a PNG at 800kB.

#2
I have seen many of your videos and also have purchased your DIY ebook + breadcrumbs....I wonder whether it is so complicaded if you could offer your version of DAWN theme?

For us, the shop owners + obsolent Google+YouTube search results = not easy to find useful information how to change the coding.

Your videos+blog are easy understand and fun to read/follow.
Thank you.
May your inspration is never ending.
🙏

TemploDelFilo
Автор

First! Great video, that stuff is always confusing.

DanaLeeGibson
Автор

Thanks for this tips mentor, this is awesome

TinaChen-hksh
Автор

Can you make a video on how to make an order tracking page with embeds for tracking packages?

MichaelaNolf
Автор

thank you your videos helped me a lot so far :)

MitjaLEsser
Автор

Hello Ed Codes,

Could you please help me optimize my Shopify store? It's running very slow. I've already optimized images and uninstalled all unused apps, but my LCP is still 5.4 seconds. I've searched the web for solutions but haven't found any. Your assistance would be greatly appreciated.looking for your reply

ShitalYadav-bvoh
Автор

Ed Codes - Please make video for tabby integration for shopify -- Middle east users want video on this

PixelProduce
Автор

Great explanation however, what happens when an essential app is the main culprit.

dan.barrett
Автор

Why my shopify haven't this report?

lemandik
Автор

Are Shopify displaying the performance report based on the Desktop or Mobile analysis. Doesn't Google base its scores on Mobile? When I try Google Lighthouse I get good scores for Desktop (matching what I see in Shopify report), but poor for mobile.

alanryan
Автор

I'd love if I would see a video "hey guys, this is my guest in this video, he is doing technical SEO for Shopify for years, here is his number (home address and blood type, haha), contact him directly :)

I mean, you are the 1st choice, but I know that you lack time to work 1 on 1 :)

mm.digital