Front-End-Performance-Checklist README

The project's README from github.com/thedaviddias/Front-End-Performance-Checklist. As one markdown file: README.md.

🎮 Front-End Performance Checklist

The only Front-End Performance Checklist that runs faster than the others!

Performance is a huge subject, but it's not always a "back-end" or an "admin" topic: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

One simple rule: "Design and code with performance in mind"

Other Checklists:

[!TIP] ⭐️ I've recently launched UX Patterns for Devs and a curated list for indie developers, feel free to check it out! ⭐️

📚 Table of Contents

How to use?

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

All items in the Front-End Performance Checklist are essentials to achieve the highest performance score but you would find an indicator to help you to eventually prioritised some rules amount others. There are 3 levels of priority:

Performance tools

List of the tools you can use to test or monitor your website or application:

References

HTML

![html]

⬆ back to top

CSS

![css]

⬆ back to top

Fonts

![fonts]

⬆ back to top

Images

![images]

Front-End-Performance-Checklist (thedaviddias/Front-End-Performance-Checklist)

Searching Database…

17.4K ·GitHub
Front-End-Performance-Checklist
Что это такое?Это подробный чек-лист по производительности для фронтенд-разработчиков: вещи, которые стоит проверить или хотя бы держать в голове при создании сайта — как в личных, так и в рабочих проектах.
Это инструмент, который нужно устанавливать, или документ, который я читаю?Документ — один большой чек-лист, живущий в README. Он разбит на разделы: HTML, CSS, шрифты, изображения и JavaScript, плюс список инструментов для оценки производительности и дополнительные материалы.
Как мне с ним работать?Правило за правилом: каждый пункт объясняет, почему он важен и как всё исправить, со ссылками на инструменты и статьи, если захотите разобраться глубже. Затем вы применяете эти правила к своему проекту.
Все правила одинаково важны или есть порядок приоритета?У каждого правила стоит одна из трёх меток: Low (желательно, но не обязательно), Medium (откладывать не стоит) и High (выполнить придётся в любом случае) — так сразу понятно, что исправлять в первую очередь.
Я в основном бэкенд-разработчик — будет ли мне от этого польза?Чек-лист написан для фронтенд-разработчиков, и автор исходит из того, что производительность — тоже ответственность фронтенда, а не только тема для бэкенда или администраторов.
Какие инструменты он рекомендует для замера производительности?Раздел Performance Tools содержит десятки ссылок: Lighthouse, PageSpeed Insights, GTmetrix, WebPagetest, Sitespeed.io, SpeedCurve, DebugBear, Yellow Lab Tools и другие — для разовых проверок или постоянного мониторинга.
Какие правила отмечены как High priority?Примеры из разделов HTML, CSS и Images: подключать CSS до JavaScript, избегать встроенного CSS, анализировать сложность стилей, оптимизировать изображения и выбирать подходящий формат изображений.
А веб-шрифты там тоже рассматриваются?Да — есть отдельный раздел Fonts: отдавать WOFF2, держать вес веб-шрифтов до 300 КБ вместе со всеми начертаниями, использовать preconnect, чтобы они загружались быстрее, и не допускать мигания невидимого текста до загрузки шрифта.
У этого автора есть другие похожие чек-листы?Да — в README есть ссылки на Front-End Checklist и Front-End Design Checklist, а автор также упоминает свой сайт UX Patterns for Devs для разработчиков.
What are similar projects?Front-End-Checklist, awesome-angular, front-end-interview-handbook, react-redux-links, awesome-guidelines, CppCoreGuidelines, naming-cheatsheet, react-bits
Which topics is it in?front-end-development, checklist, guidelines, lists, optimization, best-practices, reference, css, guide, html, web-development, curated-list
Creator
thedaviddias
Size
0.4 MB
Stars
17.4K
Updated
CommitMar 23
Age
8y
Commits · 90 Days