├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── CONTRIBUTING.md ├── images ├── css.png ├── fonts.png ├── html.png ├── images.png ├── javascript.png ├── server-side.png └── logo-front-end-performance-checklist.jpg ├── LICENSE ├── .gitignore ├── CODE_OF_CONDUCT.md └── README.md /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/css.png -------------------------------------------------------------------------------- /images/fonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/fonts.png -------------------------------------------------------------------------------- /images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/html.png -------------------------------------------------------------------------------- /images/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/images.png -------------------------------------------------------------------------------- /images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/javascript.png -------------------------------------------------------------------------------- /images/server-side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/server-side.png -------------------------------------------------------------------------------- /images/logo-front-end-performance-checklist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lex111/Front-End-Performance-Checklist/HEAD/images/logo-front-end-performance-checklist.jpg -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Fixes**: # 2 | 3 | 🚨 Please review the [guidelines for contributing](CONTRIBUTING.md) and our [code of conduct](../CODE_OF_CONDUCT.md) to this repository. 🚨 4 | **Please complete these steps and check these boxes (by putting an x inside the brackets) before filing your PR:** 5 | 6 | - [ ] Check the commit's or even all commits' message styles matches our requested structure. 7 | - [ ] Check your code additions will fail neither code linting checks nor unit test. 8 | 9 | #### Short description of what this resolves: 10 | 11 | 12 | #### Proposed changes: 13 | 14 | - 15 | - 16 | - 17 | 18 | 👍 Thank you! 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 David Dias 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | .DS_Store 64 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | ## Introduction 4 | 5 | First, thank you for considering contributing to the Front-End Performance Checklist! It's people like you that make the open source community such a great community! 😊 6 | 7 | We welcome any type of contribution, not only code. You can help with 8 | - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) 9 | - **Marketing**: writing blog posts, howto's, printing stickers, ... 10 | - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... 11 | - **Code**: take a look at the [open issues](https://github.com/thedaviddias/Front-End-Performance-Checklist/issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. 12 | 13 | ## Your First Contribution 14 | 15 | Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 16 | 17 | ## Submitting code 18 | 19 | Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. 20 | 21 | ## Code review process 22 | 23 | The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. 24 | It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? 25 | 26 | ## Questions 27 | 28 | If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!). 29 | You can also reach us at thedaviddias@gmail.com. 30 | 31 | 32 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at thedaviddias@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | Front-End Performance Checklist 4 |
5 |
6 |   Чек-лист производительности фронтенда 7 |  
8 |

9 | 10 |

🎮 Единственный чек-лист производительности фронтенда, который справляется лучше других.

11 |

Одно простое правило: "Учитывайте производительность при дизайне и написании кода"

12 | 13 |

14 |   15 |     PRs Welcome 16 |   17 |   18 |     Gitter 19 |   20 |     21 |     Licence MIT 22 |   23 |

24 | 25 |

26 |   Как использовать • Участие в проекте • Product Hunt 27 |

28 | 29 |

30 | 🇨🇳 31 | 🇫🇷 32 | 🇵🇹 33 | 🇷🇺 34 |

35 | 36 |

37 | Другие чек-листы: 38 |
39 | 🗂 Чек-лист фронтенда • 💎 Чек-лист дизайна фронтенда 40 |

