Проверка скорости работы сайта по тесту скорости от google (developers.google.com/speed/pagespeed/insights/) является обязательной операцией. От того, насколько быстро сайт загружается зависят его позиции в поисковой выдаче, а также удобство пользователей сайта. Разберем рекомендации, которые выдает тест скорости:
- Оптимизируйте изображения. Это самая легко выполнимая операция. И чаще всего она дает самый ощутимый вклад в ускорение работы. Как правило при разработке сайта изображения не оптимизируют в целях экономии времени, нужно быстрее сдать сайт и тратить время на оптимизацию хотят немногие.
В механизме работы любого сайта есть передача данных от веб-сервера к клиенту. И при передаче этих данных картинки сайта имеют большую долю в общем объеме трафика. Картинки можно оптимизировать с помощью специальных онлайн сервисов, либо просто скачать архив с оптимизированными ресурсами внизу страницы теста скорости.
Бывают ситуации, когда картинка накладывается фоном определенный блок сайта. В таком случае недостаточно просто оптимизировать картинку — ее еще нужно руками обрезать до максимально возможного размера данного блока. Тут есть такой нюанс: например, на десктопе картинка имеет максимальную ширину 400 пикселей. А на мобильной версии она идет на весь экран,и должна растягиваться на всю ширину экрана(например у bootstrap класс xs начинается с 767 пикселей).
В итоге после оптимизации бывает так, что внешний вид сайта на некоторых разрешениях страдает от этих переделок.
Также отдельно следует коснуться замены картинок их оптимизированными копиями для сайтов на cms. В случае, когда картинка используется в шаблоне сайта и напрямую вызывается в файле шаблона или файле таблиц ее нужно просто заменить. А вот в случае, если данная картинка загружена средствами cms через админку -сложнее. Например, имеется интернет-магазин, у которого имеется каталог товаров. Картинка товара под разными разрешениями будет лежать в разных папках. И если вы просто замените картинку в папке, то после очистки кэша или перегенирации картинок(например, при наложении водяного знака) новые картинки будут не оптимизированы, так как они снова создались из оригинала картинки. Тут нужно заменять именно оригинальное изображение и на основе его заново создавать уменьшенные копии. - Сократите html,css. Смысл этого пункта в том, что данные файлы можно ужать, убрав из них пробелы и переносы строк.Опять же это можно сделать через онлайн-сервисы или скачав архив от гугла внизу страницы теста.
Но тут есть оборотная сторона медали, в случае необходимости внести правки в сжатые файлы, это будет очень неудобно. - Включите сжатие gzip или deflate. В данном случае необходимо внести правки в файл .htaccess
Если тест в данном пункте ругается на сторонние ресурсы, то тут сделать ничего нельзя, разве что удалив соответствующий плагин/виджет. - Сократите время ответа сервера — это комплексный пункт. Ответ сервера зависит от многих факторов: от хостинга, cms, темы оформления, количества запросов в БД и многого другого
- Используйте кэш браузера. Браузер при посещении сайта сохраняет у себя в кэше картинки, стили и прочие служебные файлы. При повторном обращении к сайту, либо при загрузке другой страницы сайта загрузка контента будет идти не с сервера, а из кэша браузера. Это существенно ускоряет его работу. Опять же, надо внести настройки в .htaccess