Привет друзья! Эта статья будет продолжением прошлой >> Увеличиваем скорость загрузки страницы сайта. Там, в самом конце, я показал, что можно добиться недюжих результатов в оптимизации по версии PageSpeed Insights, и показал, что я от идеала по их версии отказался. Почему? Вот об этом и поговорим.
Переоптимизация сайта или Pagespeed Insights необъективен.
Дело в том, что современные шаблоны имеют адаптивный дизайн априори, а значит и размеры изображений меняют, подстраиваясь под размер экрана посетителя. Допустим мой шаблон для широкоформатных мониторов отрисовывает миниатюру сбоку 240 х 240 px, стоит же изменить разрешение (размер окна браузера) — изображение миниатюры адаптируется — выводится сверху анонса и с гораздо большим разрешением. Недостаток PageSpeed Insights именно в том, что сайт данный сервис рассматривает в 2 позициях — для смартфона и для широкоформатного монитора. А про то, что есть планшеты и ретина дисплеи — видимо не догадывается. Это касается изображений.
Еще данный сервис (или инструмент) очень любит, чтоб массивные css-стили подгружались «после отображения видимой части страницы». Так то оно хорошо конечно, но есть одно но. Если выполнить сие условие — у меня 98 очков для компьютера и 97 для телефона (см. рис.), НО!!!
Сначала грузится страница (HTML), потом изображения (и всё это черт знает как отображается без стилей), а потом уже, после полной загрузки страницы — начинает на глазах превращаться в нормальный адаптивный дизайн. Ребята из Гугла! Поймите! Это все хорошо для сайтов на голом Html, на худой конец для дефолтных шаблонов WordPress. Но любой премиу-шаблон — имеет кучу встроенных стилевых правил, которые при всем желании в 30кв уместить нельзя! Почему 30 килобайт? Опытным путем установил эту цифру. До этой отметки — нормальный CSS, после — тяжелый. Думаю, не, я тебя победю один хрен! Стал искать и удалять неиспользуемые на сайте правила. 2 дня потратил на это. И что? ТОЛЬКО ИСПОЛЬЗУЕМЫХ ПРАВИЛ НА САЙТЕ — 250кв. Куда уж мне до Гугловских идеалов))) А опускать CSS вниз — ухудшение внешнего вида, юзабилити и эффектности анимации.
Так вот поэтому я и решил остановится на в прошлый раз заявленной оценке.
Всё. Как и обещал, раскрыл интригу ))) Удачи вам!
Да, все верно, именно этому и посвящена моя статья.
Что касается CSS, можно сначала использовать препроцессор для минимизации файла, а потом вставлять его непосредственно в HEAD страницы средством php через readfile("css/style.css") … это поможет вообще отказаться от загрузки внешнего файла стилей.
да, согласен, но в то же время большой "inline" css — тоже не есть гуд… для не слишком искушенных юзеров, думаю идеальным будет использование плагинов с функцией минификации. Даже я для себя считаю оптимальным и простым решением плагин wp-rocket.me — и кеширование и сжатие…