Google reporting many errors on mobile crawling test

[Adlago]

As I continue to experiment, here is the last one:
After you have added "preload-css", move

{template="includeCSS" app="core" group="global" location="global" params=""}

into the body before closing the header tag (</header>).
the result will surprise you, as well as surprise me.
Google's mobile test accelerated from 2.9 sec to 1.3 sec in my site.

 

PS. Of course, the html5 validation test is OK

 

[Dll]

You may want to try loading that on a slow connection and see the issues that causes. What you'll see is that it will load the page with no css for several seconds (particularly on a slow-3g connection or slower), which isn't a good look and bad for user experience. I would expect your bounce rate will rise off the back of it as it looks for a period of time that your site is broken.

[Adlago]

55 minutes ago, Dll said:

You may want to try loading that on a slow connection and see the issues that causes. What you'll see is that it will load the page with no css for several seconds (particularly on a slow-3g connection or slower), which isn't a good look and bad for user experience. I would expect your bounce rate will rise off the back of it as it looks for a period of time that your site is broken.

Yes, it is. The monochrome monitor also creates discomfort ...

3G test - css load under 2 sec. No particular discomfort ...

[Dll]

I've already tested on your site with a 3g connection, it takes several seconds for the css to load, and in the meantime there's an unstyled page. But if you want to do it, good luck to you. 

[Adlago]

3 hours ago, Adlago said:

As I continue to experiment, here is the last one:

You've probably read this ...

[Dll]

17 hours ago, Adlago said:

You've probably read this ...

Experimenting is one thing, but you're ignoring best practices and a multitude of advice from the likes of google with some of what you're doing. Since you're running these experiments on 100% of the traffic on your website (at the very least you should a/b test this stuff), I'd suggest you're just a bit more careful with the changes you make, as you could easily cause yourself problems. 

[Adlago]

5 minutes ago, Dll said:

but you're ignoring best practices and a multitude of advice from the likes of google

Please specify what exactly you are saying?

[Dll]

22 hours ago, Adlago said:

Please specify what exactly you are saying?

As an example. Best practices are not to preload all css stylesheets, only key ones. There are numerous articles and guides written by the likes of google out there which refer to this, I've linked one or two in this thread. 

The same applies to putting css at the bottom of the page, it's just not recommended. It may score well on a speed test, but it's horrible for user experience, especially on slower connections. 

Testing on a live site and declaring success as getting a better score on a page speed type test is also not a good thing to do as these tests while a useful guide, are in many respects irrelevant. If you want to follow best practices you need to split test and get real user data (both speed and browsing information, such as bounce rate, time on the page etc), so you can compare your experiment vs your existing setup. Only at that point is it possible to get a true picture as to the differences your changes are making. 

[Adlago]

1 minute ago, Dll said:

As an example. Best practices are not to preload all css stylesheets, only key ones. There are numerous articles and guides written by the likes of google out there which refer to this, I've linked one or two in this thread. 

The same applies to putting css at the bottom of the page, it's just not recommended. It may score well on a speed test, but it's horrible for user experience, especially on slower connections. 

Testing on a live site and declaring success as getting a better score on a page speed type test is also not a good thing to do as they are in many respects, irrelevant. if you want to follow best practices you need to split test and get real user data (both speed and browsing information, such as bounce rate, time on the page etc), so you can compare your experiment vs your existing setup. Only at that point is it possible to get a true picture as to the differences your changes are making. 

Be so kind, please point out your site with a link - I am sure you have implemented all that you have written.
Thanks.

[Dll]

6 hours ago, Adlago said:

Be so kind, please point out your site with a link - I am sure you have implemented all that you have written.
Thanks.

I do this sort of thing for a living and have done for many years, so of course I try to follow best practices as part of that.

I'm not trying to belittle you or get into an argument here, I'm trying to help you. 

[Adlago]

7 minutes ago, Dll said:

I do this sort of thing for a living and have done for many years, so of course I try to follow best practices as part of that.

I'm not trying to belittle you or get into an argument here, I'm trying to help you. 

