Elliot

Асинхронная загрузка CSS как советует Google

Started by Elliot,

20 posts in this topic

Posted · Report post

Всем привет!

На всем известном инструменте developers.google.com/speed/pagespeed тестю сайт, и в мобильной версии всем ненавистное предупреждение о "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы" и там есть подсказка ведущая на эту страницу где говориться о асинхронной доставке CSS.

С моими скудными знаниями английского и гугл переводчиком, я выяснил, что благодаря их методу, можно асинхронно загрузить css.

Вот их метод: 

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Я проверил на главном стиле темы, да, сначала загружается critical css а потом и остальной стиль, потом проверил уже на тесте и, ура, гугл не увидел блокирующего стиля который я прикрыл их методом, из за чего балл немного вырос.

Но вот в чем незадача, тупо не понимаю, как же заставить работать по этому же методу 2 и 3 стиля (которые висят на сайте) что я только не делал, как не шаманил, загружается только один стиль - другой(ие) нет...

Помогите решить проблему.

Спасибо!

Share this post

Link to post
Share on other sites

Posted · Report post 

просто делаете несколько строк со стилями в блоке:
<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>

 

весь смысл кода, когда документ загружен, создается div в него заносятся строки из deferred-styles и он добавляется в конец body, после чего браузер автоматом их загружает

Share this post

Link to post
Share on other sites

Posted · Report post 

 <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
      <link rel="stylesheet" type="text/css" href="small1.css"/>
      <link rel="stylesheet" type="text/css" href="small2.css"/>
      <link rel="stylesheet" type="text/css" href="small3.css"/>
      <link rel="stylesheet" type="text/css" href="small4.css"/>

  

</noscript>

Share this post

Link to post
Share on other sites

Posted (edited) · Report post

7 часов назад, Beauty сказал: 

 <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
      <link rel="stylesheet" type="text/css" href="small1.css"/>
      <link rel="stylesheet" type="text/css" href="small2.css"/>
      <link rel="stylesheet" type="text/css" href="small3.css"/>
      <link rel="stylesheet" type="text/css" href="small4.css"/>

  


</noscript>

К сожалению данный способ не работает... Вернее стили загружаются но pagespeed их видит, если только один стиль указать, то этот стиль будет загружаться но pagespeed его видеть не будет...

Edited by Elliot

Share this post

Link to post
Share on other sites

Posted · Report post

Поставьте Autoptimized он все это умееет и стили и скрипты и шрифты defer делает

Share this post

Link to post
Share on other sites

Posted · Report post

3 часа назад, Beauty сказал:

Поставьте Autoptimized он все это умееет и стили и скрипты и шрифты defer делает

Посмотрел как он работает, он все стили обьединяет в один, но проблема в том, что вместо трех, pagespeed видит два но уже от этого плагина...

Не думаю что это лучший вариант чем от гугла...

 

Вопрос открыт..

Share this post

Link to post
Share on other sites

Posted · Report post

Топорно сделал вот так: 

    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
      
      var loadDeferredStyles2 = function() {
        var addStylesNode = document.getElementById("deferred-styles2");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles2, 2000); });
      else window.addEventListener('load', loadDeferredStyles2);
    </script>
<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
</noscript>
<noscript id="deferred-styles2">
      <link rel="stylesheet" type="text/css" href="small1.css"/>
</noscript>

И так далее, вышло 7 стилей, гугл их не видbт, да и время загрузки можно настроить, например для личного кабинета 10сек, пока пользователь в него зайдет то уже и css загрузиться))

 

Но вот беда с этим jquery асинхронно или отложено его не загрузить, вернее загрузить можно, но работать он не будет, и соответственно все для чего нужна эта библиотека. 

Кто знает как еще можно jquery подгрузить чтобы pagespeed не ругался?

Share this post

Link to post
Share on other sites

Posted · Report post

Ваш вариант очень плох. Каждый файл css это один запрос к серверу,  Гугл подсказывает вам сделайте один (объедините все в одном css). А чтобы не потеряться в это большом css делайте комментарии /*меню*/ или /*рейтинг*/

Share this post

Link to post
Share on other sites

Posted · Report post

Сделать один css?)) Я уже пробовал это провернуть, вышло не очень хорошо, лучше я пожертвую парой запросов...

Share this post

Link to post
Share on other sites

Posted · Report post

20 минут назад, Elliot сказал:

Сделать один css?)) Я уже пробовал это провернуть, вышло не очень хорошо, лучше я пожертвую парой запросов...

