Why does Google recommend inline CSS?

Asked

Viewed 726 times

8

I was optimizing a site from a client who insists on wanting to get a high score in Pagespeed Insights, and I’m having problems with "eliminating Javascript and rendering blocking CSS in content above the edge".

Even after minifying CSS, I’m still charged for uploading it previously to the site. So I asked myself, "What does Google recommend? Why import CSS at the bottom of the page? That wouldn’t leave it completely unstructured until the final upload?"

I got into the recommendations and Google recommended a stylesheet upload inline via <style>!

I’m not belittling the giant, but why the hell does Pagespeed Insights recommend something so crude, according to current standards? Practically forces the use of a preloader, which in turn disrupts slow connections.

A detail: not even Google’s own sites can get close to the ideal. A beautiful example is the Google Fonts, receiving a mobile note of 67/100.

  • I don’t understand exactly what you want to know; is if Google really recommends using tag <style>? In this case, the question itself answers itself, although it speculates that they must perform some algorithm that does not always recommend using style inline.

  • 1

    @Wtrmute edited the question. Really, it was not very clear.

  • See https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example. One of the recommendations is to prioritize the content above the page fold, that is, load the styles needed to render page header and top and leave footer style for example last. CSS inline only if small.

  • 1

    He says: "incorporate the core parts online" and understand that core parts are not the entire CSS. And even before that he recommends you "postpone or asynchronously load the blocking features". Remember that using styles on the page inside <style> not wrong, just know what you are doing. Follows the page.

  • @Andersoncarloswoss but use via styles <style> does not hinder SEO? Wouldn’t this technique presented generate an extra job of preparing the screen for early loading? In addition, reading inline css would not be the same linked css, avoiding only a request?

  • 1

    @rodorgas: This document provides enough information for a response, although the automatically translated Portuguese version is terrible. Why don’t you try to get laid?

Show 1 more comment

3 answers

9

It is not recommended to insert CSS inline indistinctly, but in a specific case: when the stylesheet is small.

It’s true that the page is unstructured if you leave the CSS pro end, but if the CSS is too big the page can take too long. Why not a middle ground? A little up (critical part) and the rest down. Google explicitly says: prioritize the visible content:

In the case of a large CSS file, it will be necessary to identify and insert the CSS needed to process the content of the region above the fold and postpone loading the remaining styles until after the content above the fold is processed.

Even when the minimum CSS is too large to inline, you can use this logic. For example:

<html>
  <head>
    <link rel="stylesheet" href="estilos-usados-acima-da-borda.css">
  </head>
  <body>
    conteúdo
    etc

    <link rel="stylesheet" href="outros-estilos.css">
  </body>
</html>

Remember (yourself or your customer) that indicators like Pagespeed Insights are not meant to be templates. They give great ideas and optimization tips, but have no way of knowing the particularities of each site.

7


It is not everything, it is only what is priority, few fundamental parts of page loading.

Follow the tag fragment :

Pagespeed Insights is a tool made available by Google that measures the performance of a page on mobile and desktop devices. It searches the URL twice, once with a user agent mobile device and once with a user agent computer, generating suggestions to make it faster.

Suggestions, that is, based on the opinion of Google, you can do x thing, to improve.

BUT, it may be that what the "giant" is saying harms your site, since she has no knowledge of how you are developing your site, but this is another issue that you as a developer should see, calculate and make the necessary modifications and not simply do X thing because the giant said...

That said, it is important to look at the site itself Google Developers, related to CSS, and read carefully what they say(my emphasis):

The in-line insertion of small CSS allows the browser to proceed with page processing.

It is recommended to incorporate the CSS critical in-line. Small fundamental parts, to load the styles needed to render the parts needed for your page.

In the case of a large CSS file, it will be necessary to identify and insert the necessary CSS in-line to process the content of the region above the fold.

In other words, reinforcing again, it is recommended to insert only what is irrefutably necessary to render your site and if it is a large CSS file, you as developer should analyze what is important to load/be loaded to avoid rendering blocking on content above the edge and make the appropriate changes.

Example

If the HTML document looks like this:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

And the resource small.css be it so:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Insert the CSS critical in-line as follows:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Did you see? You only inserted what is important, the visible content of the page. Despite having several CSS rules in small.css, placed the priority on the page, which was the class=blue, what the user will see right away when entering your page.

You can also try to asynchronously postpone or load the blocking features.

About your client

Tell him that’s a tool, that generates suggestions and recommendations, which are generally generic to any site, and not specific to its pages. Also say that the important thing is not that Google approves it, but that its customers approve it. Who wants to have a website that Google approves, but that no one accesses?

This test checks whether the page uses common best practices for performance. A high score is correlated to a fast user experience, but it does not guarantee that. - Google

Of course don’t ignore everything Google says, but don’t blindly accept everything look for the balance between Google and its customers.

Note: Particularly I have never seen a site 100/100.

Just remember, they are recommendations, they are not rules that should always be followed blindly, they are very generic. Apply them sparingly.

Sources:

  • Got 100/100, just remove all css and javascript from the site :P

  • 4

    That way I can also, just generate an error 500 that gives 100/100 @Denisrudneidesouza

-2

No doubt. In fact, blindly applying the recommendations of Google reaches 100/100, but with losses to the layout of the site (css changed and note 100) or the performance of loading the site (css inline and note 100). I noticed it’s a double-edged knife, you get the note on Pagespeed by losing something on the site somehow. It was good to come here and read the considerations, now I can disentangle this obsession of 100/100 (the note of my site is 97).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.