Awesome

<h1 align="center" dir="rtl"> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist"><img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"></a> <br> <br> چک لیست کارایی در فرانت‌اند <br> </h1> <h4 align="center" dir="rtl">یک ترجمه مفهومی از <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist">Front-End Performance Checklist</a></h4> <h4 align="center" dir="rtl">🎮 تنها چک لیست مربوط به مباحث کارایی در فرانت‌اند که نسبت به بقیه سریع‌تر اجرا میشه</h4> <p align="center" dir="rtl">یه قانون ساده: "با در نظر گرفتن کارایی در ذهنتون، طراحی و برنامه‌نویسی کنین"</p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://discord.gg/btHQRkm"> <img src="https://img.shields.io/badge/chat-on_discord-4837E2.svg?style=flat-square" alt="Discord"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT"> </a> </p> <p align="center" dir="rtl"> <a href="#نحوه-استفاده">نحوه استفاده</a> • <a href="#contributing">همکاری</a> </p> <p align="center"> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist">🇺🇸</a> <a href="https://github.com/JohnsenZhou/Front-End-Performance-Checklist">🇨🇳</a> <a href="https://github.com/WilliamDASILVA/Front-End-Performance-Checklist">🇫🇷</a> <a href="https://github.com/ParkSB/Front-End-Performance-Checklist">🇰🇷</a> <a href="https://github.com/fernandofawkes/Front-End-Performance-Checklist">🇵🇹</a> <a href="https://github.com/lex111/Front-End-Performance-Checklist">🇷🇺</a> <a href="https://github.com/GameWith/Front-End-Performance-Checklist">🇯🇵</a> </p> <h2 dir="rtl">جدول محتوا</h2> <ol dir="rtl"> <li>

HTML

</li> <li>

CSS

</li> <li>

فونت ها

</li> <li>

تصاویر

</li> <li>

جاوا اسکریپت

</li> <li>

سرور (در حال تکمیل شدن)

</li> <li>

فریم ورک های جاوا اسکریپت (در حال تکمیل شدن)

</li> <li>

سیستم های مدیریت محتوا (در حال تکمیل شدن)

</li> </ol> <h2 dir="rtl">معرفی</h2> <p dir="rtl"> کارایی یک موضوع بزرگی است و همیشه مربوط به "بک‌اند" و یا یک "مدیر" نیست؛ بلکه "فرانت‌اند" هم در این زمینه مسئولیت‌هایی دارد. چک لیست کارایی فرانت‌اند، یک لیست کامل از مواردی است که شما باید به عنوان یک توسعه‌دهنده فرانت‌اند، آن‌ها را بررسی کنید و یا حداقل از وجود این موارد آگاه شوید و این موارد را در پروژه‌های خود (از پروژه‌های شخصی تا پروژه‌های حرفه‌ای) اعمال کنید. </p> <h3 dir="rtl">نحوه استفاده</h3> <p dir="rtl"> برای هر یک از قوانین، یک بند وجود دارد که توضیح می‌دهد <em>چرا</em> این قانون مهم است و <em>چگونه</em> می‌توانید آن را رفع کنید. برای اطلاعات بیشتر نیز به سراغ لینک‌های بروید که به عنوان 🛠 ابزار، 📖 مقاله و یا 📹 رسانه علامت گذاری شده‌اند و می‌توانند مکمل این چک لیست باشند. </p> <p dir="rtl"> تمامی موارد در <strong>چک لیست کارایی فرانت‌اند</strong> برای رسیدن به بالاترین امتیاز کارایی ضروری و مهم هستند اما شما علامت‌هایی را می‌بینید که به شما در الویت بندی این قوانین (جهت بررسی و اعمال) کمک می‌کنند. در مجموع 3 شاخص برای تعیین الویت وجود دارند: </p> <ul dir="rtl"> <li>

Low به این معنی است که این مورد الویت پایین دارد.

</li> <li>

Medium به این معنی است که این مورد الویت متوسط دارد. شما نباید از این موارد صرف نظر کنید.

</li> <li>

High به این معنی است که این مورد الویت بالا دارد. شما نمی‌توانید در استفاده از این مورد خودداری کنید و حتما باید موارد توصیه شده را رعایت کنید.

</li> </ul> <h3 dir="rtl">ابزارها</h3> <p dir="rtl"> لیستی از ابزارها که شما می‌توانید با استفاده از آن‌ها وبسایت یا اپلیکیشن خود را بررسی و بازبینی کنید: </p>

