CSS Styles before closing </body> - how could they block rendering?

[Кирилл Раченков]

Hi there!

Testing results:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.matras-barabas.ru%2F

Website: https://www.matras-barabas.ru/

Source code:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css" async="async" />

<link href="/bundles/styles.css?v=1Zy8d6Fvy5x5CDxL0BND340h0ZryABg5iv3pYn9SPKA1" rel="stylesheet"/>

<script type="text/javascript" src="//yastatic.net/jquery/2.2.3/jquery.min.js"></script>

<script src="/bundles/scripts.js?v=NomUnxy2ZAAiEtOK-OXYRB1j99DwWeaHdq46mCCBd3Q1"></script>

<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script>

</body>

</html>

But why pagespeed insights reports

https://fonts.googleapis.com/…n+Sans:300,400,700&subset=latin,cyrillic
https://www.matras-barabas.ru/…d6Fvy5x5CDxL0BND340h0ZryABg5iv3pYn9SPKA1

are blocking rendering 4% of this page. I cant not understand. Any help is appreciated.

[Rick Steinwand]

The page isn't done loading until everything is loaded.

Try using javascript to load them AFTER the page loads.

https://jonassebastianohlsson.com/criticalpathcssgenerator/

https://github.com/filamentgroup/loadCSS

[Кирилл Раченков]

Thank you!

Is it good for SEO? Search engines can analyze website usability and elements sizes and colors. How could they find css files loaded by javascript?

понедельник, 17 октября 2016 г., 20:34:27 UTC+3 пользователь Rick Steinwand написал:

[Rick Steinwand]

Yes, you need it.

You'd be surprised what they can do. They use a browser that runs JS like everyone else.