Author Topic: Core Web Vitals problem with FCP and LCP (Read 44430 times)

svsanchez · « **on:** April 20, 2021, 01:02:45 AM »

Hello everybody!

As you know, Google will start taking into account the Core Web Vitals (CWV) for ranking websites from May. I couldn't find any information about optimizing Website Baker for CWV, the only thread in the forum was in German but it didn't offer much advice (I don't speak German)

I am trying to get my main Website Baker site to the green zone, but I am failing miserably because the FCP and LCP are taking too long.

Here is an example test via Google's PageSpeed Insights:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Fagricultura.php&tab=mobile

The main problem seems to be the Server Response Time, which leads to the bad grades that I am getting, BUT the strange thing is that I am getting very good scores on THIS SAME server for my main site, which is NOT using WB. You can notice that when you click on any internal link on the site, it takes more than 6 seconds to "respond", which is not normal (when I upgraded to WB 2.10.x or 2.12.x I had to wait for up to 1 minute so I had to revert to 2.8.3).

So, I guess it is NOT a server issue, but something maybe something regarding the Database? (My site has more than 3000 pages).

Some of you had tried to help me with the slowliness of the pages when I upgraded to 2.10.x / 2.12.x but we were only able to accelerate the backend with a modified index.php file which only loads the current section instead of loading the whole site's tree.

svsanchez · « **Reply #1 on:** April 20, 2021, 01:33:22 AM »

Hello again, I was able to get a 100 perfect score with one of my pages using the BLANK template:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Flimpieza%2Fpapel-higienico.php&tab=mobile

So, we can confirm that the problem is NOT the server NOR WebsiteBaker. There seems to be *something* in the template that is causing the site to respond so slowly at first.

svsanchez · « **Reply #2 on:** April 20, 2021, 01:46:55 AM »

Ok, so it seems I found the main problem regarding the slow server response: as soon as I add the categories menu (SM2), the grades of the page go down to 91 / 92 with a server response time of almost 4 seconds before showing anything on the screen

Is there a way to make the categories respond faster?

svsanchez · « **Reply #3 on:** April 20, 2021, 06:15:47 AM »

One new test, with the main template but WITHOUT the SM2 menus and without the ads. I am getting grades 88 and above on Mobile and 98 and above on Desktop.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Flimpieza%2Fmantenimiento-de-limpieza.php&tab=mobile

It is normal for ads to degrade the performance of a page, but the menus shouldn't be causing this huge server response time problem.

ALSO, I am not being able to lower the LCP.

Any suggestion to fix these 2 things would be greatly appreciated!

hgs · « **Reply #4 on:** April 20, 2021, 08:54:52 AM »

Actually, all measures are in the analysis.
Here is just an example, unfortunately in German, that should see you but then in English.

Quote

Aufwand für Hauptthread minimieren 10,6 s
Versuchen Sie, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Weitere Informationen
Kategorie

Zeitaufwand
Script Evaluation

6.846 ms
Other

1.422 ms
Style & Layout

822 ms
Script Parsing & Compilation

742 ms
Parse HTML & CSS

361 ms
Garbage Collection

232 ms
Rendering

209 ms

Quote

Aufwand für Hauptthread minimieren 10,6 s
Versuchen Sie, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Weitere Informationen
Kategorie

Zeitaufwand
Script Evaluation

6.846 ms
Other

1.422 ms
Style & Layout

822 ms
Script Parsing & Compilation

742 ms
Parse HTML & CSS

361 ms
Garbage Collection

232 ms
Rendering

209 ms

On these things, loading external scripts, WebsiteBaker has no influence.

That WebsiteBaker works, you have proven with the last post itself.

DarkViper · « **Reply #5 on:** April 20, 2021, 11:23:06 AM »

Very nice, I love the new criteria and have been waiting for them for years ...
Finally a very good reason to ditch all those inflationary JavaScript frameworks that are mercilessly slowing down so many websites.

Manuela

svsanchez · « **Reply #6 on:** April 20, 2021, 08:16:31 PM »

Hello hgs and DarkViper, thank you for replying.

Hgs, on my last post the good grades are mainly because the Show_menu2 is *NOT* appearing, hence the Server Response Time is great.

The ads contribute to blocking the main thread, which is another problem, and over which there is nothing that can be done since they are not hosted on our server, but Google's server.

However, WB does seem to have a problem with bigger sites when the menu is shown, as you can see on my tests, especially this one which uses the BLANK template with only the Show_menu2, and the Server Response time goes to almost 4 seconds!

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Flimpieza%2Fpapel-higienico.php&tab=mobile

If I remove the menu, the problem is gone and the page appears immediately!

So I definitely think that there is a problem with the way WB treats the menu in bigger sites.

You can see the same problem happens on my other big site (also more than 3000 pages):

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com%2Fmunicipios%2Fpages%2Fizabal.php&tab=desktop

The server response time is about 6 seconds when the menu is shown!

Is there a way to generate the menu without causing this problem?

dbs · « **Reply #7 on:** April 21, 2021, 07:48:05 AM »

Hi, "my" PageSpeed Insights says "A problem has occurred with the request. Please try again later.".
Later the same message.

I see on your page https://www.deguate.com.gt/guatemala/agricultura.php three lists of pages (left, right, bottom).
Have you tried with only one list? Maybe you can try to use droplets like [[SiteMapChildRL]] or similar?

svsanchez · « **Reply #8 on:** April 21, 2021, 08:12:56 AM »

Hello dbs,

Quote

Hi, "my" PageSpeed Insights says "A problem has occurred with the request. Please try again later.".
Later the same message.

Strange, it also happened to me once, but it's working now.

Quote

I see on your page https://www.deguate.com.gt/guatemala/agricultura.php three lists of pages (left, right, bottom).
Have you tried with only one list?

I guess that when you mean "three lists of pages" you mean three menus? Yes, there's the Breadcrumbs, the list of pages inside the category (what you called SiteMapChildRL) and the Categories menu. It DOESN'T make a difference if I add one or 3 menus, the problem happens as soon as there is ONE menu.

Quote

Maybe you can try to use droplets like [[SiteMapChildRL]] or similar?

I just added the [[SiteMapChildRL]] to the page but it doesn't do anything, it only shows the text [[SiteMapChildRL]] instead of showing the list of pages. I guess I have to create the droplet but I don't know what code I should use?

dbs · « **Reply #9 on:** April 21, 2021, 08:36:54 AM »

The droplet is only a call for subpages of a page_id.

Desc: List of pages below current page or page_id. Modified for servicelinks.

Code:

Code: [Select]

$content = '';
if (isset($start) && !empty($start)) {
    $iChild = (is_numeric($start) ? $start : PAGE_ID);
    $content = show_menu2(SM2_ALLMENU,
            $iChild,
            SM2_ALL,
            SM2_ALL|SM2_ALLINFO|SM2_BUFFER,
            '[li]<span class="nav-link">[a][page_title]</a></span>',
            false,
            '<ul id="servicelinks">');
}
return $content.'';

Comments:
[[SiteMapChildRL?start=11]]
(optional parameter) start=page_id

@Manu: not helpfully. The problem is show_menu, not JS.

svsanchez · « **Reply #10 on:** April 21, 2021, 10:41:11 AM »

Hello dbs, I was able to create the droplet, thank you. Unfortunately, the droplet causes the same effect, degrading the SERVER RESPONSE TIME according to PageSpeed Insights.

I removed the show_menu from the BLANK template that I had created yesterday, and added the following three example pages:

EXAMPLE 1) Page using BLANK template, with NO show_menu and NO SiteMapChildRL droplet. This page achieves PERFECT score, with NO server response time issues. You can see it on the following link:

