Инструменты анализа скорости загрузки сайта с выдачей рекомендаций:
GTmetrix использует Google Page Speed + Yahoo! YSlow и выдает подробные рекомендации, зато Google PageSpeed Insights проверяет также загрузку на мобильных устройствах.
- Включение HTTP2
- Включение gzip
- Включение кеширования генерации страниц движком сайта
- Включение кеширования для файлов, отдаваемых сервером:
- Проверка чтоб не было 404-тых откликов на загрузку ресурсов - они замедляют загрузку
- Подключение CSS и JS - в конце HTML, перед
</body> - Автоматически генерировать критический CSS и вставлять его через
<style>в<head> - Минимизировать кол-во загружаемых файлов (не очень актуально, если есть HTTP2):
- Использовать CSS-спрайты
- Использовать base64 или инлайнить svg для небольших изображений
- Объединять все css в один файл
- Объединять все js в один файл
- Использовать только WOFF2 и WOFF при подключении web fonts. Подробнее про подключение.
- Отложить загрузку данных необязательных для первого отображения страницы:
- Использовать defer и async для стороннего js
- Вынести кнопки соц. шаринга в пост-загрузку или загружать их при прокрутке содержимого к ним
- Использовать LazyLoad для картинок, но не в ущерб SEO (src должно вести на реальную картинку, а не на заглушку).
- Подгружать невидимые при первой загрузке части страницы через AJAX (например содержимое табов) или через
prerender, подробнее - Подгружать через
prerenderблоки неиспользуемые на текущей странице, но будут нужны для следующих
- Подгружать js-библиотеки и шрифты с CDN - для использования их версий закешированных с других сайтов и быстрой загрузки с CDN если кеша нет
- Перенести внешние баннеры и другие ресурсы подгружаемые со сторонних медленных серверов - на сервер клиента
- Минимизировать редиректы для внешних ресурсов (например внешний js отдается не по тому URL, по которому запрашивается, а по редиректу стого URL)
- Прописать размеры img в html
- Минимизировать CSS, JS и HTML
- Оптимизировать графику:
- Не грузить на обычный дисплей ретина изображения. Использовать retinajs и миксины.
- Либо использовать технику 30% quality Retina JPG
- Конвертация типа картинок:
- svg (предпочтительней) или png - для векторных изображений, диаграмм, строгих переходов цветов
- jpg - для полноцвета и градиентов
- png24 для прозрачностей
- png8 с альфа-каналом для прозрачностей (через оптимизатор графики http://compresspng.com/) Возможно где-то можно заменить png24 на png8+matte, а где-то на jpg
- Сохранять JPG как progressive
- Оптимизировать jpg и png-файлы:
- с помощью http://compresspng.com/ и http://compressjpeg.com/ (сжимают лучше и быстрей чем консольные утилиты)
- или с помощь консольных утилит pngout, jpegtrank (в том числе плагинами к Grunt/Gulp)
- Перенос визуальных украшений в CSS3 вместо картинок:
- например тень у картинки можно сделать через box-shadow, а саму картинку сохранить без тени
- Объединять несколько рядом стоящих картинок-ссылок в одну картинку, на которую накладываются позиционированные ссылки
- Внести правки в дизайн, удалив тяжеловесные элементы
- Желательно удалить query string ("?") в URL отдаваемых ресурсов (некоторые прокси не кешируют их)