41 | 42 | > Примечание переводчика: возможны ошибки и неточности перевода, спасибо всем, кто их найдёт и предложит исправления! Может это очевидно, но считаю необходимым указать, что названия ссылок хоть и частично переведены, их контент на английском языке, за исключением случаев, когда рядом со ссылкой на оригинал указан перевод (к сожалению, очень-очень редко). 43 | 44 | ## Содержание 45 | 46 | 1. **[HTML](#html)** 47 | 2. **[CSS](#css)** 48 | 3. **[Шрифты](#Шрифты)** 49 | 4. **[Изображения](#Изображения)** 50 | 5. **[JavaScript](#javascript)** 51 | 6. **[Сервер](#Сервер) (в процессе)** 52 | 7. **[JS-фреймворки](#Производительность-js-фреймворков) (в процессе)** 53 | 54 | ## Введение 55 | 56 | Производительность — огромная тема, но это не всегда забота «бэкенда» или «администратора»: это также ответственность фронтенда. Чек-лист производительности фронтенда — это исчерпывающий список пунктов, которые вы должны проверить или, по крайней мере, знать о них, как фронтенд-разработчик, и применять в своём проекте (личном и коммерческом). 57 | 58 | ### Как использовать? 59 | 60 | Для каждого правила будет приведён параграф, поясняющий *почему* это правило важно и *как* вы можете его исправить. Для получения более подробной информации вам нужно перейти по ссылкам, которые будут указывать на 🛠 инструменты, 📖 статьи или 📹 средства, которые могут завершить чек-лист. 61 | 62 | Все пункты в **Чек-листе производительности фронтенда** необходимы для достижения наивысшей оценки производительности, но вы найдёте индикатор, который поможет вам в конечном счёте определить приоритеты некоторых правил. Существует 3 уровня приоритета: 63 | 64 | * ![Low][low] означает, у этого пункта *низкий* приоритет. 65 | * ![Medium][medium] означает, у этого пункта **средний** приоритет. Вам не следует избегать выполнение этого пункта. 66 | * ![High][high] означает, у этого пункта **высокий** приоритет. Настоятельно не рекомендуется избегать соблюдения этого правила, поэтому необходимо выполнить рекомендуемые исправления. 67 | 68 | ### Инструменты производительности 69 | 70 | Список инструментов, которые вы можете использовать для тестирования или мониторинга вашего веб-сайта или приложения: 71 | 72 | * 🛠 [WebPagetest - Тест производительности и оптимизации сайта](https://www.webpagetest.org/) 73 | * 🛠 ☆ [Dareboost: Проверка скорости и анализ сайта](https://www.dareboost.com/) (используйте купон WPCDD20 для получения скидки 20%) 74 | * 🛠 [Treo: Мониторинг скорости страницы](https://treo.sh/?ref=perfchecklist) 75 | * 🛠 [GTmetrix | Оптимизация производительности и скорости сайта](https://gtmetrix.com/) 76 | * 🛠 [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) 77 | * 🛠 [Pingdom - Тест скорости сайта](https://tools.pingdom.com) 78 | * 📖 [Pagespeed - Инструмент и руководство по оптимизации](https://varvy.com/pagespeed/) 79 | * 📖 [Сделайте сайты быстрее | Google Developers](https://developers.google.com/speed/) 80 | * 🛠 [Sitespeed.io - Добро пожаловать в прекрасный мир веб-оптимизации](https://www.sitespeed.io/) 81 | * 🛠 [Calibre](https://calibreapp.com/) - Мониторинг и анализ быстродействия веб-приложений 82 | * 🛠 [Dotcom-Tools - Тест скорости сайта и проверка веб-производительности](https://www.dotcom-tools.com/website-speed-test.aspx) 83 | * 🛠 [Pingdom - Мониторинг доступности сервера и сайта](https://www.pingdom.com/product/uptime-monitoring/) ([Ссылка на бесплатную регистрацию](https://www.pingdom.com/free)) 84 | * 🛠 [Uptime Robot](https://uptimerobot.com) 85 | * 🛠 [SpeedCurve: Мониторинг производительности фронтенда](https://speedcurve.com) 86 | * 🛠 [PWMetrics - Инструмент командной строки и библиотека для сбора метрик производительности](https://github.com/paulirish/pwmetrics) 87 | * 🛠 [Varvy - Оптимизация скорости страницы](https://varvy.com/pagespeed/) 88 | * 🛠 [Lighthouse - Google](https://developers.google.com/web/tools/lighthouse/#devtools) 89 | * 🛠 [Расширение для браузера Checkbot - Проверяет веб-производительность на соответствие передовым практикам](https://www.checkbot.io/) 90 | * 🛠 [Yellow Lab Tools | Онлайн-тест для помощи ускорения тяжелых веб-страниц](https://yellowlab.tools/) 91 | 92 | 93 | ### Справочные руководства 94 | 95 | * 📹 [Цена JavaScript - YouTube](https://www.youtube.com/watch?v=_bzqF05xsC4) ([текстовая версия](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)) ([🇷🇺 перевод](https://habr.com/company/ruvds/blog/419369/)) 96 | * 📖 [Начало работы с анализом производительности во время выполнения | Google Developers](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) 97 | * 📖 [Состояние веба | 2018_01_01](https://httparchive.org/reports/state-of-the-web?start=2018_01_01) 98 | * 📖 [Размер страницы не имеет значения](https://www.speedshop.co/2015/11/05/page-weight-doesnt-matter.html) 99 | * 📖 [Varvy - Глоссарий веб-производительности](https://varvy.com/performance/) 100 | * 📖 [fabkrum/web-performance-resources: Обновлённая коллекция ценных ресурсов веб-производительности](https://github.com/fabkrum/web-performance-resources) 101 | * 📖 [Checkbot - Передовые практики по загрузке веб-проектов](https://www.checkbot.io/guide/speed/) 102 | --- 103 | 104 | ## HTML 105 | 106 | ![html] 107 | 108 | - [ ] **Минифицированный HTML:** ![medium] HTML-код минифицирован; комментарии, проблемы и новые строки удалены из файлов-ресурсов, используемых в продакшене. 109 | 110 | *Почему:* 111 | > Удаление всех ненужных пробелов, комментариев и переводов строк уменьшит размер вашего HTML и ускорит время загрузки страницы сайта и, очевидно, облегчит загрузку сайта вашим пользователям. 112 | 113 | *Как:* 114 | > У большинства фреймворков есть плагины для обеспечения миницификации веб-страниц. Вы можете использовать кучу NPM-модулей, которые могут делать данную работу автоматически. 115 | 116 | * 🛠 [HTML minifier | Минифицировать код](http://minifycode.com/html-minifier/) 117 | * 🛠 [Онлайн-сжатие HTML](http://refresh-sf.com) 118 | * 📖 [Экспериментирование с HTML-минификатором — Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype) 119 | 120 | - [ ] **Удалить ненужные комментарии:** ![low] Убедитесь, что комментарии удалены из ваших страниц. 121 | 122 | *Почему:* 123 | > Комментарии не очень полезны для пользователя, поэтому должны быть удалены из файлов в продакшене. Случай, когда вы можете сохранить комментарии — это сохранить источник (происхождение) библиотеки. 124 | 125 | *Как:* 126 | > В большинстве случаев комментарии могут быть удалены, используя плагин для минификации HTML. 127 | 128 | * 🛠 [remove-html-comments - npm](https://www.npmjs.com/package/remove-html-comments) 129 | 130 | - [ ] **Удалить ненужные атрибуты:** ![low] Атрибутов типов, такие как `type="text/javascript"` или `type="text/css"`, больше не нужны, и их следует удалить. 131 | 132 | ```html 133 | 134 | 137 | 138 | 139 | 142 | ``` 143 | 144 | *Почему:* 145 | > Атрибуты типов не нужны, поскольку HTML5 подразумевает `text/css` и `text/javascript` по умолчанию. Неиспользованный код следует удалить, если он не используется вашим сайтом или приложением, т.к. это он добавляет больше размера вашим страницам. 146 | 147 | *Как:* 148 | > ⁃ Убедитесь, что у тегов `` и ` 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | ``` 165 | 166 | *Почему:* 167 | > Наличие тегов подключения CSS до любого JavaScript позволяет повысить параллельную загрузку, которая ускоряет время отрисовки страницы браузером. 168 | 169 | *Как:* 170 | > ⁃ Убедитесь, что теги `` и `` в одну строку (минифицирован, если это возможно). 258 | 259 | *Почему:* 260 | > Встраивание критического CSS помогает ускорить отрисовку веб-страниц, уменьшая количество запросов на сервер. 261 | 262 | *Как:* 263 | > Сгенерировать критический CSS с помощью онлайн-инструментов или используя такой плагин, который разработал Эдди Османи (Addy Osmani). 264 | 265 | * 📖 [Понимание критического CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/) 266 | * 🛠 [Инструмент для генерации критического CSS от Эдди Османи на GitHub](https://github.com/addyosmani/critical). 267 | * 📖 [Встраивание критического CSS для лучшей веб-производительности | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/) 268 | * 🛠 [Генератор критического CSS по URL-адресу :: SiteLocity](https://www.sitelocity.com/critical-path-css-generator) 269 | * 📖 [Уменьшение размера содержимого в верхней части страницы](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent) 270 | 271 | - [ ] **Встраиваемый или встроенный CSS:** ![high] Избегайте использования встраиваемого или встроенного CSS внутри вашего `` (Недействительно для HTTP/2) 272 | 273 | *Почему:* 274 | > Одна из первых причин — это просто хорошая практика **отделять содержимое от дизайна**. Это также способствует более удобному коду и поддерживает доступность вашего сайта. Что касается производительности — это уменьшает размер файлов ваших HTML-страниц и время загрузки. 275 | 276 | *Как:* 277 | > Всегда используйте внешние таблицы стилей или встраивайте CSS в ваш `` (и следуйте другим правилам производительности CSS) 278 | 279 | * 📖 [Соблюдение передовых практик CSS: избегайте встроенных стилей CSS](https://www.lifewire.com/avoid-inline-styles-for-css-3466846) 280 | 281 | - [ ] **Анализ сложности таблиц стилей:** ![high] Анализ таблиц стилей может помочь вам указать на проблемы, избыточный код и дублирования CSS-селекторов. 282 | 283 | *Почему:* 284 | > Иногда у вас может быть избыточный код или ошибки проверки в вашем CSS, анализ CSS-файлов и устранение этих трудностей может помочь вам ускорить CSS-файлы (потому что ваш браузер будет загружать их быстрее) 285 | 286 | *Как:* 287 | > Ваш CSS должен быть организован, использование препроцессора CSS может помочь в этом. Некоторые онлайн-инструменты, перечисленные ниже, также помогут вам проанализировать и исправить ваш код. 288 | 289 | * 🛠 [TestMyCSS | Оптимизация и проверка производительности CSS](http://www.testmycss.com/) 290 | * 📖 [Статистика CSS](https://cssstats.com/) 291 | * 🛠 [macbre/analyze-css: Анализатор сложности CSS-селекторов и производительности](https://github.com/macbre/analyze-css) 292 | 293 | **[⬆ вернуться в начало](#Содержание)** 294 | 295 | ## Шрифты 296 | 297 | ![fonts] 298 | 299 | * 📖 [Книга от издательства «A Book Apart» — «Руководство по веб-шрифтам»](https://abookapart.com/products/webfont-handbook) 300 | 301 | - [ ] **Форматы шрифтов:** ![medium] Вы используете формат WOFF2 в своём веб-проекте или приложении. 302 | 303 | *Почему:* 304 | > Согласно Google, формат сжатия веб-шрифта WFF 2.0 обеспечивает в среднем прирост на 30% по сравнению с WOFF 1.0. Поэтому лучше использовать WOFF 2.0, а WOFF 1.0 в качестве фолбэка и TTF. 305 | 306 | *Как:* 307 | > Проверьте перед покупкой нового шрифта, что он доступен в формате WOFF2. Если вы используете бесплатный шрифт, вы всегда можете использовать Font Squirrel для создания всех необходимых вам форматов шрифтов. 308 | 309 | * 📖 [WOFF 2.0 – Узнайте больше о новом поколении веб-шрифтов и сконвертируйте TTF в WOFF2](https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a) 310 | * 🛠 [Font Squirrel - Создайте собственный набор шрифтов с помощью @font-face](https://www.fontsquirrel.com/tools/webfont-generator) 311 | * 🛠 [IcoMoon App - Генерация иконочного шрифта в формате SVG, PDF & PNG](https://icomoon.io/app/) 312 | * 📖 [Использование @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/?ref=frontendchecklist) 313 | * 📖 [Can I use... WOFF2](https://caniuse.com/#feat=woff2) 314 | 315 | - [ ] **Используйте `preconnect` для быстрой загрузки ваших шрифтов:** ![medium] 316 | 317 | ```html 318 | 319 | ``` 320 | 321 | *Зачем:* 322 | > Когда вы пришли на сайт, ваше устройство должно узнать, где находится ваш сайт, и с каким сервером ему нужно подключиться. Ваш браузер должен связаться с DNS-сервером и дождаться завершения проверки перед получением ресурса (шрифты, файлы CSS...). 323 | 324 | *Почему:* 325 | > ⁃ Перед использованием предварительной загрузки (prefetch) ваших веб-шрифтов, воспользуйтесь webpagetest для оценки вашего веб-сайта.
326 | ⁃ Ищите DNS-запросы с сине-зелёным цветом и обратите внимание на запрашиваемый хост.
327 | ⁃ Предварительно загружаемые шрифты поместите в ``. 328 | 329 | * 📖 [Быстрые Google-шрифты с помощью Preconnect - CDN Planet](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/) 330 | * 📖 [Сделайте ваш сайт быстрее с помощью подсказок Preconnect | Viget](https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/) 331 | * 📖 [Окончательное руководство по подсказкам браузера: Preload, Prefetch и Preconnect - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/) ([🇷🇺 перевод](https://webformyself.com/okonchatelnoe-rukovodstvo-po-podskazkam-v-brauzere-preload-prefetch-i-preconnect/)) 332 | * 📖 [Всеобъемлющее руководство по стратегиям загрузки шрифтов — zachleat.com](https://www.zachleat.com/web/comprehensive-webfonts/#font-face) 333 | 334 | - [ ] **Размер веб-шрифта:** ![medium] Размеры веб-шрифта не должны превышать 300 Кб (со всеми вариантами) 335 | 336 | * 📖 [Байты шрифтов - Размер страницы](https://httparchive.org/reports/page-weight#bytesFont) 337 | 338 | - [ ] **Предотвратите использование Flash или невидимого текста:** ![medium] Избегайте использования прозрачного текста до загрузки веб-шрифта 339 | 340 | * 📖 [`font-display` для широких масс](https://css-tricks.com/font-display-masses/) 341 | * 📖 [CSS font-display: Будущее отрисовки шрифтов в вебе](https://www.sitepoint.com/css-font-display-future-font-rendering-web/) 342 | 343 | **[⬆ вернуться в начало](#Содержание)** 344 | 345 | ## Изображения 346 | 347 | ![images] 348 | 349 | * 📖 [Байты изображений в 2018](https://httparchive.org/reports/page-weight#bytesImg) 350 | 351 | * [ ] **Оптимизация изображений:** ![high] Ваши изображения оптимизированы, сжаты без прямого воздействия на конечного пользователя. 352 | 353 | *Зачем:* 354 | > Оптимизированные изображения загружаются быстрее в вашем браузере и потребляют меньше данных. 355 | 356 | *Как:* 357 | > ⁃ Попробуйте использовать эффекты CSS3, когда это возможно (вместо небольшого изображения)
358 | ⁃ Когда это возможно, используйте шрифты вместо текста, закодированного в ваших изображениях
359 | ⁃ Используйте SVG
360 | ⁃ Используйте инструмент и укажите уровень сжатия ниже 85. 361 | 362 | * 📖 [Оптимизация изображений | Web Fundamentals | Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization) 363 | * 🛠 [TinyJPG – Сжатие JPEG-изображений разумно](https://tinyjpg.com/) 364 | * 🛠 [Kraken.io - Онлайн-оптимизирование изображений](https://kraken.io/web-interface) 365 | * 🛠 [Compressor.io - Оптимизация и сжатие JPEG-фотографий и PNG-изображений](https://compressor.io/compress) 366 | * 🛠 [Cloudinary - Инструмент анализа изображений](https://webspeedtest.cloudinary.com) 367 | * 🛠 [SVGOMG - Оптимизация векторных графических файлов SVG](https://jakearchibald.github.io/svgomg/) 368 | 369 | * [ ] **Формат изображений:** ![high] Выберите формат изображения должным образом. 370 | 371 | *Зачем:* 372 | > Чтобы гарантировать, что ваши изображения не замедлят ваш сайт, выберите нужный формат 373 | 374 | *Почему:* 375 | > ⁃ Используйте [Lighthouse](https://developers.google.com/web/tools/lighthouse/) для определения того, какие изображения в конечном счёте могут использовать **форматы нового поколения** (такие как JPEG 2000m JPEG XR или WebP)
376 | ⁃ Сравните различные форматы, иногда использование PNG8 лучше, чем PNG16, иногда это не так. 377 | 378 | * 📖 [Обслуживание изображений в форматах нового поколения | Tools for Web Developers | Google Developers](https://developers.google.com/web/tools/lighthouse/audits/webp) 379 | * 📖 [Какой правильный формат изображения для сайта? — SitePoint](https://www.sitepoint.com/what-is-the-right-image-format-for-your-website/) 380 | * 📖 [PNG8 - Явный победитель — SitePoint](https://www.sitepoint.com/png8-the-clear-winner/) 381 | * 📖 [8-бит против 16-бит - Какую цветную глубину вы должны использовать и почему это имеет значение - DIY Photography](https://www.diyphotography.net/8-bit-vs-16-bit-color-depth-use-matters/) 382 | 383 | - [ ] **Используйте векторное изображение против растровых:** ![medium] Prefer using vector image rather than bitmap images (when possible). 384 | 385 | *Зачем:* 386 | > Векторные изображения (SVG), как правило, являются меньше, чем изображения, и SVG адаптивные и масштабируются. Эти изображения могут быть анимированы и изменены через CSS. 387 | 388 | * [ ] **Размеры изображений:** ![medium] Установите атрибуты `width` и `height` на элемент ``, если окончательное отрисованное изображение известно. 389 | 390 | *Зачем:* 391 | > Если заданы высота и ширина, пространство, необходимое для изображения, сохраняется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него подходящее пространство. Эффект будет заключаться в том, что раскладка страницы изменится во время загрузки (при загрузке изображений). 392 | 393 | * [ ] **Избегайте использование изображений в формате Base64:** ![medium] Иногда вы можете преобразовать крошечные изображения в base64, но на самом деле это не лучшая практика. 394 | 395 | * 📖 [Кодирование и производительность Base64, первая и вторая часть от Гарри Робертс (Harry Roberts)](https://csswizardry.com/2017/02/base64-encoding-and-performance/) 396 | * 📖 [Более пристальный взгляд на производительность изображения Base64 – The Page Not Found Blog](http://www.andygup.net/a-closer-look-at-base64-image-performance/) 397 | * 📖 [Когда base64 кодирует изображения (а когда их нет) | David Calhoun](https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/) 398 | * 📖 [Base64 кодирует изображения для более быстрых страниц | Performance and seo factors](https://varvy.com/pagespeed/base64-images.html) 399 | 400 | * [ ] **Ленивая загрузка:** ![medium] Изображения вне текущей области страницы загружены лениво (Фолбэк с noscript всегда предоставлен). 401 | 402 | *Зачем:* 403 | > Это улучшит время ответа текущей страницы, а затем предотвратит загрузку ненужных изображений, которые пользователю могут не понадобиться. 404 | 405 | *Как:* 406 | > ⁃ Используйте [Lighthouse](https://developers.google.com/web/tools/lighthouse/) для определения сколько **изображений находятся вне экрана**.
407 | ⁃ Используйте плагин JavaScript из списка ниже для ленивой загрузки ваших изображений. Убедитесь, что вы настроили ленивую загрузку только изображений, находящихся вне экрана
408 | ⁃ Также убедитесь, что лениво загружаемые изображения отображаются при наведении курсора или при других пользовательских действиях. 409 | 410 | * 🛠 [verlok/lazyload: GitHub](https://github.com/verlok/lazyload) 411 | * 🛠 [aFarkas/lazysizes: GitHub](https://github.com/aFarkas/lazysizes/) 412 | * 📖 [Ленивая загрузка изображений и видео | Основы Web | Google Developers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) 413 | * 📖 [5 блестящих способов ленивой загрузки изображений для быстрой загрузки страницы - Dynamic Drive Blog](http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/) 414 | 415 | * [ ] **Адаптивные изображения:** ![medium] Обеспечьте отображение изображений, близких к размеру вашего дисплея. 416 | 417 | *Зачем:* 418 | > Маленьким устройствам не нужны изображения больше, чем их вьюпорт. Рекомендуется иметь несколько версий одного изображения разных размеров. 419 | 420 | *Как:* 421 | > ⁃ Создавайте разные размеры изображений для целевых устройств
422 | ⁃ Используйте `srcset` и `picture` для доставки нескольких вариантов каждого изображения. 423 | 424 | * 📖 [Адаптивные изображения - Изучение веб-разработки | MDN](https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 425 | 426 | **[⬆ вернуться в начало](#Содержание)** 427 | 428 | ## JavaScript 429 | 430 | ![javascript] 431 | 432 | - [ ] **Минифицикация JS:** ![high] Все файлы JavaScript минифицированы, комментарии, пробелы и новые строки удалены из производственных файлов *(все ещё действительно при использовании HTTP/2)*. 433 | 434 | *Зачем:* 435 | > Удаление всех ненужных пробелов, комментариев и переводов строк уменьшит размер ваших файлов JavaScript и ускорит загрузку страниц вашего сайта и, очевидно, облегчит загрузку для вашего пользователя. 436 | 437 | *Как:* 438 | > ⁃ Используйте инструменты, перечисленные ниже, чтобы автоматически минифицировать ваши файлы до или во время сборки или деплоя. 439 | 440 | * 🛠 [uglify-js - npm](https://www.npmjs.com/package/uglify-js) 441 | * 🛠 [Онлайн-сжатие JavaScript](http://refresh-sf.com) 442 | * 📖 [Короткое чтение: Чем отличается HTTP/2? Должны ли мы все ещё минифицировать и объединять?](https://scaleyourcode.com/blog/article/28) 443 | 444 | * [ ] **Нет JavaScript внутри:** ![medium] *(Только для сайта)* Избегайте наличия нескольких блоков кода с JavaScript, встроенных в середину страницы. Перегруппируйте свой JavaScript-код внутри внешних файлов или в конечном итоге в `` или в конце вашей страницы (до ``). 445 | 446 | *Зачем:* 447 | > Размещение встраиваемого кода JavaScript непосредственно в ваш `` может замедлить вашу страницу, потому что он загружается, когда DOM строится. Лучший вариант — использовать внешние файлы с `async` или `defer`, чтобы избежать блокировки DOM. Другой вариант — разместить некоторые скрипты внутри ``. В большинстве случаев это код аналитики или небольшой скрипт, который необходимо загрузить до того, как DOM начнёт обрабатываться. 448 | 449 | *Как:* 450 | > Убедитесь, что все ваши файлы загружены с помощью `async` или `defer` и разумно определяют код, который вам нужно загрузить в ``. 451 | 452 | * 📖 [11 советов по оптимизации JavaScript и повышению скорости загрузки сайта](https://www.upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/) 453 | 454 | * [ ] **Неблокирующий JavaScript:** ![high] Файлы JavaScript загружаются асинхронно, используя `async` или отложено с использованием атрибута `defer`. 455 | 456 | ```html 457 | 458 | 459 | 460 | 461 | 462 | ``` 463 | 464 | *Зачем:* 465 | > JavaScript блокирует нормальный синтаксический анализ HTML-документа, поэтому, когда парсер доходит до тега `