Page: https://www.deguate.com.gt/guatemala/pruebas/blank.php
PageSpeedInsights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Flimpieza%2Fpapel-higienico.php&tab=mobile

EXAMPLE 2) Page using BLANK template, with NO show_menu but using ONE SiteMapChildRL droplet. This page's score is lower, because the SERVER RESPONSE TIME goes up to almost 4 SECONDS! From there, any other added things to the page will degrade the scores much more. You can see it on the following link:

Page: https://www.deguate.com.gt/guatemala/pruebas/blank-droplet.php
PageSpeedInsights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Fpruebas%2Fblank-droplet.php&tab=mobile

EXAMPLE 3) Page using BLANK template, with NO show_menu but using THREE SiteMapChildRL droplets. You can see that the page's score is the same with 1 or 3 (or more) droplets, with the same degraded SEVER RESPONSE TIME of about 4 seconds. You can see it on the following link:

Page: https://www.deguate.com.gt/guatemala/pruebas/blank-multiple-droplets.php
PageSpeedInsights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Fpruebas%2Fblank-multiple-droplets.php&tab=mobile

What I am desperately looking for is a way to show the Breadcrumbs / Menus / Child pages without causing the server response time issue.

Thank you!

crnogorac081 · « **Reply #11 on:** April 21, 2021, 01:44:13 PM »