Интересно почему вышло НЕ ОЧЕНЬ ХОРОШО, много сайтов испольуют один файл css и у них все работает нормально.

А вы не пробовали @import

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

В скрипте указать

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="default.css"/>
</noscript>

Elliot likes this

Share this post

Link to post
Share on other sites

Posted · Report post

10 часов назад, Димон сказал:

Интересно почему вышло НЕ ОЧЕНЬ ХОРОШО, много сайтов испольуют один файл css и у них все работает нормально.

А вы не пробовали @import

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

В скрипте указать

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="default.css"/>
</noscript>

Я не о том подумал, ваш способ работает. Теперь осталось еще с jquery разобраться для полного счастья))

Share this post

Link to post
Share on other sites

Posted · Report post

14 минуты назад, Elliot сказал:

Я не о том подумал, ваш способ работает. Теперь осталось еще с jquery разобраться для полного счастья))

перенести его в футер, а все остальные скрипты сделать после него

Share this post

Link to post
Share on other sites

Posted · Report post

10 часов назад, Димон сказал:

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

Это самый медленный способ. Браузеру надо сначала default.css загрузить, а затем, чтобы распарсить его правильно, последовательно загрузить все "внутренние" css. Пруф (англ), перевод.

Elliot likes this

Share this post

Link to post
Share on other sites

Posted · Report post

отето вы заморочились) покажите потом сайт, интересно посмотреть на этого франкенштейна)))

Share this post

Link to post
Share on other sites

Posted · Report post

12 часа назад, campusboy сказал:

Это самый медленный способ. Браузеру надо сначала default.css загрузить, а затем, чтобы распарсить его правильно, последовательно загрузить все "внутренние" css. Пруф (англ), перевод.

Да я тоже когда-то слышал, что это замедляет загрузку. Но этой статье 10 лет, и за 10 лет многое изменилось (например скорость инета). У меня прописан @import я даже моргнуть не успеваю, как сайт загрузится. Да и в default.css будет прописано всего одна строка.

@import "small0.css" all; @import "small1.css" all; @import "small2.css" all;

10 часов назад, Elliot сказал:

Мда... А какой тогда лучше??

Лучше сделать один файл css

Оф. сайт Dle использует один файл css и нормально работает.
А вообще сами пробуйте и смотрите, что лучше!!!

Share this post

Link to post
Share on other sites

Posted · Report post

1 час назад, Димон сказал:

А вообще сами пробуйте и смотрите, что лучше!!!

Мне кажеться, лучше будет как говорит гугл, тем более, выяснилось что у меня некоторые стили маленькие и используются плагинами, так что выведу их там.

 

12 часа назад, Beauty сказал:

отето вы заморочились) покажите потом сайт, интересно посмотреть на этого франкенштейна)))

Я свято верю, что в нашем алчном мире есть еще очень много людей с смешным интернетом, и по этому, хочу сделать быструю загрузку сайта не только для поисковиков но и для людей.

На pingdom.com  пока что Load time 2.33 s так что у меня еще есть куда стремится)

Share this post

Link to post
Share on other sites

Posted · Report post

В 30.04.2018 в 2:37 PM, Elliot сказал:

Мне кажеться, лучше будет как говорит гугл, тем более, выяснилось что у меня некоторые стили маленькие и используются плагинами, так что выведу их там.

 

Я свято верю, что в нашем алчном мире есть еще очень много людей с смешным интернетом, и по этому, хочу сделать быструю загрузку сайта не только для поисковиков но и для людей.

На pingdom.com  пока что Load time 2.33 s так что у меня еще есть куда стремится)

4G даже в Украине вот вот запустят, так что особо заморачиваться смысла нет.

В РФ даже в Сибири давно есть ютуберы которые снимают видео в прямом эфире)))

Share this post

Link to post
Share on other sites

Posted · Report post

в украине не везде 3g есть,а тут о 4g)))

все же, я думаю лучше будет если страница будет загружатся быстрее, и лучше в плане поисковиков

Share this post

Link to post
Share on other sites

Posted · Report post

1 час назад, Elliot сказал:

в украине не везде 3g есть,а тут о 4g)))

все же, я думаю лучше будет если страница будет загружатся быстрее, и лучше в плане поисковиков

Это одна из стран третьего мира где обещают этим летом 4G

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Go To Topic Listing Сайтостроительство

  • Recently Browsing   0 members

    No registered users viewing this page.