Elliot 14 Posted April 28, 2018 Report Share Posted April 28, 2018 Всем привет! На всем известном инструменте 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 стиля (которые висят на сайте) что я только не делал, как не шаманил, загружается только один стиль - другой(ие) нет... Помогите решить проблему. Спасибо! Quote Link to post Share on other sites
sda 7 Posted April 28, 2018 Report Share Posted April 28, 2018 просто делаете несколько строк со стилями в блоке: <noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript> весь смысл кода, когда документ загружен, создается div в него заносятся строки из deferred-styles и он добавляется в конец body, после чего браузер автоматом их загружает Quote Link to post Share on other sites
Beauty 172 Posted April 28, 2018 Report Share Posted April 28, 2018 <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> Quote Link to post Share on other sites
Elliot 14 Posted April 28, 2018 Author Report Share Posted April 28, 2018 (edited) 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 April 28, 2018 by Elliot Quote Link to post Share on other sites
Beauty 172 Posted April 28, 2018 Report Share Posted April 28, 2018 Поставьте Autoptimized он все это умееет и стили и скрипты и шрифты defer делает Quote Link to post Share on other sites
Elliot 14 Posted April 28, 2018 Author Report Share Posted April 28, 2018 3 часа назад, Beauty сказал: Поставьте Autoptimized он все это умееет и стили и скрипты и шрифты defer делает Посмотрел как он работает, он все стили обьединяет в один, но проблема в том, что вместо трех, pagespeed видит два но уже от этого плагина... Не думаю что это лучший вариант чем от гугла... Вопрос открыт.. Quote Link to post Share on other sites
Elliot 14 Posted April 29, 2018 Author Report Share Posted April 29, 2018 Топорно сделал вот так: <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 не ругался? Quote Link to post Share on other sites
Димон 12 Posted April 29, 2018 Report Share Posted April 29, 2018 Ваш вариант очень плох. Каждый файл css это один запрос к серверу, Гугл подсказывает вам сделайте один (объедините все в одном css). А чтобы не потеряться в это большом css делайте комментарии /*меню*/ или /*рейтинг*/ Quote Link to post Share on other sites
Elliot 14 Posted April 29, 2018 Author Report Share Posted April 29, 2018 Сделать один css?)) Я уже пробовал это провернуть, вышло не очень хорошо, лучше я пожертвую парой запросов... Quote Link to post Share on other sites
Димон 12 Posted April 29, 2018 Report Share Posted April 29, 2018 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 1 Quote Link to post Share on other sites
Elliot 14 Posted April 29, 2018 Author Report Share Posted April 29, 2018 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 разобраться для полного счастья)) Quote Link to post Share on other sites
Beauty 172 Posted April 29, 2018 Report Share Posted April 29, 2018 14 минуты назад, Elliot сказал: Я не о том подумал, ваш способ работает. Теперь осталось еще с jquery разобраться для полного счастья)) перенести его в футер, а все остальные скрипты сделать после него Quote Link to post Share on other sites
VIP campusboy 912 Posted April 29, 2018 VIP Report Share Posted April 29, 2018 10 часов назад, Димон сказал: Создаете, например файл default.css там прописываете @import "small0.css" all; @import "small1.css" all; @import "small2.css" all; Это самый медленный способ. Браузеру надо сначала default.css загрузить, а затем, чтобы распарсить его правильно, последовательно загрузить все "внутренние" css. Пруф (англ), перевод. Elliot 1 Quote Link to post Share on other sites
Elliot 14 Posted April 29, 2018 Author Report Share Posted April 29, 2018 Мда... А какой тогда лучше?? Quote Link to post Share on other sites
Beauty 172 Posted April 29, 2018 Report Share Posted April 29, 2018 отето вы заморочились) покажите потом сайт, интересно посмотреть на этого франкенштейна))) Quote Link to post Share on other sites
Димон 12 Posted April 30, 2018 Report Share Posted April 30, 2018 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 и нормально работает. А вообще сами пробуйте и смотрите, что лучше!!! Quote Link to post Share on other sites
Elliot 14 Posted April 30, 2018 Author Report Share Posted April 30, 2018 1 час назад, Димон сказал: А вообще сами пробуйте и смотрите, что лучше!!! Мне кажеться, лучше будет как говорит гугл, тем более, выяснилось что у меня некоторые стили маленькие и используются плагинами, так что выведу их там. 12 часа назад, Beauty сказал: отето вы заморочились) покажите потом сайт, интересно посмотреть на этого франкенштейна))) Я свято верю, что в нашем алчном мире есть еще очень много людей с смешным интернетом, и по этому, хочу сделать быструю загрузку сайта не только для поисковиков но и для людей. На pingdom.com пока что Load time 2.33 s так что у меня еще есть куда стремится) Quote Link to post Share on other sites
Beauty 172 Posted May 1, 2018 Report Share Posted May 1, 2018 В 30.04.2018 в 2:37 PM, Elliot сказал: Мне кажеться, лучше будет как говорит гугл, тем более, выяснилось что у меня некоторые стили маленькие и используются плагинами, так что выведу их там. Я свято верю, что в нашем алчном мире есть еще очень много людей с смешным интернетом, и по этому, хочу сделать быструю загрузку сайта не только для поисковиков но и для людей. На pingdom.com пока что Load time 2.33 s так что у меня еще есть куда стремится) 4G даже в Украине вот вот запустят, так что особо заморачиваться смысла нет. В РФ даже в Сибири давно есть ютуберы которые снимают видео в прямом эфире))) Quote Link to post Share on other sites
Elliot 14 Posted May 1, 2018 Author Report Share Posted May 1, 2018 в украине не везде 3g есть,а тут о 4g))) все же, я думаю лучше будет если страница будет загружатся быстрее, и лучше в плане поисковиков Quote Link to post Share on other sites
Beauty 172 Posted May 1, 2018 Report Share Posted May 1, 2018 1 час назад, Elliot сказал: в украине не везде 3g есть,а тут о 4g))) все же, я думаю лучше будет если страница будет загружатся быстрее, и лучше в плане поисковиков Это одна из стран третьего мира где обещают этим летом 4G Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.