Технический аудит сайта

• Основные проблемы
• HTTP-запросы
• Оптимизация изображений
• Масштабирование изображений
• Минимизация CSS и JS файлов
• Использование CDN
• Настройка кэширования
• Ошибки HTML-разметки
• Как все проверить

Сайт работает плохо, сайт работает медленно, сайт не грузится... Разбираемся почему это очень плохо, не ищем «Кто виноват?», а планируем «Что делать?»

Согласно аналитическому отчету Факторы ранжирования e-commerce 2020, опубликованному одним из лидеров SEO-отрасли — компанией «Ашманов и партнеры» — техническая «продвинутость» сайта является одним из важных факторов, влияющих на ранжирование в поисковых системах.

К аналогичному выводу пришли специалисты интернет-агенства «Пиксель Плюс» — техническая составляющая web-сайта важна для ранжирования как в Яндекс, так и в Google.

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

Мы часто проводим технические аудиты сайтов. В большинстве случаев — это интернет-магазины, потому что тема нам близкая. По их результатам можно выделить закономерности и говорить о самых распространенных проблемах. Представляем «хит-парад» проблем и предлагаем методы их решения.

Практически любая веб-страница, которую пользователь открывает в Интернете, содержит ссылки на подключаемые внешние файлы — CSS-файлы, javascript-файлы, файлы изображений. Они определяют, как страница будет выглядеть, как пользователь сможет взаимодействовать с ней.

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

Самый часто встречающийся недостаток — огромное количество HTTP-запросов, которые отправляет страница.

Как исправить? Удалить неиспользуемые файлы, если такие есть, а остальные, по возможности объединить, а заодно и минимизировать. Рассмотреть возможность подключать некоторые файлы только на тех страницах сайта, где они нужны. Устранение недостатка — обязанность разработчиков сайта.

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

В итоге, наличие на странице нескольких изображений даже по 500-700 кБ серьезно увеличивает время загрузки страницы. И это еще не самый экстремальный результат — встречаются изображения весом в несколько мегабайт!

Устранение недостатка — обязанность контент-менеджеров. Достаточно включить в свой арсенал какой-либо из онлайн-сервисов. Например compressor.io или tinypng.com

Также можно использовать форматы изображений JPEG 2000, JPEG XR или WebP, которые обеспечивают более эффективное сжатие по сравнению с PNG или JPEG. Но, в этом случае придется привлекать разработчиков.

Бурный рост количества адаптивных сайтов в последние годы безусловно положительное явление. Дизайн веб-страниц, которые подстраиваются под заданные размеры окна браузера на ноутбуках, планшетах, мобильных телефонах — вполне можно расценивать, как одно из конкурентных преимуществ.

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

Это — использование одного и того же изображения для разных устройств. И, если для монитора с разрешением 1920x1080 изображение размером 1200x800 пикселей будет вполне приемлемо, то на мобильном телефоне 360x740 его нужно уменьшить в несколько раз.

Зачастую, огромное исходное изображение для маленьких экранов уменьшают только «визуально», используя возможности HTML/CSS, хотя современные браузеры уже в достаточной мере поддерживают решение, позволяющее выбирать подходящее изображение из набора в зависимости от размера экрана устройства. Решение вопроса — зона ответственности разработчиков.

Про использование элементов picture, source и таких атрибутов как srcset и sizes, позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее можно почитать в спецификации W3C, а проверить поддержку этих элементов браузерами — на сайте caniuse.com

Размер имеет значение! Для примера: популярная JS-библиотека jQuery, используемая на огромном количестве сайтов, имеет размер 292 кБ, а в сжатом виде — всего 88 кБ (версия 3.5.1). Минимизация JS-файла позволила сэкономить 70%!

Как правило, известные JS-библиотеки (например jQuery) и UI-фреймворки (например Bootstrap) предлагают скачать как полные, так и минифицированные версии своих продуктов. А вот собственные, и зачастую довольно объемные файлы, написанные непосредственно разработчиками веб-сайта во многих случаях остаются неоптимизированными.

Сжать собственные JS-файлы поможет Closure Compiler — уникальный инструмент, разработанный Google для сжатия и обфускации javascript-кода. Со сжатием CSS-файлов помогут сервисы CSS minifier или CSS Compressor.

На скорость загрузки веб-страницы и её содержимого сильно влияет то, насколько далеко пользователь находится от сервера. Хранение статического контента — изображений, javascript- и css-файлов на серверах какой-либо CDN позволяет оптимизировать доставку содержимого конечным пользователям (подробнее про CDN можно почитать хотя бы в Википедии).

Кроме того, современные CDN размещают у себя популярное программное обеспечение, используемое на огромном количестве web-сайтов. Например безусловным лидером среди JavaScript библиотек является jQuery (32% рынка по данным wappalyzer.com), тогда как среди UI-фреймворков с еще большим отрывом лидирует Bootstrap (70% рынка по данным wappalyzer.com)

Можно воспользоваться услугами какой-либо из бесплатных CDN for Open Source, например JSDELIVR для подключения к проекту необходимого программного обеспечения.

Это удобно еще и тем, что здесь можно сразу объединить несколько нужных файлов в один, сократив таким образом число запросов к серверу.

Например вот так одним запросом можно подключить сразу JS-библиотеку jQuery 3.5.1 и UI-фреймворк Bootstrap 4.5.2

https://cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/bootstrap@4.5.2

Все эти задачи находятся в зоне ответственности разработчиков.

Следующий очень частый недостаток — не включено кэширование* на web-сервере.

Когда посетитель какого-либо сайта переходит по его страницам, браузер каждый раз запрашивает одну и ту же информацию — файлы стилевого оформления, JS-файлы, изображения (например логотип). Браузеры умеют сохранять файлы для последующего использования — выражение «кэш браузера» слышал наверное каждый.

Но браузер не станет этого делать, пока не получит инструкции от web-сервера. А для того, чтобы web-сервер это сделал, он должен быть правильно настроен.

Как правило, по умолчанию кэширование на web-сервере отключено. Включить его и правильно настроить — зона ответственности разработчиков/системных администраторов.

* - речь идет о кэширование статического контента — изображения, CSS- и JS-файлы.

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

Проверьте страницы своего сайта на соответствие стандартам W3C с помощью сервиса Markup Validation.

Привести сайт в соответствие со стандартами — обязанность разработчиков и контент-менеджеров.

Сервис GTmetrix.com позволяет получить сводку ключевых показателей эффективности веб-страницы, анализируя ее с помощью наборов правил Google PageSpeed и Yahoo!YSlow, и предоставляет подробные рекомендации.