performance improvement speed loading page to improve google ranking

[analis]

I wanted to try this technique but I'm not sure of the real benefits.

<style><?php echo(file_get_contents("file.css"));?></style>

the score on pagespeed rises from 94/95 to 99


pages without CSS are 5/15 KB
file.css size 70 KB

[keyplyr]

Fulfilling the request via PHP *may* technically be faster than sending an additional packet by browser, but any benefit would be negotiable since the CSS file is in the same place & needs to be retrieved. To see any advantage in speed, the CSS would need to be in the page mark-up, not somewhere else.

Having said that, regardless of what Google's Page Speed reports, in today's mobile responsive design, for most pages it is not reasonable to put huge CSS code in the HTML.

Google's tool does not efficiently measure page speed, there are too many variables. It grades on the issues that can cause slow speed. It fails to take into account that a CSS file is cached by a human with a browser.

[analis]

Lighthouse in Chrome with this technique gives me that reduces of 700 ms ?

text:

reduce render-blocking stylesheets 700 ms

[robzilla]

Is that 70 KB gzipped? Because that's... huge.

Obviously, if you're going to inline your CSS, your HTML will increase by 70 KB for every page request.

If a user visits 4 pages, it might currently look a bit like this:
- HTML 10 KB x 4 = 40 KB
- CSS 70 KB x 1 (served from cache for subsequent pageviews)
Total: 110 KB

Inlining your CSS will result in something like this:
- HTML (10 KB + 70 KB) x 4 = 320 KB (inline CSS cannot be cached)
Total: 320 KB

That's 3x the payload. The more pages viewed, the worse it gets. At 10 pageviews you're up to 800 KB vs 150 KB.

Why is your CSS 70 KB large, and can you do anything about that?

[NickMNS]

Robzilla has got it.
The benefit of inlining (or including) is that you save the server request and the page can start rendering immediately. But the added code on the page slows the initial request. So the only way to gain advantage is to minimize (not minify, but that too) the CSS used and only include what is needed for that page.

(inline CSS cannot be cached)

While this true, there is a way around it. SPA or single page app, where one uses a use shell page that includes the inline CSS (the page is cached and only loaded once) and then AJAX is used to load the content. But that approach is not for everyone.

[analis]

css:

Uncompressed size : 73,860 bytes
Compressed size : 8,955 bytes

it's too much?
can I include without problems?

[robzilla]

OK, that makes more sense. So you'll want to make sure GZIP is, in fact, enabled on your server.

If GZIP is enabled, it seems unlikely you'd save 700 ms just by inlining the CSS (which is not exactly what Google recommends either).

[analis]

gzip is enabled.

I can not understand the real benefits using AUDITS testing in google Chrome.

with external css (first meaningful paint):

test 1) 7.970 ms
test 2) 2.300 ms
test 3) 4.890 ms


with php technique including css (first meaningful paint):

test 1) 13.540 ms
test 2) 1.570 ms
test 3) 2.500 ms

[NickMNS]

This may have to do with your server response time. The first without any cached assets and then the 2nd and 3rd with cached assets.

[robzilla]

That 700 ms makes more sense now that you're referring to Chrome's Audits panel. It tests your page using a simulated 3G connection.

I actually get a very similar recommendation: 600 ms shaved off potentially by reducing render-blocking CSS.

It does work. It reduced my FMP from 1250 to 670, and First Interactive from 2770 to 2230. Again, that's only on a 3G connection.

My subsequent test results don't differ like yours. Make sure you don't do anything else while the audit is running, and disable ads if you can.

Because a CSS file can be cached, inlining your stylesheet is only helpful for the first pageview (with an "empty" cache). So what you could do is inline the CSS on the first request, then use Javascript or an iframe to make a call to the CSS file after the page has finished loading so that it's downloaded to the browser cache (assuming you have the proper caching headers), and then set a cookie so that for subsequent request you'll know the user probably has the CSS file in their cache and you can replace the inline stylesheet with a reference to the CSS file.

[analis]

I created two new pages the same one with external css one with css included, I have done several tests now you understand better.

with external css the times are all in zone 2 seconds, with css included 1.2 / 1.3 seconds.

Both pages had advertising banners inside.

I do not know why today's times were so different ..

[robzilla]

Could be your internet connection, your computer, the server your website is hosted on... and it could also be the Audits tool. I didn't run many tests but it did lag one time, resulting in some skewed measurements, so it's important to run multiple tests.

[analis]

I did tests without CSS the time is about 1 second, compared to 1.2 / 1.3 seconds including php the css. With external css are about 0.6/0.7 seconds longer.

Including with php all the css do not burden the page too much.

I did a test instead with pagespeed insign and starts to give problems the score goes down from 99 to 95 (give priority to visible content) with

Uncompressed size 917,845 bytes
Compressed size 101,217 bytes

under this level it says everything is ok under this level says everything ok but the test audit says 6/7 seconds loading. Pagespeed insign is too wrong.

[analis]

without css 1.0 seconds
with only the css useful in page 1.1 seconds
with all the css included 1.3 seconds
with external css 2.0 seconds


I decided to include (all) the css hopefully in July with the google algorithm of rewards and that increase the visitors.

[keyplyr]

I think way too much importance is being put on the Page Speed tool.

[robzilla]

I decided to include (all) the css hopefully in July with the google algorithm of rewards and that increase the visitors.

Don't count on it. Site speed is not all that important in the grand scheme of... rankings.

Also, if you in-line the CSS on every pageview, you're needlessly slowing your users down (if they visit more than one page or come back later). If you want to get the most out of it, use something like the cookie method I outlined earlier. Then measure how it actually affects your users.

Something I have to repeat often is to not get hung up on test scores. A page with a score of 50 can be faster than one with a score of 100.