🛠 WebPagetest - Website Performance and Optimization Test
🛠 ☆ Dareboost: Website Speed Test and Website Analysis (use the coupon WPCDD20 for -20%)
🛠 Treo: Page Speed Monitoring
🛠 GTmetrix | Website Speed and Performance Optimization
🛠 PageSpeed Insights
🛠 Web.dev
🛠 Pingdom Website Speed Test
📖 Make the Web Faster | Google Developers
🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance
🛠 Calibre
🛠 Website Speed Test | Check Web Performance » Dotcom-Tools
🛠 Website and Server Uptime Monitoring - Pingdom (Free Signup Link)
🛠 Uptime Robot
🛠 SpeedCurve: Monitor front-end performance
🛠 PWMetrics - CLI tool and lib to gather performance metrics
🛠 Varvy - Page speed optimization
🛠 Lighthouse - Google
🛠 Checkbot browser extension - Checks for web performance best practices
🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages
🛠 Speedrank - Web Performance Monitoring
🛠 DebugBear - Monitor website performance and Lighthouse scores
🛠 packtracker.io - Check your webpack bundle size on every pull request.
🛠 Exthouse - Analyze the impact of a browser extension on web performance
🛠 LogRocket - Measure front-end performance in production apps

<h3 dir="rtl">منابع</h3>

HTML

html

Minified HTML: ‫کدهای HTML باید خلاصه‌سازی شده و کامنت‌ها، فضاهای خالی و خطوط اضافی حذف شوند

چرا‫:

‫حذف فضاهای خالی، کامنت‌ها و هر مورد غیر ضروری دیگر باعث کاهش اندازه صفحه HTML شما شده و سرعت بارگذاری صفحه را افزایش می‌دهد و در نهایت کاربران حجم کمتری را برای دانلود صرف می‌کنند.

‫چگونه:

‫بیشتر فریم ورک‌ها، ابزارهایی دارند که وظیفه آن‌ها خلاصه کردن کدهای HTML است. شما می‌توانید از بسته‌های موجود در NPM که اینکار را به صورت خودکار انجام می‌دهند نیز استفاده کنید.
- 🛠 HTML minifier | Minify Code
- 🛠 Online HTML Compressor
- 📖 Experimenting with HTML minifier — Perfection Kills
Place CSS tags always before JavaScript tags: ‫اطمینان حاصل کنید که CSS پیش از کدهای جاوا اسکریپت قرار گیرد
```

<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
```
‫چرا:

‫قرار دادن CSS پیش از جاوا اسکریپت، قابلیت دانلود بهتر و موازی را فراهم می‌کند و این امر باعث افزایش سرعت در هنگام رندر مرورگر می‌شود.

‫چگونه:

‫اطمینان حاصل کنید <link> و <style> موجود در بخش <head> همیشه قبل از <script> قرار داشته باشند.
- 📖 Ordering your styles and scripts for pagespeed
Minimize the number of iframes: ‫تنها در صورتی از iframe استفاده کنید که قادر به استفاده از روش دیگری نباشید. البته نهایت تلاش خود را به‌کار بگیرید تا حد امکان از iframe استفاده نکنید
Pre-load optimization with prefetch, dns-prefetch and prerender: ‫مرورگرهای پراستفاده می‌توانند با استفاده از تگ <link> و صفت rel با مقادیر مشخص، آدرس‌های خاصی را پیش بارگذاری (pre-loading) کنند

‫چرا:

‫ امکان Prefetching به مرورگر اجازه می‌دهد تا مخفیانه منابع ضروری را که در آینده برای نشان دادن محتوا به کاربر مورد استفاده قرار می‌گیرند را دریافت کند. مرورگر قادر است این منابع را در کش خود ذخیره کند و باعث افزایش سرعت بارگذاری شود. زمانی که بارگذاری صفحه جاری به پایان رسید و پردازنده بیکار (idle) شد، مرورگر شروع به دانلود این منابع می‌کند؛ و زمانی که کاربر بر روی یک لینک مشخص کلیک می‌کند (در حالی که منابع مورد نیاز برای بارگذاری آن از قبل دریافت شده)، محتوا سریعا برای کاربر نمایش داده خواهد شد.

‫چطور:

‫مطمئن شوید که قابلیت‌های تگ <link> به درستی در بخش <head> استفاده کنید.

⬆ ‫برگشت به بالا

CSS

css

Minification: ‫کدهای CSS باید خلاصه‌سازی شده و کامنت‌ها، فضاهای خالی و خطوط اضافی حذف شوند

‫چرا:

‫زمانی که فایل‌های CSS خلاصه‌سازی می‌شوند، محتوا سریع‌تر بارگذاری شده و کاربر داده کمتری را دانلود می‌کند. خلاصه‌سازی فایل‌های CSS در خروجی نهایی بسیار مهم است. انجام این عمل هم به نفع کاربر و هم به نفع کسب و کاری است که قصد دارد هزینه پهنای باند و استفاده از منابع را کاهش دهد.

