Инструменты анализа скорости загрузки сайта с выдачей рекомендаций:
GTmetrix использует Google Page Speed + Yahoo! YSlow и выдает подробные рекомендации, зато Google PageSpeed Insights проверяет также загрузку на мобильных устройствах.
- Включение HTTP2
- Включение gzip
- Включение кеширования генерации страниц движком сайта
- Включение кеширования для файлов, отдаваемых сервером:
- Last-Modifed
- Expires headers
- E-tag
- Cache-Control
- Vary: Accept-Encoding header
- Проверка чтоб не было 404-тых откликов на загрузку ресурсов - они замедляют загрузку
##Верстка
5. Подключение CSS и JS - в конце HTML, перед </body>
6. Автоматически генерировать критический CSS и вставлять его через <style> в <head>
6. Минимизировать кол-во загружаемых файлов (не очень актуально, если есть HTTP2):
- Использовать CSS-спрайты
- Использовать base64 или инлайнить svg для небольших изображений
- Объединять все css в один файл
- Объединять все js в один файл
- Использовать только WOFF2 и WOFF при подключении web fonts. Подробнее про подключение.
- Отложить загрузку данных необязательных для первого отображения страницы:
- Использовать defer и async для стороннего js
- Вынести кнопки соц. шаринга в пост-загрузку или загружать их при прокрутке содержимого к ним
- Использовать LazyLoad для картинок, но не в ущерб SEO (scr ведет на основную картинку).
- Подгружать невидимые при первой загрузке части страницы через 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 отдаваемых ресурсов (некоторые прокси не кешируют их)