Display css with file_get_contents to avoid rendering blocking

Asked

Viewed 31 times

0

I’m optimizing a site (which has already improved a lot) and in Google’s Pagespeed Tools, says I have to "Eliminate Javascript and CSS rendering blocking content above the edge".

It worked out that way:

<style style="text/css">
  <?php
  /* Sweet alert */
  
  echo file_get_contents('js/sweetalert-master/dist/sweetalert.css');
  ?>
</style>

With file_get_contents in PHP. But the sources, like this:

<link rel="stylesheet" href="fonts/open_sans/stylesheet.css">

file_get_contents does not work.

I can put the link of the fonts in the footer, but the site loads without the fonts and does not get a cool aesthetic.

  • What is the result of echo?

  • Face the fountains are one of the first things you have to carry. she has to stay there in the same head. You can test by making a include to see if it improves. But remember that not everything that Google talks about in these tools is ideal for all cases. On your site the font is part of the content "above the fold" because it appears before the first scroll, so it has to come right at the beginning of the same document!

  • 1

    Rogerio with style and file_get_contents will have to reload the CSS all the time, will consume more of the server and on top of that will lose the advantage of using the cache, to use <link> see the answer I formulated: https://answall.com/a/115240/3635 - would be like this <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">&#xA;<noscript><link rel="stylesheet" href="css.css"></noscript> (ps: in older Androids than 4.4 might not work so in the answer I left a solution to load CSS with JS)

No answers

Browser other questions tagged

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