‫چگونه:

‫از ابزارهایی استفاده کنید که فایل‌های مورد نظر را به صورت خودکار در زمان تولید خروجی نهایی و یا پیش از آن خلاصه‌سازی کنند.
- 🛠 cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- 🛠 CSS Minfier
- 🛠 @neutrinojs/style-minify - npm
- 🛠 Online CSS Compressor
Concatenation: ‫فایل‌های CSS در یک فایل ادغام شوند (ممکن است برای HTTP/2 نیازی نباشد).
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<link rel="stylesheet" href="foobar.css"/>
```
‫چرا:

‫اگر شما هنوز هم از HTTP/1 استفاده می‌کنید، لازم است تا فایل‌های CSS را با هم ادغام کنید. ممکن است انجام این عمل زمانی که شما از HTTP/2 استفاده می‌کنید نیازی نباشد. (تست و بررسی بیشتر باید انجام گیرد)

‫چگونه:
- ‫از ابزارهای آنلاین یا هر پلاگین دیگری که در زمان تولید خروجی نهایی و یا پیش از آن، فایل‌های CSS را با هم ادغام می‌کنند استفاده کنید. <br>
- ‫البته اطمینان حاصل کنید که این ادغام باعث ایجاد مشکل در پروژه شما نشود.
- 📖 HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- 📖 Performance Best Practices in the HTTP/2 Era
Non-blocking: ‫فایل‌های CSS باید به گونه‌ای بارگذاری شوند که ایجاد DOM به تاخیر نیفتد
```
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>
```
‫چرا:

‫فایل‌های CSS می‌توانند تا مدتی بارگذاری ادامه محتویات صفحه شما را با تاخیر مواجه کند. با استفاده از قابلیت preload می‌توان بارگذاری فایل‌های CSS را پیش پردازش کدهای موجود در صفحه آغاز کرد.

‫چطور:

‫تنها با افزودن صفت rel همراه با مقدار preload و اضافه کردن "as="style به تگ <link> این امر امکان پذیر است.
Unused CSS: ‫قوانین بدون استفاده را حذف کنید

‫چرا:

‫حذف قوانین بدون استفاده در CSS می‌تواند باعث کاهش حجم فایل‌ها شود و در نهایت سرعت بارگذاری فایل‌ها را بیشتر کند.

‫چطور:

‫⚠️ همیشه فریم‌ورک‌های مورد استفاده‌تان را بررسی کنید تا کدهای اضافی نداشته باشند. بیشتر اوقات شما به تمامی قوانین موجود در این فریم‌ورک‌ها احتیاج نخواهید داشت.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

CSS Critical: ‫CSSهای ضروری ("critical" یا "above the fold") شامل مجموعه قوانین CSS هستند که برای نمایش بخشی از صفحه که در حال نمایش (در زمان بارگذاری) است، می‌باشند. این قوانین پیش از خطوط تعریف فایل‌های CSS و در داخل تگ <style> قرار میگیرند.

‫چرا:

‫استفاده از CSSهای ضروری باعث افزایش سرعت در رندر صفحات می‌شود و همچنین تعداد درخواست‌ها به سرور را کاهش می‌دهد.

‫چگونه:

‫CSSهای ضروری را با استفاده از ابزارهای آنلاین و یا پلاگین‌های موجود (مثلا ابزاری که Addy Osmani توسعه داده است) تولید کنید.
- 📖 Understanding Critical CSS
- 🛠 Critical by Addy Osmani on GitHub automates this.
- 📖 Inlining critical CSS for better web performance | Go Make Things
- 🛠 Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity
- 📖 Reduce the size of the above-the-fold content

Embedded or inline CSS: ‫از inline CSS داخل <body> استفاده نکنید (در HTTP/2 معتبر نیست)

‫چرا:

‫اولین دلیل عادت خوب جدا کردن طراحی از محتوا است. این کار همچنین باعث می‌شود که قابلیت نگهداری و دسترسی در وبسایت شما بالا باشد. اما از دید کارایی، این عمل به سادگی باعث افزایش حجم صفحات شما می‌شود و زمان بارگذاری صفحه را افزایش می‌دهد.

‫چطور:

‫همیشه از فایل‌های خارجی و یا قرار دادن کدهای CSS در درون بخش <head> استفاده کنید
- 📖 Observe CSS Best Practices: Avoid CSS Inline Styles
Analyse stylesheets complexity: ‫بررسی استایل می‌تواند کمک کند تا مشکلات، موانع و قوانین تکراری را شناسایی کنید

‫چرا:

‫برخی اوقات ممکن است خطاهایی را در فایل‌های CSS خود پیدا کنید. بررسی این فایل‌ها و رفع مشکلات موجود در آن‌ها باعث می‌شود که فایل‌های CSS شما سریع‌تر بارگذاری شوند

‫چطور:

‫CSSهای شما باید سازماندهی شوند؛ این عمل با پیش پردازشگرهای CSS امکان پذیر است. لینک تعدادی از ابزارهای آنلاین در زیر قرار دارند که می‌توانید از آن‌ها برای بررسی و تصحیح کدهای خود استفاده کنید.
- 🛠 TestMyCSS | Optimize and Check CSS Performance
- 🛠 CSS Stats
- 🛠 macbre/analyze-css: CSS selectors complexity and performance analyzer
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes

⬆ ‫برگشت به بالا

فونت ها

fonts

📖 A Book Apart, Webfont Handbook

Webfont formats: ‫شما باید از فرمت WOFF2 در پروژه وب یا اپلیکیشن خود استفاده کنید

‫چرا:

‫طبق گفته گوگل، نسخه دوم فرمت فشرده وب فونت WOFF به طور میانگین 30% حجم کمتری نسبت به نسخه اول آن دارد. بهتر است که از WOFF 2.0 استفاده کرده و سپس از WOFF 1.0 و TTF به عنوان فرمت‌های پشتیبان در مرورگرهای قدیمی بهره ببرید.

‫چگونه:

‫پیش از خرید فونت جدید اطمینان حاصل کنید که نسخه WOFF2 در اختیار شما قرار گیرد. اگر شما از یک فونت رایگان استفاده می‌کنید، می‌توانید از سایت‌هایی که فرمت‌های مورد نیاز شما را تولید می‌کنند کمک بگیرید.
Use preconnect to load your fonts faster: ‫برای بارگذاری سریع فونت‌هایی که خارج از سرور شما قرار دارند از قابلیت preconnect استفاده کنید
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
‫چرا:

‫زمانی که شما به وبسایتی مراجعه می‌کنید، مرورگر شما نیاز دارد که بداند سایت در کدام سرور میزبانی می‌شود تا بتوانید به آن سرور متصل شود. مرورگر شما مجبور است که به یک سرور DNS متصل گردد و تا پیش از دریافت منابع (فونت‌ها، فایل‌های CSS و ...) منتظر بماند تا جستجوی مکان سرور شما کامل شود. تکنیک‌های Prefetch و Preconnect به مرورگر اجازه می‌دهند که اطلاعات DNS را جلوتر جستجو کند و شروع به ایجاد یک ارتباط TCP با سروری نماید که فونت‌های شما بر روی آن میزبانی می‌شوند. این کار باعث افزایش کارایی می‌شود چرا که زمانی که مرورگر در حال خواندن فایل CSS شماست و متوجه می‌شود که نیاز به اتصال به یک سرور خارجی برای بارگذاری فونت‌ها دارد، موارد مربوط به DNS از قبل انجام شده و این مورد باعث افزایش سرعت دریافت فونت‌ها می‌شود.

‫چگونه:
- ‫قبل از استفاده از تکنیک prefetch، از webpagetest برای بررسی سایت خود استفاده کنید <br>
- ‫در گزارش تولید شده، به دنبال بخشی باشید که جستجوی DNS در آن قرار دارد و به هاست‌هایی که باید متصل شود اشاره می‌کند. <br>
- ‫در بخش <head> از تکنیک prefetch برای وب فونت‌های خود استفاده کنید و در نهایت هاست‌های اشاره شده را نیز preconnect کنید.
Webfont size: ‫حجم مجموع فونت‌های استفاده نباید بیشتر از 300 کیلوبایت باشد

📖 Font Bytes - Page Weight

Prevent Flash or Invisible Text: ‫پیش از بارگذاری فونت‌ها متن را نمایش دهید

⬆ ‫برگشت به بالا

تصاویر

images

📖 Image Bytes in 2018
Images optimization: ‫تصاویر باید بدون تغییر گسترده در هنگام نمایش به کاربر، بهینه و فشرده شوند

‫چرا:

‫تصاویر بهینه سازی شده سریع‌تر دانلود می‌شوند و حجم اینترنت کمتری برای دانلود نیاز دارند.

‫چطور:
- ‫هر جا که امکان پذیر بود به جای تصاویر کوچک از افکت‌های CSS3 استفاده کنید <br>
- ‫هر جا که ممکن بود از فونت‌ها به جای متن‌های تصویری استفاده کنید <br>
- ‫از SVG استفاده کنید <br>
- ‫از ابزارهای فشرده سازی تصویر (که به صورت خودکار اینکار را انجام می‌دهند) استفاده کنید و سطح فشرده سازی آن‌ها را زیر ۸۵ قرار دهید
Images format: ‫فرمت مناسب را برای تصاویر مورد نظر انتخاب کنید

‫چرا:

‫برای اینکه مطمئن شوید که تصاویر، وبسایتتان را کُند نمی‌کند، فرمتی را انتخاب کنید که برای تصویر شما مناسب است. اگر یک عکس داشتید، اغلب اوقات JPEG مناسب‌ترین انتخاب در مقایسه با PNG و GIF است. اما فراموش نکنید که نیم نگاهی به فرمت‌های نسل بعد نیز داشته باشید چرا که می‌توانند حجم فایل‌های شما را بیشتر کاهش دهند. هر فرمتی نقاط مثبت و منفی خود را دارد؛ و شما باید این نقاط مثبت و منفی را بدانید تا بتوانید با توجه به شرایط بهترین فرمت را انتخاب کنید.

‫چطور:
- ‫از ابزار Lighthouse برای شناسایی اینکه کدام تصاویر می‌توانند از فرمت‌های نسل بعدی استفاده کنند، استفاده کنید. (مانند JPEG 2000 ،JPEG XR و یا WebP) <br>
- ‫فرمت‌های مختلف را با هم مقایسه کنید؛ برخی اوقات استفاده از PNG8 بسیار بهتر از PNG16 است و بعضی اوقات نه.
Use vector image vs raster/bitmap: ‫هر زمان که ممکن بود، از تصاویر بُرداری به‌جای پیکسلی استفاده کنید

‫چرا:

‫ تصاویر برداری (مانند SVG) معمولا از فرمت‌های دیگر کم حجم‌تر و به خوبی مقیاس پذیر هستند. این نوع تصاویر می‌توانند متحرک شوند و به وسیله CSS در آن‌ها تغییراتی (مانند تغییر رنگ) انجام داد.
Images dimensions: ‫اگر اندازه تصویر مورد استفاده را می‌دانید، بر روی تگ <img> صفات width و height را متناسب با مقدار این اندازه تنظیم کنید

‫چرا:

‫اگر طول و ارتفاع تصاویر مشخص شوند، فضایی که برای نمایش تصویر مورد نیاز است رزرو می‌شود. ولی بدون این صفات، مرورگر اندازه تصاویر را (پیش از دانلود و بارگذاری) نمی‌داند و نمی‌تواند فضای مناسب را برای تصویر رزرو کند؛ و این کار باعث جابه‌جایی لایه‌ها (CLS) در زمان بارگذاری تصاویر می‌شود.
Avoid using Base64 images: ‫شما می‌توانید تصاویر کوچک را به base64 تبدیل کنید اما اینکار یک عادت خوب نیست
Lazy loading: ‫تصاویری که در هنگام بارگذاری وبسایت در محدوده نمایش داده شده به کاربر نیستند (مثلا در پایین صفحه هستند) باید با استفاده از تکنیک lazy loading بارگذاری شوند

‫چرا:

‫اینکار باعث بهبود زمان بارگذاری صفحه جاری می‌شود و در کنار آن، از بارگذاری تصاویر غیر ضروری که کاربر ممکن است به آن احتیاج نداشته باشد جلوگیری می‌کند.

‫چطور:
- ‫از ابزار Lighthouse برای شناسایی تصاویر خارج از محدوده دید کاربر استفاده کنید. <br>
- ‫از یک کتابخانه جاوا اسکریپت مانند مواردی که در پایین آورده شده‌اند برای بارگذاری تنبل (lazy load) تصاویر استفاده کنید. اطمینان حاصل کنید که این تکنیک را فقط برای تصاویر خارج از محدوده دید کاربر انجام دهید. <br>
- ‫همچنین اطمینان حاصل کنید تصاویر جایگزین (placeholder) در زمان مناسب به کاربر نمایش داده شوند.
Responsive images: ‫اطمینان حاصل کنید که تصاویر متناسب با اندازه صفحه نمایش کاربر، به‌کار برده شوند.

‫چرا:

‫دستگاه‌های کوچک نیاز به تصاویر بزرگ‌تر از اندازه صفحه نمایش خود ندارند. توصیه می‌شود که از چندین اندازه مختلف از یک عکس استفاده کنید.

‫چطور:
- ‫اندازه‌های مختلف از تصویر را برای دستگاه‌هایی که مورد نظر شماست ایجاد کنید <br>
- ‫ از صفت srcset و تگ picture برای نمایش نسخه‌های مختلف از تصویر خود استفاده کنید
- 📖 Responsive images - Learn web development | MDN

⬆ ‫برگشت به بالا

جاوا اسکریپت

javascript

JS Minification: ‫ کدهای جاوا اسکریپت باید خلاصه‌سازی شده و کامنت‌ها، فضاهای خالی و خطوط اضافی حذف شوند

‫چرا:

‫حذف تمامی فضاهای خالی غیر ضروری، کامنت‌ها و خطوط اضافی باعث کاهش حجم فایل‌های جاوا اسکریپت شما شده و بارگذاری صفحه وبسایت شما را سریع‌تر می‌کند و در نهایت حجم دانلود کمتری را برای کابران شما به دنبال دارد.

‫چطور:

‫از ابزارهای زیر که به شما پیشنهاد داده شده، برای خلاصه‌سازی خودکار فایل‌ها قبل و یا در حین تولید خروجی نهایی استفاده کنید.

No JavaScript inside: ‫ از قرار دادن کدهای جاوا اسکریپت در میان body خودداری کنید. تمامی کدهای جاوا اسکریپت خود را در فایل‌های خارجی تجمیع کنید. شما همچنین می‌توانید کدهای جاوا اسکریپت را در تگ <head> و یا انتهای صفحه خود قرار دهید (قبل از <body/>)

‫چرا:

‫ قرار دادن کدها به صورت مستقیم در میان تگ <body> می‌تواند صفحه شما را به دلیل اینکه در زمان ساخت DOM در حال پردازش هستند را با کُندی مواجه کند. بهترین گزینه می‌تواند استفاده از فایل‌های خارجی همراه با قابلیت async یا defer برای جلوگیری از مسدود کردن DOM باشد. گزینه دیگر نیز قرار دادن مقدار محدودی از کدهای جاوا اسکریپت داخل تگ <head> می‌باشد. بیشتر اوقات کدهای آمارگیری یا اسکریپت‌های کوچک باید پیش از ایجاد DOM بارگذاری شوند.

‫چگونه:

‫ اطمینان حاصل کنید که تمامی فایل‌های شما به وسیله قابلیت defer یا async بارگذاری شوند. همچنین در مورد کدهایی که در درون تگ <head> قرار می‌دهید با دقت تصمیم گیری کنید.
- 📖 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
Non-blocking JavaScript: ‫ بارگذاری فایل‌های جاوا اسکریپت باید از طریق قابلیت async به صورت غیر همزمان باشد و یا از طریق قابلیت defer به تعویق بی‌افتد.
```

