Чек-лист оптимизации скорости загрузки сайта

Инструменты анализа скорости загрузки сайта с выдачей рекомендаций:

GTmetrix использует Google Page Speed + Yahoo! YSlow и выдает подробные рекомендации, зато Google PageSpeed Insights проверяет также загрузку на мобильных устройствах.

Серверное

Включение HTTP2
Включение gzip
Включение кеширования генерации страниц движком сайта
Включение кеширования для файлов, отдаваемых сервером:
Проверка чтоб не было 404-тых откликов на загрузку ресурсов - они замедляют загрузку

Верстка

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

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
README.md		README.md
index.html		index.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Чек-лист оптимизации скорости загрузки сайта

Серверное

Верстка

About

Uh oh!

Releases

Packages

Contributors 3

Uh oh!

Languages

ihorzenich/WebPerformanceChecklist

Folders and files

Latest commit

History

Repository files navigation

Чек-лист оптимизации скорости загрузки сайта

Серверное

Верстка

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Packages