ihorzenich / webperformancechecklist Goto Github PK

HTML 100.00%

webperformancechecklist's Introduction

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

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

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 отдаваемых ресурсов (некоторые прокси не кешируют их)

webperformancechecklist's People

Contributors

Stargazers

Watchers

Forkers

darkkain alex-bezrodniy kolinko-ant serluck benny214 maxwal weblegko ralder multitest maxrostov oresh crazyyy jobsboris27 bbd-a-generalyuk alligator-1 profitcore dyukovlad flatroy vill3m barbagrigia efender tmdautov appwilio imikh esper21 pavelblednov verrom feedlike string007 radja7 dbukatyy zunygun c-nnemo nebula223 lipinarts anrou vadholovin diyvol natalkaz dzmitrock vzhikness bybelov niledenev gradiusalisik vitvnua ihor2308 boris03 homeee cf-git neko-in-black tuskyshka illia-g mrkimura chrispinzaru wlad-tk mantrade shzk daneilford swebdev100 venom207 justbenya irbis45 sereddos degratnik intigration jwcastillo mtl-cristinablanaru anmeshkov chicook

webperformancechecklist's Issues

Add HTML5 “picture”, “srcset”, and “sizes”

Add techniques from https://developers.google.com/web/fundamentals/performance/why-performance-matters

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency

Add ideas from https://james-priest.github.io/udacity-nanodegree-mws/course-notes/browser-rendering-optimization.html

Add requirements from https://gist.github.com/ai/e3683b03ba936ade91d33dbc721cd6d8

Amplifr Landings Rules

Amplifr’s rules for landing pages created by outsource.

Requirements

The rules are mandatory for all new projects. However, if some rule objectively doesn’t work in your case ask Andrey Sitnik to ignore it.

All websites should have at least 80% for Performance and 90%
for Accessibility, Best Practices, and SEO in Google Lighthouse.
Both for Desktop and Mobile.
Default target browsers:
last 2 versions, not dead, not ie 11, not ie_mob 11, not op_mob > 0.
Only the main content should be accessible on Opera Mini.
Some non-important features can be missed on Chinese browsers.
Static websites should not use SPA frameworks.
This rule doesn’t apply to rich interactive applications.
All clickable elements must use <button> or <a> tag.
<a> should not be used if click doesn’t change URL.
All clickable elements should have explicit :hover and :focus state.
In one hand, all important resources should be loaded by 2 round-trips
(first round-trip to download HTML, second for all links from HTML).
In another hand, we should avoid data:uri technique. We recommend
<link rel="preload"> for assets from CSS and JS files.
For dynamic URLs and analytics counter, use <link rel="preconnect">.
GIF files are strongly prohibited. Use AV1, H.264 (and optionally HEVC)
for any video content.
All images should be optimized. We recommend using Squoosh for raster
and SVGO for a vector images. WebP format must be available
for raster images, which are smaller in WebP.
All non-binary resources should be precompressed
with Zopfli during yarn build.
Links to the same page in another language should have
<a rel="alternate" hreflang="ru"> attributes.

Recommendations

You could avoid this rule without any approval if you think it will be better
for the project.

CSS for the first visible screen should be inlined to <style> in HTML
(“critical CSS” technique).
All animation should use only CSS transition or animation.
Try to animate only opacity and transform.
We recommend using Parcel, Pug and SugarSS to have the same system
in every project.
Do not afraid to ask questions. It is better to ask few obvious questions,
than deploy bad UX or reduce code maintability.

Global Files

Spelling Check

We use Yaspeller script for spelling check in Markdown and Pug files.

yarn shell

If you got an error on a correct word (don’t forget to double check it),
add this word to .yaspellerrc → dictionary array.

Pre-Commit hooks

We have git pre-commit hooks to:

Optimize SVG files.
Sort properties in SugarSS files.
Lint JS files by ESLint and SugarSS files by Stylelint.
Run spelling check for Markdown and Pug templates.

Linters

Any ignore comment for linter is an extreme case. It is always better to create
some system and improve global config. Don’t afraid to ask
Andrey Sitnik how you should deal with linter error in your case.

yarn lint

Оптимизировать размер шрифтов с помощью glyphhanger + оптимизировать их загрузку

Взять советы из https://www.zachleat.com/web/23-minutes/

Несколько предложений/дополнений чеклисту

При использовании HTTP2 на сервере совет с минимизацией кол-ва загружаемых файлов уже не так однозначен, т. к. этот новый протокол лучше работает multiple requests. К примеру, во многих случаях быстрее будет загрузить несколько небольших изображений, чем один большой спрайт.
Does using image sprites make sense in HTTP/2?
Для тяжелых лендингов или высоких одностраничных сайтов есть смысл сделать critical css
Для тяжелых кастомных шрифтов можно ограничить лишние языки/символы (например, с помощью unicode-range)
Также, могут быть полезными техники предзагрузки/кеширования (Preconnect, prefetch, prerender, Prefetching, preloading, prebrowsing)

scr

fix "scr"