/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. Подгружать невидимые при первой загрузке части страницы через AJAX (например содержимое табов)
  11. Подгружать js-библиотеки и шрифты с CDN - для использования их версий закешированных с других сайтов и быстрой загрузки с CDN если кеша нет.
  12. Перенести внешние баннеры и другие ресурсы подгружаемые со сторонних медленных серверов - на сервер клиента.
  13. Минимизировать редиректы для внешних ресурсов (например внешний js отдается не по тому URL, по которому запрашивается, а по редиректу стого URL)
  14. Прописать размеры img в html
  15. Минимизировать CSS, JS и HTML
  16. Оптимизировать графику:
  17. Конвертация типа картинок: - png - для строгих цветов, - jpg - для полноцвета и градиентов, - png24 для прозрачностей, - png8 с альфа-каналом для прозрачностей (через оптимизатор графики http://compresspng.com/) Возможно где-то можно заменить png24 на png8+matte, а где-то на jpg.
  18. Использовать технику 30% quality Retina JPG.
  19. Сохранять JPG как progressive
  20. Оптимизировать jpg и png-файлы: - с помощью http://compresspng.com/ и http://compressjpeg.com/ (сжимают лучше и быстрей чем консольные утилиты) - или с помощь консольных утилит pngout, jpegtrank (в том числе плагинами к Grunt/Gulp)
  21. Перенос визуальных украшений в CSS3 вместо картинок: - например тень у картинки можно сделать через box-shadow, а саму картинку сохранить без тени.
  22. Объединять несколько рядом стоящих картинок-ссылок в одну картинку, на которую накладываются позиционированные ссылки.
  23. Внести правки в дизайн, удалив тяжеловесные элементы.
  24. Желательно удалить query string ("?") в URL отдаваемых ресурсов (некоторые прокси не кешируют их)