Jump to content

Google Core Web Vitals / Google December 2020 Core Update

Gabriel Torres

By Gabriel Torres
in Technical Problems

 Share

Recommended Posts

ptprog Rising Star

ptprog

Posted
Posted (edited)

Not sure if you already solved your issues, but it seems the initial server response time is huge (2 to 3s, whereas this value should be below 1s).

Another issue you have is the cache expiration of static resources.  It seems the fontawesome-webfont.woff2 has no cache expiration set at all.  And the JS, CSS and images files have a cache expiration of 30 days.  Since these resources use cache busters, you should be fine setting a much longer cache time (6 months, or even 1 year).

Edited by ptprog
Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted (edited)

@ptprog Many thanks for your pointers. I added woff2 files to the list and increase the cache to 1 year as suggested. Can you please tell me which tool to use to check these cache expiration durations? This way I can check if the changes I made worked.

As for the server response time, I don't even know where to start. One issue is that we have to load advertising banners, and these usually take a while, increasing the page load time.

Edited by Gabriel Torres
Link to comment
Share on other sites
Mopar1973Man Community Regular

Mopar1973Man

Posted
Posted (edited)

(Fly on the wall)

I'm going to look into the "preload". (Thanks to all that have been posting).

49 minutes ago, Gabriel Torres said:

Can you please tell me which tool to use to check these cache expiration durations?

I've been testing with a few different tools.

  • Chrome Browser has its own "Lighthouse Tool" - (3 dots) -> More Tools -> Developer Tools
  • GTMetrix
  • WebPageTest

Here is what the chrome tool looks like... If you dig in you can see the waterfall and timing, cache times and expires. 

206786425_Screenshotfrom2021-01-1105-38-48.thumb.png.92fa032d8a252bb2267372f906d32be9.png

Edited by Mopar1973Man
Link to comment
Share on other sites
ptprog Rising Star

ptprog

Posted
Posted

If you are familiar with cache headers, you can just use Chrome developer tools (in the Network tab, you can see the headers of each, and check the expiration time, e.g. "expires: Sun, 07 Feb 2021 08:27:40 GMT" shows the cache expires in 1 month).

You can also use Google Pagespeed (Serve static assets with an efficient cache policy) or www.webpagetest.org, for exemple, which provides higher-level details (as @Mopar1973Man also suggested).

BTW, I'm wondering if some of those cache "issues" may be caused by Cloudflare, since the cache expiration sometimes of some images varies depending on the tool you use to test.  If this is the case, maybe it's due to some online optimization made by Cloudflare, and you may not be able to fix it.  I would still make sure that when you hit your server directly (bypassing Cloudflare), the resources have cache.

Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted
23 hours ago, Mopar1973Man said:

CLS is my biggest thing. Mostly cause by Google Adsense.

This should be easily fixed by adding a <div> with height parameter around your Google AdSense code: 

<div style="height: 250px">

[your google adsense tags]

</div>

Thanks @Mopar1973Man and @ptprog for all the pointers. I will take a look into all that was said and get back to you. All I need now is some spare time... LOL

Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted
On 1/11/2021 at 10:02 AM, ptprog said:

BTW, I'm wondering if some of those cache "issues" may be caused by Cloudflare, since the cache expiration sometimes of some images varies depending on the tool you use to test.  If this is the case, maybe it's due to some online optimization made by Cloudflare, and you may not be able to fix it.  I would still make sure that when you hit your server directly (bypassing Cloudflare), the resources have cache.

CloudFlare has its own setting for this:

Quote

Browser Cache TTL

Determine the length of time Cloudflare instructs a visitor’s browser to cache files. During this period, the browser loads the files from its local cache, speeding up page loads.

I configured it for 1 year and now it is working as you suggested, Many thanks. 🙂

 

On 12/13/2020 at 6:26 PM, Adlago said:

You will have some improvement in site loading speed if you use a preload font. Font awesome loads a file size of 75 kb and this creates a certain delay.
Try and paste the code below, into your global template, after close the footer tag (</footer>)

@Adlago I had to move the preload link for the fontawesome to the <head>, because at the bottom Google Lighthouse wouldn't recognized it and would say that I needed to preload it, even though the preload tag was present.

Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted

Score for invisioncommunity.com is really low as well: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Finvisioncommunity.com%2Fforums%2F

Did small fixes here and there, but I see that "Eliminate render-blocking resources" could be a place to improve. https://web.dev/render-blocking-resources/

@Mopar1973Man See how our CLS was completely fixed after we added a height to the Google AdSense tags here:

image.png.f193e585940a53eebb4b0a6087d9d351.png

Link to comment
Share on other sites
Adlago Mentor

