Инструменты анализа скорости загрузки сайта с выдачей рекомендаций:
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 должно быть в <head>, а JS - в конце HTML, перед </body>
6. Минимизировать кол-во загружаемых файлов:
- Использовать CSS-спрайты.
- Использовать base64-encode.
- Объединять все css в один файл.
- Объединять все js в один файл.
- Использовать только WOFF при подключении web fonts.
- Отложить загрузку данных необязательных для первого отображения страницы:
- Использовать defer для стороннего js.
- Вынести кнопки соц. шаринга в пост-загрузку.
- Использовать LazyLoad для картинок.
- Подгружать невидимые при первой загрузке части страницы через AJAX (например содержимое табов)
- Подгружать js-библиотеки и шрифты с CDN - для использования их версий закешированных с других сайтов и быстрой загрузки с CDN если кеша нет.
- Перенести внешние баннеры и другие ресурсы подгружаемые со сторонних медленных серверов - на сервер клиента.
- Минимизировать редиректы для внешних ресурсов (например внешний js отдается не по тому URL, по которому запрашивается, а по редиректу стого URL)
- Прописать размеры img в html
- Минимизировать CSS, JS и HTML
- Оптимизировать графику:
- Конвертация типа картинок: - png - для строгих цветов, - jpg - для полноцвета и градиентов, - png24 для прозрачностей, - png8 с альфа-каналом для прозрачностей (через оптимизатор графики http://compresspng.com/) Возможно где-то можно заменить png24 на png8+matte, а где-то на jpg.
- Использовать технику 30% quality Retina JPG.
- Сохранять JPG как progressive
- Оптимизировать jpg и png-файлы: - с помощью http://compresspng.com/ и http://compressjpeg.com/ (сжимают лучше и быстрей чем консольные утилиты) - или с помощь консольных утилит pngout, jpegtrank (в том числе плагинами к Grunt/Gulp)
- Перенос визуальных украшений в CSS3 вместо картинок: - например тень у картинки можно сделать через box-shadow, а саму картинку сохранить без тени.
- Объединять несколько рядом стоящих картинок-ссылок в одну картинку, на которую накладываются позиционированные ссылки.
- Внести правки в дизайн, удалив тяжеловесные элементы.
- Желательно удалить query string ("?") в URL отдаваемых ресурсов (некоторые прокси не кешируют их)