Зачем нужно ускорить загрузку сайта — не всегда понятно даже веб-дизайнерам, создавшим красивую страницу, но совершенно не оптимизированную. Картинка и контент играют важную роль в продвижении. Но, для начал — их нужно увидеть. А чем дольше страница грузится, тем меньше шансов, что у пользователя хватит терпения дождаться возможности с ней взаимодействовать и оценить контент.
При ранжировании сайтов, вне зависимости от платного или бесплатного метода продвижения, поисковые системы на первое место ставят именно скорость загрузки. Google делает свои выводы на основании собственного инструмента PageSpeed Insights. Его результат определяется в оценке, а также аудитах, влияющих на скорость загрузки.
Если данные аудиты не исправить — сайт не окажется в «зелёной зоне», а следовательно — не будет для поисковой системы надёжным. Не надёжные сайты, по мнению Google, не стоит рекомендовать пользователям. По такому же алгоритму работает и Яндекс. Но, просто исправить ошибки обнаруженные PageSpeed Insights не достаточно. Более того, делать это слепо — совершенно не стоит. Так можно причинить собственному сайту ещё больше вреда.
Как работаем мы и что рекомендуем делать. Наша команда, получив сайт для оптимизации, проводит его тестирование с помощью целого ряда инструментов. Часть из них дублируют отдельные пункты, другие — изучают только конкретные показатели. Получив информацию из нескольких источников, наши специалисты сопоставляют её, детально изучают и выявляют слабые места. Затем, разрабатывается модель оптимизации, которая включает в себя отдельные шаги. В процессе работы проводится тестирование каждого этапа. После этого, мы отдаём сайт, который работает максимально быстро и корректно. Его индексация поисковыми системами, а следовательно и конверсия, существенно увеличивается. Заказчик получает полноценный инструмент маркетинга. Приблизительно похожую схему мы применяем и в процессе создания сайта с одной оговоркой — он уже пишется максимально оптимизированным.
Но, вернёмся к «нашим баранам», точнее — наиболее популярному сервису тестирования скорости PageSpeed Insights. После того, как он покажет оценку в процентах, где 100% — максимальный показатель к которому нужно стремиться, в нём отобразиться список успешных аудитов. По большому счёту — это рекомендации разработчиков Google, что нужно исправить на сайте. Среди них, зачастую, значится такой: «Минимизация работы в основном потоке».
Что такое основной поток и зачем работу в нём нужно минимизировать
Основной поток — это тот, который загружает и отображает страницу. А вот как это происходит и какими инструментами, зависит непосредственно от того, что на странице находится. JavaScript, CSS, изображения, шрифты, стили и прочие элементы влияют на работу. По умолчанию основной поток процесса визуализации обычно обрабатывает большую часть кода: он анализирует HTML и создает DOM, анализирует CSS и применяет указанные стили, а также анализирует, оценивает и выполняет JavaScript. Основной поток также обрабатывает пользовательские события. Таким образом, всякий раз, когда основной поток занят чем-то другим, страница может не реагировать на взаимодействие с пользователем.
Следовательно, чем больше нагрузить основной поток, тем дольше будет происходить загрузка и отображение страницы. А это как раз то, чего нужно избегать всеми возможными способами. Поэтому, работу в основном потоке требуется оптимизировать.
Как уменьшить нагрузку на основной поток
В процессе аудита работы основного потока, Lighthouse отмечает все страницы, загрузка которых длилась более 4 секунд. Они будут выведены в таблице с названием категории и точным временем длительности процесса до миллисекунды. И над ними точно необходимо хорошо поработать.
На работу основного поток влияет множество факторов и действий, которые требуется осуществить, чтобы пользователь получил возможность полноценно взаимодействовать с сайтом. Однако, самыми большими потребителями, на практике, являются JavaScript и CSS.
Как оптимизировать JavaScript
JavaScript является динамическим языком и он способен менять любые характеристики страниц. Именно с его помощью и происходит взаимодействие с пользователем, ведь он отвечает на их действия. Что необходимо знать о JavaScript и его специфике:
- Он наделён возможностью изменять DOM и CSSOM под свои потребности, а также — получает из них необходимые данные;
- Он не может работать без CSSOM;
- Он блокирует создание DOM, пока не выполнит свои задачи, поэтому их нужно асинхронизировать
Первое, что нужно сделать — добавить в тег скрипта «async» этот ключ ставится непосредственно в HTML и сигнализирует браузеру, что JavaScript нужно выполнить позже, чем непосредственно загрузку DOM. Процессы будут происходить асинхронно и страница загрузится быстрее.
Действуют в данном случае и стандартные советы Google-разработчиков. Среди них — сократить коды, удалить неиспользуемые, использовать кэширование. Все они работают, но особенно к удалению кодов нужно подойти максимально ответственно. То, что они не используются на данной странице — вовсе не значит, что не требуются на других.
Как оптимизировать CSS
В процессе оптимизации обязательно нужно разделить main.css, сделав из него два файла. В первом из них будут стили, которые требуются сразу же после открытия страницы. Это, так сказать — обложка. В него нужно поместить логотип, заглавие и т.д. Во второй отправится всё остальное.
Ключевое слово «async», которое обеспечивает асинхронную загрузку в JavaScript, здесь не работает. Его аналогом является более сложный ключ. Поэтому, в теге link будет располагаться скрипт следующего содержания:
<link media=»none» onload=»if(media!=»all») media=»all»» rel=»stylesheet» type=»text/css», href= main.css>
Именно он и обеспечит загрузку файлов CSS только после полной загрузки дерева DOM.
Это главные, но далеко не все ресурсы, которые влияют на работу основного потока. Помимо них, необходимо оптимизировать шрифты, изображения, GIF и задать им правильный, современный формат. В результате, используя целый набор инструментов, работа в основном потоке станет эффективной.