Adlago

Posted
Posted
16 hours ago, Gabriel Torres said:

Added lazy loading to users' photos, reactions, and custom cms templates. This fixed one of the issues listed in our report.

 

This addition removes the PSI report, but it does not speed up your site. Check out this test -

https://www.webpagetest.org/result/210113_DiWQ_fa63b920353923e9e4245a191ee25087/1/details/

your mobile images are loaded ahead of time "onload" - and the point of delaying loading images is when images are loaded after "onload" time ... Lazy load that is embedded has a fixed delay time loading images - which is enough and works well for desktops, but not enough time for mobile. This mobile time should be greater than 2 seconds for mobile image loading to be effective.

Also - there are many errors in your templates when validating html5 -

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.clubedohardware.com.br%2F

You are using CDN, but in order for your site to run much faster for your visitors, I think you need to follow these steps:
1. Stop the CDN
2. Remove all errors when validation html5
3. Optimize your site - as much as possible (there are many techniques you can do).
4. When you achieve good results from PSI (over 65 for mobile) - you will have a fast enough site.
5. Activate CDN - it will be even better.
If I'm in your place, so I would do ...

Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted
2 hours ago, Adlago said:

Also - there are many errors in your templates when validating html5 -

I fixed everything that I could. There are only two types of errors still there. One related to a plugin we used (already contacted the developer abou that) and another that is related to the addition of a "type" parameter in Javascript tags. This is done by CloudFlare's RocketLoader. Some people suggested here that I disabled RocketLoader, however, doing that our website loading time skyrockets, as you can see below.

image.thumb.png.7525cd0010f73f2d743707d34b0e708c.png

 

Link to comment
Share on other sites
SeNioR- Grand Master

SeNioR-

Posted
Posted

@Gabriel TorresI turned on RocketLoader a month ago. There is a readable difference in loading speed, I recommend it to anyone! So far no problems. Additionally, I turned on HTML compression to get rid of those ulgy spaces from the document source. A month of testing, and so far everything is fine. 👍

Unfortunately, it is impossible to avoid all errors and warnings in PageSpeed Insights.

Everyone knows that on a simple HTML page anyone can get 100 score, but IPS is a complex software and there is no chance to get 100 🙂 I see that you squeezed a lot anyway, good job 👍

Link to comment
Share on other sites
xtech Proficient

xtech

Posted
Posted

@Gabriel Torres  are you already seeing Google Analytics benefits of these improvements? I mean, how are the several optimizations you are making impacting your search engine traffic?

I believe that IPS should implement these improvements built in. Having successful communities is of their best interest, and SEO effectiveness should be a top priority.

Link to comment
Share on other sites
Jock3r Enthusiast

Jock3r

Posted
Posted
8 hours ago, xtech said:

@Gabriel Torres  are you already seeing Google Analytics benefits of these improvements? I mean, how are the several optimizations you are making impacting your search engine traffic?

I believe that IPS should implement these improvements built in. Having successful communities is of their best interest, and SEO effectiveness should be a top priority.

 They said that there is a SEO audit coming soon. They will probably take everything into consideration.

Link to comment
Share on other sites
Gabriel Torres Mentor

Gabriel Torres

Posted
  • Author
Posted

@xtechSo far, I am not seeing any improvement, as the main issue, which is the LCP, is still present. As mentioned in my original post, Google made a major change in its algorithm in the beginning of december, which is really hurting us. We used to get around 140k users per day from Google, since then we are getting around 115k. This is hurting our revenue tremendously. I am still working on this, though. Every couple of days I fix something here or there. I am very persistent and I will get to the bottom of this and will eventually fix this LCP issue! 🙂

In any case, this has been a good opportunity to fix a lot of other things that could be improved anyway! 🙂

 

Link to comment
Share on other sites
Adlago Mentor

Adlago

Posted
Posted
11 minutes ago, Gabriel Torres said:

Every couple of days I fix something here or there. I am very persistent and I will get to the bottom of this and will eventually fix this LCP issue! 🙂

FCP - the problem is fixed with  Critical CSS.
For LCP, you can try preloading img, especially those img that slow down the mobile. Use for each img in your head
for mobile devices 

<link rel="preload" media="(max-width: 979px)" href="url to your img" as="image">


desktop only 

<link rel="preload" media="(min-width: 980px)" href="url to your img" as="image">


for everyone 

<link rel="preload" media="all" href="url to your img" as="image">

Usually for mobile are a few img, incl. logo, for desktop you need to experimentally determine - whether all the img visible when loading the site, or only the img with the highest weight ...
Experiments give birth to the truth ...

Link to comment
Share on other sites
  • 5 months later...
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...