Google speed rating suddenly way down

nagumi
Explorer
53 2 23

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

Replies 11 (11)
ask_the_bird
Excursionist
12 0 10

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. 

eStoreSpeed
Explorer
43 6 12

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
nagumi
Explorer
53 2 23

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!

eStoreSpeed
Explorer
43 6 12

@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
nagumi
Explorer
53 2 23

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

ask_the_bird
Excursionist
12 0 10
<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.

nagumi
Explorer
53 2 23

@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?

ask_the_bird
Excursionist
12 0 10

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.

tabishh837
New Member
8 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.

nagumi
Explorer
53 2 23

Interesting. I'm not quite sure how to do that. 

CartTurbo
Pathfinder
89 4 25
When every millisecond counts, is it really worth using third party web fonts?

If you are using a third party such as Google or Typekit, you have no control over the server that you're getting information from.

This also adds extra HTTP requests and you want to keep HTTP requests to a minimum.

Web fonts are also render blocking.

You can add a fallback font in case the third party web font is down or the visitor is using an older browser.

These are referred to as web safe fonts, which are pre-installed by many operating systems and don't use the CSS3 @font-face declaration.

You can see a full list of web safe fonts at cssfontstack.com.

Here is an example of how to use a fallback font.

body { font-family: 'Open Sans',Arial,sans-serif; }

CSS is by default treated as a render blocking resource.

So if you call a font as a CSS3 @font declaration this automatically means that web fonts can also be rendered blocking.

But then fonts are a small part of your problem.

File minification

The site would speed up some if it was correctly minified. The tools to do this are UglifyJS, clean-css and HTMLMinifier.

Lower your Requests

You have 145 and it should be less than 80

Concatenate files

Concatenate CSS files Embed or inline small JS or CSS files in the HTML.

You have a JS execution time of 5519 ms.

You should have 500 ms or less.

This is the number of milliseconds spent by the browser on JavaScript execution during page load.

You have 43 Duplicated selectors.

This is when two or more selectors are strictly identical and should be merged.

You have 367 Old prefixes ... you should have 0.

And you should drop Bootstrap all together and go with CSS Grid because nothing beats the source.