Hello,

dont bother with this, of course if website has more database queries or included scripts it will take more time to load. By making these pages faster will not rank your website better. What is possible here is that developers make one database query for page tree and to put it in global variable. Then you could make menu ad breadcrumbs and sitemap

svsanchez · « **Reply #12 on:** April 21, 2021, 06:03:06 PM »

Hello Crnogorac081

Quote

By making these pages faster will not rank your website better.

You are not correct Crnogorac081, Google takes into account the speed of the sites as a ranking factor, and starting in May, this will be a very important factor determining the position of your pages. They will be using something they call CORE WEB VITALS (CWV), and in fact Google's John Mueller just said that now was the time to learn to fix the Core Web Vitals as doing so would mean you can make a lot of money as an SEO specialist, due to all the site owners scrambling to make their sites faster to regain their lost SERPs when the CWV update starts in May.

You can read more about Core Web Vitals here: https://www.internetx.com/en/news-detailview/core-web-vitals-as-ranking-factor/#:~:text=Core%20Web%20Vitals%20will%20become,for%20the%20respective%20search%20queries.

Quote

What is possible here is that developers make one database query for page tree and to put it in global variable.

I am not a programmer but I also believe that WB somehow checks the whole DB every time it has to display a page, which is causing the apparent slow server response time. Removing the menus (either Show_Menu2 or the SiteMapChildRL Droplet) instantly solves the problem, but leaves us with an impossible to navigate site.

This may not be a problem for small sites, but bigger sites will definitely get smashed by Google's new CWV update. My two main WB sites have more than 3000 pages each (which is not that much), and they are suffering a great deal from this.

It would be great if there was a way to insert the menus in a way that doesn't have to check the whole DB, or whatever is happening under the hood!

dbs · « **Reply #13 on:** April 21, 2021, 06:14:54 PM »

We can try another way. Loading a static menu.
Only for testing if this is faster as generating the menu for every page load.

In your index of the template (before DOCTYPE) we define a variable with your menu.
Then we ask if the visitor is logged in or not. If not:
- we give him a static menu
- we create this file in this moment in the WB root
- in your index in the body where the menu is normally called we ask again if the visitor is logged in or not
- if not we give him the static menu else the WB generated menu

I hope you are the admin and there are not many registered users.
If you give me your index i can implement this for testing.

crnogorac081 · « **Reply #14 on:** April 21, 2021, 06:51:03 PM »

I was testing some of my websites with very good ranking position based on seo ,and they have score around 50 in this page speed test.

What could be done regarding menu is to make one db query that would extract page tree into array at the top of template's index.php file, and then later to use it to generate menu /breadcrumbs/ sitemap

crnogorac081 · « **Reply #15 on:** April 21, 2021, 06:59:45 PM »

Quote from: dbs on April 21, 2021, 06:14:54 PM

