Вселенная полезных советов 
Доброго времени суток с вами я Лифанов Валентин и блог wpsovet.ru. Я продолжаю цикл статей посвященных требованиям сервиса PageSpeed Insights, сегодня разберем грубейшее нарушение по мнению этого ресурса, оно звучит так “Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение”, далее вы поймете почему оно одно из важных. Я продолжаю анализировать блог ruletov.net, и вот скриншот, который подтверждает ошибки.
Для начала немного теории.
Для оптимизации очень важна такая штука, как скорость загрузки, не буду хвалиться, но она у меня 100%. А самый важное из этого требования, отклик сайта при заходе на него и начальное формирование, а точнее то время за которое все это происходит, и чем оно меньше тем лучше. А теперь смотрите, нам важен быстрый отклик сайта, а как он быстро отзовется если в самом начале грузятся всякие js скрипты, стили всяких плагинов и тому подобное. Я зашел в код страницы и сразу увидел, глядите снимок (я только две строчки снял под ними, еще больше всего).
В результате чего у нас в начале выводится не сам сайт, а его периферические дополнения. Проще говоря сайт не показывается потому, что вместо него вылезают различные другие элементы, а потом уже он сам. Конечно же, не надо их удалять ни в коем случае, просто надо их переместить в другое место.
Данное правило срабатывает если, у вас в разделе <header>и<body> идут загрузки скриптов js. С этим надо бороться, но руками я ничего хорошего не добился, вроде все делал грамотно, перемещал все загрузки в раздел<footer>, перечитал множество статей и мануалов, одно делаешь, другое перестает работать. Пришел к выводу, либо я дурак, либо лыжи не едут.
Решение проблемы.
А разгадку я нашел, как ни прискорбно, в плагине Autoptimize, очень долго я сопротивлялся, но делать не чего. Ставиться он стандартно, я лично через поиск в самой административной панели. Я выяснил, что многие его ставят, чтобы не запариваться, да и нагрузка от него почти никакая. Поставив его я очень удивился, все стало работать как надо, и PageSpeed не ругается. Теперь собственно переходим к разбору плагина, потому как могут произойти проблемы в настройках. Заходим в настройки плагина и начинаем разбор.
Перед началом, сразу же включите расширенный режим, нажатием кнопки “Show Advansed Settings”.
Параметры HTML, обязательно включаем, при этом всё будет перестроено, в самой теме вы ничего не обнаружите, но зайдя в исходный код, увидите там “месиво”, просто плагин по максимуму сжимает содержимое, убирая лишние пробелов и переносы. Насчет “Сохранять комментарии”, тут на ваше усмотрение, просто у вас в исходнике останутся все пометки в коде, я оставил пусть будет.
- Оптимизировать код JavaScript? Здесь ставим галочку. Маленько поясню, оптимизация сводиться к тому, что плагин, компонует js файлы меж собой и отправляет их прямиком в подвал сайта.
- Force JavaScript in <head>? Спорный, если у вас очень много jquerry, то при их перемещении в футер, они могут перестать работать.Но тогда я не совсем понимаю, для этого и ставиться Autoptimize, чтобы все переместить вниз, а тут вот такое, но в любом случае я не включаю, нет смысла, тем более jquery элементов, у меня только один.
- Look for scripts only in <head>?(deprecated). Переводиться как искать скрипты только в разделе head, и в скобочках, почему-то, не рекомендуется. Опять не понимаю, почему нельзя, именно этого нам и надо, чтобы всё из головы уходило в подвал, в любом случае отмечаем.
- Exclude scripts from Autoptimize. Этот пункт мне очень нравится, если у вас что-то перестало работать в результате работы этого плагина, то сюда просто прописываете название скрипта, и он затронут не будет, клевое решение.
- Add try-catch wrapping? Я не ставил здесь, она добавит к нерабочим скриптам свой тег, что предотвратит их использование, и помех для других. Во-первых, у меня нет нерабочих, во-вторых, мне не нужны какие-то теги в теле сайта, поисковики могут не так понять. Лучше сами проверьте работоспособность всего на блоге.
- Оптимизировать код CSS? Включаем чек бокс однозначно. Плагин все сделает сам, удалит лишние строчки в коде стилей, и поместит их на нужное место.
- Generate data: URIs for images?, Look for styles only in <head>?(deprecated), Inline and Defer CSS?. Все эти вещи не включаем, они будут делать только хуже, описывать не буду.
- Inline all CSS? На скриншоте показано что галочка стоит, но пока ее выключил. Смысл в том что, когда он активен, почти весь файл стилей переносится в страницу. С одной стороны не идет загрузка стилей, а с другой код становится громадным, что тоже дает нагрузку. Решайте сами, я пока окончательного вердикта вынести не могу.
- Exclude CSS from Autoptimize. То же самое что и в прошлом случае, список исключаемых, только уже css, которые плагин трогать не будет.
В самом конце включаем чек бокс и сохраняем все настройки, и на этом все сделано. Мы одним выстрелом, убили трех зайцев, сжали и оптимизировали html составляющую, js теперь загружаются правильно, а css максимально сбавило свой вес и нашло свое место.
P.S. А вам статья понравилась? Если честно не думал что получиться так все длинно, но зато все подробно.
Источник