<script defer src="foo.js"></script>


<script async src="foo.js"></script>
```
‫چرا:

‫بارگذاری جاوا اسکریپت باعث مسدود سازی تجزیه (parse) سند HTML می‌شود؛ در نتیجه زمانی که تجزیه‌گر (parser) به یک تگ <script> (که معمولا در داخل تگ <head> قرار دارد) می‌رسد، متوقف شده و اسکریپت را اجرا می‌کند. اگر اسکریپت‌های شما در ابتدای سند شما قرار دارند افزودن قابلیت async یا defer بسیار توصیه می‌شود در حالی که اگر این کدها در انتهای سند شما قرار دارند افزودن این قابلیت‌ها تاثیر چندانی در بحث کارایی ندارند. اما استفاده همیشگی از این قابلیت‌ها به عنوان یک عادت خوب برای جلوگیری از ایجاد مشکلات بالقوه کارایی به حساب می‌آید.

‫چگونه:

‫ از قابلیت async (در صورتی که فایل شما وابسته به فایل‌های دیگر نیست) و قابلیت defer (اگر این فایل وابسته به فایل دیگر است) به عنوان یک صفت در تگ <script> استفاده کنید. <br> ‫اگر اسکریپت کوچکی دارید، شاید بهتر باشد آن‌را به صورت داخلی (inline) بالای فایل‌های جاوا اسکریپت قرار دهید.
- 📖 Remove Render-Blocking JavaScript
- 📖 Defer loading JavaScript
Optimized and updated JS libraries: ‫تمامی کتابخانه‌های جاوا اسکریپت که در پروژه استفاده می‌شوند باید لازم و ضروری باشند (برای عملکردهای ساده ترجیحا از جاوا اسکریپت خام استفاده کنید)؛ و به آخرین نسخه آپدیت شده باشند.

‫چرا:

‫اکثر اوقات، نسخه‌های جدید همراه با بهینه سازی و رفع مشکلات امنیتی هستند. بهتر است که شما از بهینه‌ترین نسخه برای افزایش سرعت بارگذاری و کارایی در پروژه خود استفاده کنید و مطمئن شوید که وبسایت یا اپلیکیشن شما از نسخه‌های قدیمی استفاده نمی‌کنند.

‫چطور:

‫- اگر پروژه شما از پکیج‌های NPM استفاده می‌کند، npm-check یک گزینه مناسب برای بروزرسانی کتابخانه‌های مورد استفاده شماست. <br> ‫- Greenkeeper می‌تواند به صورت خودکار کتابخانه‌های شما را بررسی کند و هرگاه یک بروزرسانی در دسترس بود به شما پیشنهاد دهد.
- 📖 You may not need jQuery
- 📖 Vanilla JavaScript for building powerful web applications

Check dependencies size limit: ‫از کتابخانه‌های موجود به طور هوشمندانه استفاده کنید؛ شما اغلب می‌توانید از یک کتابخانه کوچک‌تر برای عملکردی مشابه بهره ببرید.

‫چرا:

‫ شما ممکن است بخواهید از 745 هزار پکیجی که در npm موجود است، یکی را استفاده کنید؛ اما شما باید بهترین پکیجی را که متناسب با نیاز شماست را استفاده کنید. برای مثال MomentJS یک کتابخانه فوق العاده با تعداد زیادی عملکرد است که ممکن است به کار شما نیاید و به همین دلیل است که Day.js ایجاد شده است؛ که حجم آن 2Kb در مقابل 16.4KB در نسخه gz است.

‫چطور:

‫همیشه مقایسه کنید و بهترین و کم حجم‌ترین کتابخانه متناسب با نیازهای خود را انتخاب کنید. همچنین شما می‌توانید از ابزاری مانند npm trends برای مقایسه تعداد دانلودهای پکیج‌ها و یا Bundlephobia برای شناخت پکیج‌های مورد نیاز، استفاده کنید.
JavaScript Profiling: ‫مشکلات کارایی در فایل‌های جاوا اسکریپت (و CSS) را بررسی کنید

‫چرا:

‫بالا بودن پیچیدگی در کدهای جاوا اسکریپت می‌تواند کارایی زمان اجرا را کاهش دهد. شناسایی این مشکلات بالقوه برای دریافت بهترین تجربه کاربری ضروری است.

‫چطور:

‫از ابزار Timeline موجود در ابزارهای توسعه دهنده کروم برای ارزیابی کدها و پیدا کردن آن مواردی که ممکن است اجرایشان طولانی باشد، استفاده کنید.
Use of Service Workers: ‫از سرویس ورکر در PWA به عنوان کش کردن داده‌ها و یا اجرای وظایف سنگین (بدون اینکه روی تجربه کاربری تاثیر بگذارد) بهره ببرید

⬆ ‫برگشت به بالا

سرور

server-side

Your website is using HTTPS:

‫چرا:

‫HTTPS نه تنها برای وبسایت‌هایی با پرداخت اینترنتی بلکه برای تمامی وبسایت‌هایی است که در حال تبادل اطلاعات با کاربر هستند. داده‌هایی که توسط یک کاربر به اشتراک گذاشته شده‌اند یا داده‌هایی که با یک کاربر خارجی به اشتراک گذاشته شده‌اند. مرورگرهای مدرن امروزه عملکرد محدودی در قبال وبسایت‌های غیر امن دارند. برای مثال: مکان یابی کاربر، ارسال نوتفیکیشن و سرویس ورکرها در سایت‌هایی که از HTTPS استفاده نمی‌کنند، غیر فعال است. امروزه فعال کردن SSL خیلی راحت‌تر از گذشته است. (با تشکر از Let's Encrypt رایگان نیز هست).

Page weight < 1500 KB (ideally < 500 KB): ‫تا جایی که می‌توانید حجم صفحه و فایل‌های موجود در آن را کاهش دهید.

‫چرا:

‫شما در حالت ایده‌آل باید حجم صفحه خود را کمتر از 500 کیلوبایت نگه دارید؛ گرچه بررسی وضعیت وبسایت‌ها نشان می‌دهد که میانگین صفحات موجود در وب 1500 کیلوبایت حجم دارند (حتی برای موبایل). با توجه به کاربران هدف، وضعیت اتصال شبکه و دستگاه، مهم است تا جایی که امکان دارد مجموع حجم صفحه را کاهش دهید تا تجربه کاربری بهتری داشته باشید.

‫چطور:

‫تمامی قوانین موجود در این چک لیست به شما کمک می‌کند تا حد امکان حجم کدها و منابع خود را کاهش دهید.
- 📖 Page Weight
- 🛠 What Does My Site Cost?
- 🛠 web - Measure full page size in Chrome DevTools - Stack Overflow
Page load times < 3 seconds: تا جایی که ممکن است زمان بارگذاری صفحه را کاهش دهید تا محتوا سریع‌تر به دست کاربر برسد.

‫چرا:

‫هر چقدر اپلیکیشن یا وبسایت شما سریع‌تر باشد، شانس رها کردن وبسایت توسط کاربر کمتر می‌شود. به زبان دیگر شما شانس کمتری برای از دست دادن کاربر دارید. بررسی‌های زیادی برای اثبات این مورد انجام گرفته است.

‫چطور:

‫از ابزارهای آنلاین مانند Page Speed Insight یا WebPageTest جهت بررسی صفحات و این لیست کارایی فرانت‌اند جهت بهبود سرعت بارگذاری استفاده کنید.
Time To First Byte < 1.3 seconds: ‫هر چقدر که می‌توانید، مدت زمانی را که مرورگر منتظر دریافت پاسخ از سمت سرور است را کاهش دهید

Cookie size: ‫اگر شما از کوکی‌ها استفاده می‌کنید، دقت کنید که حجم هر کوکی از 4096 بایت بیشتر نشود و هر دامنه بیشتر از 20 کوکی نداشته باشد

‫چرا:

کوکی‌ها در حال تبادل بین کاربر و سرور از طریق HTTP header هستند. مهم است که حجم کوکی‌ها را تا جایی که امکان دارد کاهش دهید تا روی زمان پاسخ به کاربر حداقل تاثیر را بگذارند.

‫چطور:

‫کوکی‌های غیر ضروری را حذف کنید.

Minimizing HTTP requests: ‫اطمینان حاصل کنید که هر فایل درخواستی برای وبسایت یا اپلیکیشن شما ضروری است.

📖 Combine external CSS
📖 Combine external JavaScript

Use a CDN to deliver your assets: ‫از CDN برای رساندن سریع محتوای خود به کاربران در سرتاسر جهان استفاده کنید

Serve files from the same protocol: ‫اگر از HTTPS استفاده می‌کنید، نباید فایل‌های موجود در صفحه را از طریق HTTP فراخوانی کنید. اگر وبسایت شما HTTPS است فایل‌های موجود در صفحه نیز باید از همین پروتکل دریافت شوند.
Serve reachable files: ‫از درخواست دادن به صفحات و فایل‌های ناموجود خودداری کنید (خطای 404 را کاهش دهید)

📖 How to avoid bad requests

Set HTTP cache headers properly: ‫از HTTP header جهت کاهش ارسال درخواست و دریافت پاسخ بین سرور و کاربر استفاده کنید. این کار با کش کردن برخی منابع در مرورگر کاربر، بازدیدهای آینده را سریع‌تر می‌کند.

📖 Using cache-control for browser caching

GZIP / Brotli compression is enabled: ‫از یک متد فشرده سازی مانند Gzip یا Brotli جهت کاهش حجم فایل‌ها ارسالی (از سمت سرور) به کاربر استفاده کنید. هر چقدر حجم فایل‌ها کمتر باشد، کاربر آن‌ها را سریع‌تر دریافت کرده و در نتیجه سرعت و کارایی بهتر می‌شود.

⬆ ‫برگشت به بالا

فریم ورک های جاوا اسکریپت

Angular

📖 Angular Performance Checklist

React

Vue

📖 Vue - Useful Links|Style Guide and Performance

سیستم های مدیریت محتوا

WordPress

🛠 Test Your Website Speed | WordPress Hosting by @WPEngine

Articles

Plugins recommended

Translations

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

🇺🇸 English: thedaviddias/Front-End-Performance-Checklist
🇵🇹 Portuguese: fernandofawkes/Front-End-Performance-Checklist
🇨🇳 Chinese: JohnsenZhou/Front-End-Performance-Checklist
🇷🇺 Russian: lex111/Front-End-Performance-Checklist
🇫🇷 French: WilliamDASILVA/Front-End-Performance-Checklist
🇰🇷 Korean: ParkSB/Front-End-Performance-Checklist
🇪🇸 Spanish: dagerzuga/Front-End-Performance-Checklist
🇻🇮 Vietnamese : huynhan147/Front-End-Performance-Checklist
🇯🇵 Japanese: GameWith/Front-End-Performance-Checklist
🇵🇱 Polish: mbiesiad/Front-End-Performance-Checklist

Contributing

Open an issue or a pull request to suggest changes or additions.

Support

If you have any question or suggestion, don't hesitate to use Discord or Twitter:

Author

Build with ❤️ by David Dias

Translate

Translate with ❤️ by Mohammad Saleh Fadaei

Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist/graphs/contributors"> <img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /> </a>

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

MIT

All icons are provided by Icons8

⬆ back to top

Awesome

HTML

CSS

فونت ها

تصاویر

جاوا اسکریپت

سرور

فریم ورک های جاوا اسکریپت

Angular

React

Vue

سیستم های مدیریت محتوا

WordPress

Articles

Plugins recommended

Translations

Contributing

Support

Author

Translate

Contributors

Backers

Sponsors

License