Скорость загрузки сайта

скорость сайта

Чтобы проверить скорость загрузки сайта нужно использовать онлайн инструмент PageSpeed от Google. Он позволит измерить скорость сайта и даст конкретные рекомендации по её увеличению. Вот как удалось повысить скорость загрузки сайта, применив некоторые рекомендации PageSpeed:

скорость загрузки сайта

Показатель 85 и выше - означает «всё в порядке», это зеленый уровень. Рекомендации, отмеченные жёлтым, позволят повысить скорость загрузки. Красный цвет - это рекомендации, выполнение которых приведёт к значительному увеличению скорости сайта: именно на них стоит сосредоточить основное внимание.

Каждая рекомендация имеет сноску «как исправить», раскрывающий перечень проблем и содержащий ссылку на справку и инструменты для исправления. Ниже находится список уже устранённых проблем. Кроме оценки скорости загрузки для обычных компьютеров, PageSpeed измеряет скорости загрузки сайта в мобильных устройствах.

Воспользоваться инструментом PageSpeed можно тремя способами. 1-ый: через «Инструменты для веб-мастеров» - пункт «Другие ресурсы». 2-ой и 3-ий: зайти на страницу https://developers.google.com/speed/pagespeed/, там осуществляется онлайн проверка скорости загрузки сайта, а можно - установить плагин для Chrome или Firefox с теми же функциями, но подробно.

Применив некоторые рекомендации PageSpeed, мне удалось поднять скорость загрузки сайта до следующих показателей: 94 - для компьютеров и 88 - для мобильных устройств.

скорости загрузки в мобильных устройствах

Изначально они были существенно ниже и не достигали отметки 85. В этой же вкладке появилось новшество - оценка юзабилити или удобства пользователей. Этот показатель для сайта webmastersam.ru находится на низком уровне:

оценка юзабилити

Он имеет принципиальное значение для сайтов с мобильным контентом. Нужно существенно увеличить размеры шрифтов и области активных элементов, которые выделяются красными рамками на интерактивном изображении сайта. Для уточнения области просмотра укажите мета-тег Viewport: <meta name="viewport" content="width=1024">. Он подсказывает браузеру ширину страницы (здесь: 1024px) и сокращает время её загрузки.

Выполнение рекомендаций сопрягалось с определёнными трудностями: отсылка на англоязычную справку, где не всегда указываются оптимальные инструменты для решения задачи. Постараюсь подробнее осветить те вопросы, решение которых ощутимо влияет на скорость сайта, на практике.

Увеличение скорости сайта

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

1. Скрипты

Все скрипты JavaScript по возможности перенесите из тега Head вниз страницы, а лишние удалите. У меня там остался код Analytics, код Яндекс Метрики я поставил перед закрывающим тегом Body. Отдельные кнопки социальных сетей я убрал вообще, оставил только блок кнопок.

Ещё одно важное правило - использование асинхронного кода: это касается, в том числе, блоков контекстной рекламы, партнёрок. Все эти процедуры принесли максимальный выигрыш в увеличении скорости загрузки сайта.

2. CSS

Объединил три внешних css-файла в один. Кроме этого, имеет значение порядок указания css-свойств для увеличения скорости формирования страницы браузером. Например, padding необходимо располагать последним в череде свойств. Также незачем дублировать много одинаковых свойств для разных элементов.

Чтобы не вдаваться в подробности, просто необходимо сократить код css-файла автоматическими средствами, при этом оптимизируется порядок записи свойств, а повторения - сократятся (см. пункты 4 и 5).

3. Кэш браузера

Любой веб-сайт имеет статичные ресурсы (изображения, javascript- и css-файлы), которые не меняются, или изменяются редко. Если используется кэш браузера, то исчезают повторные HTTP-запросы и ответы сервера на них. Пользователи, которые недавно заходили на ваш сайт, получают выигрыш в скорости загрузки страниц.

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

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7 days"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
</IfModule>

Для сайтов, созданных на движках, этот вариант записи может не сработать. Проверить работоспособность этого варианта для своего домена можно на gtmetrix.com. Это касается и всех остальных пунктов для улучшения скорости работы сайта, которые располагаются списком по степени важности:

проверка включения кэша для браузеров

Одна операция по включению кэша для браузеров добавила 3 балла. Эта позиция не получила 100% производительности из-за присутствия внешних ресурсов: скриптов счётчиков, рекламы и «социальных» кнопок:

результат улучшения производительности

В идеале, не оптимизированными на 100%, должны остаться только те параметры, которые зависят от внешних ресурсов. Если кликнуть по нужной позиции - открывается список ресурсов и ссылка на справку, где могут быть указаны необходимые инструменты оптимизации. Например, варианты страницы с сокращённым кодом html или css-файла можно получить в соответствующих позициях списка.

