/WebPerformanceChecklist

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

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

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

Серверное

  1. Включение gzip.
  2. Включение кеширования генерации страниц движком сайта.
  3. Включение кеширования для файлов, отдаваемых сервером:
  4. Last-Modifed
  5. Expires headers
  6. E-tag
  7. Cache-Control
  8. Vary: Accept-Encoding header
  9. Проверка чтоб не было 404-тых откликов на загрузку ресурсов - они замедляют загрузку.

##Верстка 5. Подключение CSS должно быть в <head>, а JS - в конце HTML, перед </body> 6. Минимизировать кол-во загружаемых файлов:

  1. Использовать CSS-спрайты.
  2. Использовать base64-encode.
  3. Объединять все css в один файл.
  4. Объединять все js в один файл.
  5. Использовать только WOFF при подключении web fonts.
  6. Отложить загрузку файлов необязательных для первого отображения страницы:
  7. Использовать defer для стороннего js.
  8. Вынести кнопки соц. шаринга в пост-загрузку.
  9. Использовать LazyLoad для картинок.
  10. Подгружать js-библиотеки и шрифты с CDN - для использования их версий закешированных с других сайтов и быстрой загрузки с CDN если кеша нет.
  11. Перенести внешние баннеры и другие ресурсы подгружаемые со сторонних медленных серверов - на сервер клиента.
  12. Минимизировать редиректы для внешних ресурсов (например внешний js отдается не по тому URL, по которому запрашивается, а по редиректу стого URL)
  13. Прописать размеры img в html
  14. Минимизировать CSS, JS и HTML
  15. Оптимизировать графику:
  16. Конвертация типа картинок: - png - для строгих цветов, - jpg - для полноцвета и градиентов - png24 для прозрачностей. Возможно где-то можно заменить png24 на png8+matte, а где-то на png24 jpg.
  17. Использовать технику 30% quality Retina JPG.
  18. Сохранять JPG как progressive
  19. Оптимизировать jpg и png-файлы: - с помощью http://compresspng.com/ и http://compressjpeg.com/ (сжимают лучше и быстрей чем консольные утилиты) - или с помощь консольных утилит pngout, jpegtrank (в том числе плагинами к Grunt/Gulp)
  20. Перенос визуальных украшений в CSS3 вместо картинок
  21. Внести правки в дизайн, удалив тяжеловесные элементы.
  22. Желательно удалить query string ("?") в URL отдаваемых ресурсов (некоторые прокси не кешируют их)