So I asked you for a link to your site - I want to see how these good practices work for your site.
It will be more help than words.

However, don't feel obligated. You don't have to do it if you don't want to.
Thanks for your criticism - it helps.

[sobrenome]

On 7/9/2019 at 4:12 PM, Adlago said:

Render-blocking CSS is easily removed using the preload CSS function.
How is this done in IPS? It's easy - follow these instructions.
You first need to create a blank template for your theme.
Open for edit HTML and CSS your theme.
Click New - HTML Template

and fill out a blank creation as shown.

Open Template:
core/global/analisys/preload_css

and put the code below in this template. Save.

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}

Open your globalTemplate
Find this in head

{template="includeCSS" app="core" group="global" location="global" params=""}

and put before, code below. Save.

{template="preload_css" app="core" location="global" group="analysis" params=""}

That's all - now a browser user will load your CSS without a render-blocking.
You can use the ACP support tool to remove the cache on your site.
Do the tests and share the result. I know that now your site loads faster. Good luck.

It's a little bit better, but not good, still slow:

[sobrenome]

I would like to use cloudflare http2 push, but I don't know how to do it as long as IPS uses versioning of CSS files:

https://www.cloudflare.com/website-optimization/http2/serverpush/

It is also possible to use cloudflare workers:

https://stackoverflow.com/questions/49428779/cloudflare-workers-check-for-cookie-add-headers-set-cookie/49459132#49459132

[sobrenome]

I will create a new template to send the command by LinkHeader to preload CSS and avoid cloudflare roundtrips to the origin server:

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
{{header("Link: <{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}>; rel=preload; as=style");}}
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
{{header("Link: <{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}>; rel=preload; as=style");}}
{{endforeach}}

I know that this code has an error related to the use of the parsing expression inside PHP. How can I fix it? Thanks.

[Adlago]

The PSI test has shown you what the main delay is now - see this.

There is probably a problem with the use of ad codes, which is a long delay ...

[sobrenome]

5 minutes ago, Adlago said:

There is probably a problem with the use of ad codes, which is a long delay ...

These codes are all inserted automatically by google java script.

Is this the way to go?

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
{{header("Link: <'\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )'>; rel=preload; as=style");}}
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
{{header("Link: <'\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )'>; rel=preload; as=style");}}
{{endforeach}}

 

[Adlago]

1 minute ago, sobrenome said:

These codes are all inserted automatically by google java script.

Then check all the areas where you use ads - any of these areas may conflict with the IPS codes and make these delays.

Try and remove areas with adverts - one at a time - and test. You will probably find a problem area

[sobrenome]

8 minutes ago, Adlago said:

Try and remove areas with adverts - one at a time - and test. You will probably find a problem area

Using google auto ads placing:

https://support.google.com/adsense/thread/1603676?hl=en

[sobrenome]

How to preload fontawasome and icomoon?

[Adlago]

3 minutes ago, sobrenome said:

How to preload fontawasome and icomoon?

Add before

{template="preload_css" app="core" location="global" group="analysis" params=""}

in global template

<link rel="preload" href="/applications/core/interface/font/icomoon.woff?v=-29n77j" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

 

[sobrenome]

I am having trouble with the Link header sent by PHP:

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
{{$link = \IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY );}}
{{header("Link: <{$link}>; rel=preload; as=style", false);}}
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
{{$link = \IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY );}}
{{header("Link: <{$link}>; rel=preload; as=style", false);}}
{{endforeach}}
{{header("Link: </applications/core/interface/font/icomoon.woff?v=-29n77j>; rel=preload; as=font; type=\"font/woff\"; crossorigin=anonymous", false);}} 
{{header("Link: </applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0>; rel=preload; as=font; type=\"font/woff2\"; crossorigin=anonymous", false);}} 

I don't know why the header is sent without the URIs:

