Login/Register
Is this way of internal CSS valid?
Asked Answered
Solved cssgoogle-pagespeed
I

1

6

I am trying to optimize a small website, I am now looking into the CSS.

Let's take the example of index.php. I have first done it the standard way by adding <link rel="stylesheet" href="style.css"> in the <head> of my HTML output.

Google PageSpeeds then complains about the render-blocking files.

I then tried an alternative way and instead of the <link> tag above, I added this in the <head> :

<style>
    <?php include 'style.css';?>
</style>

This effectively gives me an internal CSS while still having the convenience of having one file for all my pages. I do not have render blocking files anymore and PageSpeed seems happier.

Is there any significant drawback here? Should I be as happier as Google PageSpeed is?

Incantation answered 19/9, 2018 at 4:7 Comment(2)
The browser won't cache that CSS file if you're using it on other pages of the site. That's the biggest drawback. – Vinitavinn
And that php include is a true block on loading. It has to read the filesystem and output the contents before moving on to the rest of the contents. The browser fetches the CSS file from your link element as a separate request, leaving the main output to continue and finish. The biggest drawback to this "render blocking" is that the page may flicker before the CSS has loaded. – Vinitavinn
R
7

Google's documentation for optimizing CSS delivery suggests only inlining small amounts of critical CSS. You'll find that caching techniques can reduce the parsing time required for including your CSS file. There will be a sweet spot where it's worth the maintenance cost.

You could look at installing the Page Speed module as well. Some more articles about PHP caching are below. You might also look at enabling compression for your static file transfers - that reduces the size for most text files significantly.

Rovner answered 19/9, 2018 at 4:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.