Google speed rating suddenly way down

nagumi
Excursionist
43 1 15

I don't know what I did, but suddenly my speed rating is in the toilet. I just don't get it. I've been optimizing a lot of code, but I didn't even touch anything related to youtube, and there's no youtube on the homepage. Please help!

 

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.gumpel.co.il%2Fproduct...

www.gumpel.co.il

 Screenshot 2021-06-13 001114.png

0 Likes
ask_the_bird
Excursionist
11 0 6

The "2.25s" is not necessarily related to the scripts shown below.

The scripts there are listed because they have very bad coverage - the amount of code that was executed relative to the amount of code that was delivered. To better understand what's actually eating time, you should dig into the actual performance trace. I just did that and found nothing of grave concern. The "2.25s" could easily have been a script that randomly had a long network request but didn't yield the main thread. I couldn't reproduce so I'm not sure. Perhaps I'm not profiling the right page.

You may want to rework how https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap is delivered. I'd recommend setting preload/font links in head, experimenting with hosting that file + the fonts yourself, and making it non-blocking.

If you want to push it further, you can look at lazyloading your offscreen images.

Speed metrics fluctuate all the time, even on a single device. Real user performance data is the gold standard. 

Hi @nagumi,

First, 100% agree with @ask_the_bird, especially "Real user performance data is the gold standard". And just to add on to that post. The test url you provided is for the product page (not homepage as you mentioned) https://www.gumpel.co.il/products/evapo-rust-liquid which does contain a youtube video which is the reason for the youtube request.

Regarding ways to optimize speed, try removing the 404 request you have and consider lazy loading the video. We have a video tutorial on lazy loading videos here this https://www.youtube.com/watch?v=LxzdCCiWwSs 

Feel free to reach out!

eStoreSpeedOptimization

 

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
nagumi
Excursionist
43 1 15

Thank you both so much for your response. I was testing the wrong page! No wonder I was so confused.

 

@eStoreSpeed , what 404 are you referring to?

Regarding lazy-loading youtube and the images, I'll play with that later today.

@ask_the_bird I'm honestly a little confused regarding the font thing. Is there a better way to call the font?

 

Thanks!

0 Likes

@nagumi no problem, happy we can help

See screenshot below for 404 response. It can be viewed via inspect tool. Go to google chrome > right click > inspect > console tab

Screenshot 2021-06-13 at 15.51.40.png

Best,

eStoreSpeedOptimization

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
nagumi
Excursionist
43 1 15

Wow, good catch. Did not see that.

 

It's the weirdest thing - the line causing that 404 is in theme.liquid, and it's not one I've touched.

<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>

 

 

Any idea what could be causing this? Commenting out the line doesn't seem to have any effect that I can see (admittedly I only gave a cursory glance after the change) but does prevent the 404.

 

 

Thanks

0 Likes
ask_the_bird
Excursionist
11 0 6
<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>

 

I was suggesting you try some of these for the fonts requested by https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap.

You could also copy and paste the contents of that file into your main stylesheet; it's incredibly tiny. Then I was suggested you check whether or not it's faster to get the font from Google or from your Shopify CDN (putting it on /assets or similar and linking from there). It is conceivable that browsers will reuse connections to your store's CDN and loading the fonts that way could be slightly faster.

My other suggestion -- making them non-blocking -- means adding a property like font-display:swap to your fonts' definitions. This tells the browser to continue painting the rest of the page and swap fonts once they've loaded. Some people don't like the CLS this causes (text may draw with a system font, then be replaced by your font moments later), but if your site is reasonably fast and you're delivering the fonts from a CDN nearly 0 visitors will see it.

Regarding the 404 -- the font_url liquid operator is failing there and returning an error message. Since it's inside an href, the browser is trying to "visit" the error message. I would guess base_font_bold is not returning the object type the operator is expecting.

0 Likes
nagumi
Excursionist
43 1 15

@ask_the_bird regarding your first suggestion, you're recommending removing the font call in theme.liquid and putting the following into theme.css, is that correct?

 

/* latin-ext */
@font-face {
  font-family: 'Zen Dots';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/zendots/v1/XRXX3ICfm00IGoesQdaNRs71cA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Zen Dots';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/zendots/v1/XRXX3ICfm00IGoesQdaDRs4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

 

 

As an aside, that second url in there is a 404. What the heck...?

As for making the fonts non blocking, I was already using display=swap appended to the font url. That should do it, no?

0 Likes
ask_the_bird
Excursionist
11 0 6

Yeah that's what I'm suggesting. There's no reason to get such a tiny CSS file over network, adding it to main styles will cost nanoseconds of extra download time while removing a 20-200ms network request.

font-display:swap needs to be in the actual font declarations. The URL querystring is some google fonts API thing, but it wasn't even generating the property for you. Try:

@font-face {
  ...
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/zendots/v1/XRXX3ICfm00IGoesQdaDRs4.woff2) format('woff2');
  ...
}

 As to that earlier 404, check to see what that variable is returning. 

If you want to look at something more fun than fonts, check out lazyloading and progressive jpeg sometime. The former can be a lifesaver for devices with low GPU power.

0 Likes
tabishh837
New Member
7 0 0

You could also copy and paste the contents of that file into your main stylesheet; it's incredibly tiny. Then I was suggested you check whether or not it's faster to get the font from Google or from your Shopify CDN (putting it on /assets or similar and linking from there). It is conceivable that browsers will reuse connections to your store's CDN and loading the fonts that way could be slightly faster.

0 Likes