We can try another way. Loading a static menu.
Only for testing if this is faster as generating the menu for every page load.

In your index of the template (before DOCTYPE) we define a variable with your menu.
Then we ask if the visitor is logged in or not. If not:
- we give him a static menu
- we create this file in this moment in the WB root
- in your index in the body where the menu is normally called we ask again if the visitor is logged in or not
- if not we give him the static menu else the WB generated menu

I hope you are the admin and there are not many registered users.
If you give me your index i can implement this for testing.

This can work too. If you are admin and nobody have permission to change page tree ( add ,delete or reorder menu) you csn echo sm2 call to variable and store it as string. Example

Code: [Select]


$content = '';
if (isset($start) && !empty($start)) {
    $iChild = (is_numeric($start) ? $start : PAGE_ID);
    $content = show_menu2(SM2_ALLMENU,
            $iChild,
            SM2_ALL,
            SM2_ALL|SM2_ALLINFO|SM2_BUFFER,
            '[li]<span class="nav-link">[a][page_title]</a></span>',
            false,
            '<ul id="servicelinks">');
}
Echo $content;

Then view source and what is output copy and put it as text ( $content = "...code from source";

And comment code from above with /* */
And whenever you add or change menu decoment code and get new output from source

crnogorac081 · « **Reply #16 on:** April 21, 2021, 08:16:30 PM »

Also performing test on https://forum.WebsiteBaker.org/ url gives score 88 which is pretty bad in my own opinion considering there are basically no images on website

svsanchez · « **Reply #17 on:** April 21, 2021, 09:38:27 PM »

Hey guys, WOW that is amazing, I'm glad you got more than one excellent idea.

Yes I am the admin and there are ZERO registered users on my 2 big sites, so this should not be a problem.

The way to implement seems easy for a programmer. If I undestood correctly, what Crnogorac is saying is to add this code to my template:

Code: [Select]

$content = '';
if (isset($start) && !empty($start)) {
    $iChild = (is_numeric($start) ? $start : PAGE_ID);
    $content = show_menu2(SM2_ALLMENU,
            $iChild,
            SM2_ALL,
            SM2_ALL|SM2_ALLINFO|SM2_BUFFER,
            '[li]<span class="nav-link">[a][page_title]</a></span>',
            false,
            '<ul id="servicelinks">');
}
Echo $content;

Then access a page that uses that template and copy the output.

Then, finally, remove the SM2 menus from my template and replace them with the output, in a line that would look like:

$content = "...code from source";

If that's not the way to do it, I would greatly appreciate your help dbs in implementing this, sending you the login credentials via PM?

svsanchez · « **Reply #18 on:** April 22, 2021, 06:35:26 PM »

Hello everyone, crnogorac081 was very kind to help me test by placing the menu and breadcrumbs directly in the template, without using the SM2 menu. It works, I had grades of 86 on mobile and 92 on desktop, and the server response time issue disappears this way:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.deguate.com.gt%2Fguatemala%2Fagricultura%2Ffrutas-y-verduras.php&tab=mobile

BUT, the problem is that I would have to create more than 3000 menus and bredcrumbs to place directly on each of the pages,

Is there a way to generate the Breadcrumbs and Subsection menus DINAMICALLY without causing the server response time issue?

svsanchez · « **Reply #19 on:** April 22, 2021, 09:14:52 PM »

Upgrading to 2.10, 2.12 or 2.13 WORSENS the Initial Server Response problems on a big WB site.

New install is using WB 2.13.0 r31, with PHP 7.4

Here is the same page of Fruits and Vegetables on the new install, with no ads and NO SM2 menus, working fast:

https://www.deguate4.com/wb/guatemala/agricultura/frutas-y-verduras.php

And here is another page, with no ads but WITH SM2 menus, which is very slow, much slower than the 2.8.3 version.

https://www.deguate4.com/wb/guatemala/agricultura/despulpadoras-en-guatemala.php

With SM2 menus present, the Initial Server Response time goes from about 4 seconds on WB 2.8.3 to 7.5 seconds on WB 2.13.0

OTHER PROBLEMS WITH 2.13.0

As some of you know, I had already tried to upgrade a few times, but the front-end became slower and the back-end unusable (having to wait more than a minute when you click on PAGES and the SETTINGS showing an internal server error). I was able to work on the back-end with a /admin/pages/index.php file made by Ruud many years ago, which fortunately still works on WB 2.13.0, BUT the front-end is still to slow and the SETTINGS page still gives an internal server error.

I have several other sites on that same server using WB 2.10.x, WB 2.12.x, and WB 2.13.0 without issues. It is only when the site is big that all these problems occur.

crnogorac081 · « **Reply #20 on:** April 22, 2021, 10:57:32 PM »

Yes ,placing raw output from one page is just for testing, so we have now starting point. There is a problem because on every page there is set specific page as active menu item and active breadcrumb.

This is my idea how to solve this example
At the beginning of the template file make database query to populate array. After doing this put this array to variable, for use, and do not do database query except when Pages change.

Code: [Select]

[1] => Array
    (
        [title] => Page id 1
        [url] => www...
        [children] => Array
            (
                [2] => Array...

Then every time on page load use this array variable ( and not db query) to feed two functions
Menu( $array, $current_page_id)
Breadcrumb ( $array, $current_page_id)
To generate menu and breadcrumbs but to highlight current menu item (page where you are)

Now is needed to make array and these two functions.

dbs · « **Reply #21 on:** April 22, 2021, 11:49:33 PM »

From the developer: the menu function has security changes since 2.10.
Unfortunately i can't say more.

Is it right you need for all 3000 pages a different submenu?
My try for a solution is a static main menu for visitors in a menu.html. This html will be generated new if a new page is found in the database.
Maybe the same can be done for the submenu.

crnogorac081 · « **Reply #22 on:** April 22, 2021, 11:58:26 PM »

Quote from: dbs on April 22, 2021, 11:49:33 PM

From the developer: the menu function has security changes since 2.10.
Unfortunately i can't say more.

Yes I totally forgot about this! My code may work only if you dont have registered users and pages for their eyes only but all pages are for visible for all (non logged in visitors)

svsanchez · « **Reply #23 on:** April 23, 2021, 02:24:43 AM »

Hello crnogorac081 and dbs,

1) MENU ARRAY: could you help me with that coding? I understand what you are asking but I simply don't know how to do it.

2) The sites have NO registered users (the only user is admin) so no problem with that new security function. Plus, I am still using WB 2.8.3 but if this works I would be glad to finally be able to upgrade 2.13!

3) 3000 SUBMENUS: My first site has 42 Categories, but many of those categories have Subcategories and sub-subcategories, so I think there could be about 200-300 different menus. The second site though is a geography site for Guatemala and is divided in Departments (States) then Municipalities (Counties), then each municipality has it's own sub menu to display it's history, geography, population, etc... In this case there would be about 400 menus!

Then, there's the Breadcrumbs which of course there is one for each page so more than 3,000+ for each site

.

svsanchez · « **Reply #24 on:** April 24, 2021, 06:34:50 PM »

Hello, maybe this could be a solution: my main site has more than 150,000 pages, each one of them has a breadcrumbs and a menu just like my WB sites.

This site is built with a very old CMS, which generates a static page for each article, as well as a static breadcrumb and a static menu and sub menu for each category.

So I was wondering if there was a way to generate the breadcrumbs and menus / sub menus as static pages that could be included via PHP INCLUDE on each page, it would eliminate the need of querying the DB to create the menus each time a page is accessed. Instead, the menus and breadcrumbs could be generated by calling the "GENERATE MENUS AND BREADCRUMBS" function.

Does that make sense on WB? I will look for a programmer on Fiverr to do this, but would like to know if you think it's feasible, and what you think that I should tell the programmer for this to work?

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Core Web Vitals problem with FCP and LCP (Read 44430 times)