HTTP/1.1 200 OK => 
Date => Mon, 25 Nov 2019 16:08:30 GMT
Content-Type => text/html;charset=UTF-8
Connection => close
Set-Cookie => ips4_guestTime=1574698109; path=/; secure; HttpOnly
Link => ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ; rel=preload; as=style, ''; rel=preload; as=font; type="font/woff"; crossorigin=anonymous, ; rel=preload; as=font; type="font/woff2"; crossorigin=anonymous
X-IPS-LoggedIn => 0
Vary => cookie,Accept-Encoding
X-XSS-Protection => 0
X-Frame-Options => sameorigin
Expires => max-age=29030400, public
Cache-Control => max-age=300, public
Pragma => public
Last-Modified => Mon, 25 Nov 2019 16:08:30 GMT
CF-Cache-Status => DYNAMIC
Alt-Svc => h3-23=":443"; ma=86400
Expect-CT => max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Server => cloudflare
CF-RAY => 53b4e1b33f50ea4d-IAD

 

[sobrenome]

It's working like this:

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
{{$link = \IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY );}}
{{header("Link: <$link>; rel=preload; as=style", false);}}
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
{{$link = \IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY );}}
{{header("Link: <$link>; rel=preload; as=style", false);}}
{{endforeach}}
{{header("Link: </applications/core/interface/font/icomoon.woff?v=-29n77j>; rel=preload; as=font; type=\"font/woff\"; crossorigin=anonymous", false);}} 
{{header("Link: </applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0>; rel=preload; as=font; type=\"font/woff2\"; crossorigin=anonymous", false);}} 

HTTP/1.1 200 OK => 
Date => Tue, 26 Nov 2019 03:45:34 GMT
Content-Type => text/html;charset=UTF-8
Connection => close
Set-Cookie => ips4_guestTime=1574739933; path=/; secure; HttpOnly
Link => <https://fisiculturismo.com.br/uploads/css_built_22/341e4a57816af3ba440d891ca87450ff_framework.css.d618cee9acb7c51d98b0602fb11c5cd5.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/05e81b71abe4f22d6eb8d1a929494829_responsive.css.245511444ca4fd14fc066b4fe4a8b598.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/20446cf2d164adcc029377cb04d43d17_flags.css.4c0f1ff72b67d4fc8e7e2a26e842f401.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/90eb5adf50a8c640f633d47fd7eb1778_core.css.31f29829afc394592e0d1218f21735d0.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/5a0da001ccc2200dc5625c3f3934497d_core_responsive.css.8fd44ffc8346a718c16c87ebfba0dd84.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/page_objects/_custom_album_imagens.css.c8382aedc9e68505cc987414b45bb460.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/9037af43189dec1f1ca4d162227a3350_record.css.bfca8e37b7ad30bfcc14ee5aaf81ba9b.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/97c0a48072ce601c9764cb6b00a6588a_page.css.d893d5aa8b2a2b9851ee203148a0cdf0.css?v=ec7eac4f39>; rel=preload; as=style, <https://fisiculturismo.com.br/uploads/css_built_22/258adbb6e4f3e83cd3b355f84e3fa002_custom.css.411270f0c271abd93509334b0804c7a3.css?v=ec7eac4f39>; rel=preload; as=style, </applications/core/interface/font/icomoon.woff?v=-29n77j>; rel=preload; as=font; type="font/woff"; crossorigin=anonymous, </applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0>; rel=preload; as=font; type="font/woff2"; crossorigin=anonymous
X-IPS-LoggedIn => 0
Vary => cookie,Accept-Encoding
X-XSS-Protection => 0
X-Frame-Options => sameorigin
Expires => max-age=29030400, public
Cache-Control => max-age=300, public
Pragma => public
Last-Modified => Tue, 26 Nov 2019 03:45:34 GMT
CF-Cache-Status => DYNAMIC
Alt-Svc => h3-23=":443"; ma=86400
Expect-CT => max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Server => cloudflare
CF-RAY => 53b8deca682eea30-IAD

But the code is strange. Could someone help with a more clean code?

[sobrenome]

Another question: how to retrieve only the folder and the file name, not the full URL?

\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )

This code outputs the full URL.

[sobrenome]

What should be the code to preload JS?

And how could I check if CSS and JS are being preloaded?

Thanks.