Пользуйтесь переводчиком - у кого проблемы с английским: переводите страницы целиком (translate.google.com/?hl=ru).

4. Сокращение кода

Необходимо для html, вместе с встроенным javascript-кодом, и для внешних файлов, например: css. Сокращения кода можно добиться в онлайн-сервисах или произвести вручную. Общий смысл: убрать все лишние пробелы (допустимые) в строках и сократить количество самих строк, касается и встроенных фрагментов скриптов внешних ресурсов.

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

Совет для «небольших» специалистов в области веб-программирования: воспользуйтесь инструментами сжатия (2-ая ссылка в пункте 5), а вручную сокращайте код только в html-редакторах, где высвечиваются ошибки кода. Это касается обязательных пробелов в коде. Мне сжатие кода повысило оценку скорости загрузки на несколько баллов.

5. Изображения

Объединил все фоновые изображения в css-спрайты, остальные изображения необходимо оптимизировать. И хотя я делаю оптимизацию изображений в Фотошопе, PageSpeed выдаёт перечень, где указывается процент их возможного уменьшения без потери качества. Средняя величина возможного выигрыша - 15%, а если у вас он больше и много картинок, то следует это сделать.

Читайте об оптимизации изображений, где описываются инструменты для сжатия png, gif и jpg; файлов html и css; и генераторы css-спрайтов.

Для ускорения загрузки страницы и предотвращения перерисовки желательно прописать размеры изображений в css-коде или теге Img. Особенно это актуально для групп одинаковых по размеру картинок, объединенных единым классом css. Такому class нужно явно задать ширину и высоту - для Img или его непосредственного родительского элемента. Кстати, если размер картинок задан через css, то сервис GTmetrix этого не определяет - берём на заметку, а перепроверяем в самом PageSpeed.

6. Сжатие GZIP

Анализ данного сайта не выявил такой потребности. Другому «подопечному» было предписано использовать сжатие gzip для двух ресурсов: один - внешний (не представляется возможным), второй - файл css. Если у вас сервер Apache и CPanel, то заходим в неё: «Программное обеспечение и службы» - «Оптимизация веб-сайта». Указываем через пробел нужные MIME-типы, у меня только для css-файлов, и сохраняем настройки:

сжатие gzip

После всего проделанного - проверяем результат: анализируем сайт опять. Если у вас нет возможности включить сжатие, то нужно вручную прописывать в htaccess. Это мой случай (сервер Apache 2) - сжатие gzip только для css-файлов:

<IfModule mod_deflate.c>
    AddOutPutFilterByType DEFLATE text/css
    <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
        SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
    </IfModule>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
</IfModule>

Допишите аналогичные строки с нужными MIME-типами (как вторая строка), остальной код - это устранение ошибок некоторых браузеров, в т.ч. IE версий 6-8, который «шифруется» под Mozilla. Прочтите справку сервиса для позиции «Enable gzip compression». Перед gzip-сжатием желательно сократить код нужных файлов.

Производительность во многом зависит от выбора хостинга - у него должны быть мощные серверы с современным ПО (ссылка ведёт на страницу с обзором хостингов - webmastersam.ru находится на последнем в списке хостинге). Если ваш сайт работает на движке - не злоупотребляйте расширениями.

Нужно ещё понимать, что оценка скорости загрузки сайта проводится, по сути, для её главной страницы. Но это и есть важный показатель для seo раскрутки сайта и отношения к нему поисковых систем. Многие повторяющиеся на страницах элементы: скрипты, изображения, внешние css-файлы загружаются браузером пользователя при заходе на первую страницу ресурса, а это, по большей части, и есть главная.

Однако это не означает, что остальные страницы не нужно оптимизировать. Рекомендую прочесть книгу «Реактивные веб-сайты» о клиентской оптимизации: samouchitelbox.ru/optimisation_02matsievski.html, где в подробностях изложены все аспекты повышения производительности сайтов.

Для оперативной проверки скорости сайта и получения расширенных рекомендаций целесообразно установить плагин PageSpeed для Firefox или Chrome - рассмотрим его на примере последнего браузера.

Плагин для проверки скорости сайта

Читал пару отзывов, что плагин не работает, однако это не так. Просто после установки добраться до него через меню Chrome нужно таким образом:

плагин

А по-русски это означает следующее: «Инструменты - Инструменты разработчика» (Ctrl+Shift+I). Внизу окошка браузера появится такая горизонтальная панель:

панель

Выберите вкладку PageSpeed, а для того чтобы она развернулась в окно, воспользуйтесь значком, указанным стрелкой. Затем просто нажмите кнопку «Анализ» и получите результаты проверки:

анализ PageSpeed

Слева окна будет меню со списком рекомендаций по улучшению скорости загрузки сайта (и уже выполненных), а справа перечень проблематичных элементов и подробности. Работает всё в одном окне.