Skip to content

Latest commit

 

History

History
771 lines (529 loc) · 62.2 KB

README.md

File metadata and controls

771 lines (529 loc) · 62.2 KB
Raw


Front-End Performance Checklist

چک لیست کارایی در فرانت‌اند  

یک ترجمه مفهومی از Front-End Performance Checklist

🎮 تنها چک لیست مربوط به مباحث کارایی در فرانت‌اند که نسبت به بقیه سریع‌تر اجرا میشه

یه قانون ساده: "با در نظر گرفتن کارایی در ذهنتون، طراحی و برنامه‌نویسی کنین"

      PRs Welcome         Discord           Licence MIT  

  نحوه استفاده • همکاری

🇺🇸 🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵

جدول محتوا

  1. HTML

  2. CSS

  3. فونت ها

  4. تصاویر

  5. جاوا اسکریپت

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

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

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

معرفی

کارایی یک موضوع بزرگی است و همیشه مربوط به "بک‌اند" و یا یک "مدیر" نیست؛ بلکه "فرانت‌اند" هم در این زمینه مسئولیت‌هایی دارد. چک لیست کارایی فرانت‌اند، یک لیست کامل از مواردی است که شما باید به عنوان یک توسعه‌دهنده فرانت‌اند، آن‌ها را بررسی کنید و یا حداقل از وجود این موارد آگاه شوید و این موارد را در پروژه‌های خود (از پروژه‌های شخصی تا پروژه‌های حرفه‌ای) اعمال کنید.

نحوه استفاده

برای هر یک از قوانین، یک بند وجود دارد که توضیح می‌دهد چرا این قانون مهم است و چگونه می‌توانید آن را رفع کنید. برای اطلاعات بیشتر نیز به سراغ لینک‌های بروید که به عنوان 🛠 ابزار، 📖 مقاله و یا 📹 رسانه علامت گذاری شده‌اند و می‌توانند مکمل این چک لیست باشند.

تمامی موارد در چک لیست کارایی فرانت‌اند برای رسیدن به بالاترین امتیاز کارایی ضروری و مهم هستند اما شما علامت‌هایی را می‌بینید که به شما در الویت بندی این قوانین (جهت بررسی و اعمال) کمک می‌کنند. در مجموع 3 شاخص برای تعیین الویت وجود دارند:

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

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

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

ابزارها

لیستی از ابزارها که شما می‌توانید با استفاده از آن‌ها وبسایت یا اپلیکیشن خود را بررسی و بازبینی کنید:

منابع

HTML

html

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

    چرا‫:

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

    ‫چگونه:

    ‫بیشتر فریم ورک‌ها، ابزارهایی دارند که وظیفه آن‌ها خلاصه کردن کدهای HTML است. شما می‌توانید از بسته‌های موجود در NPM که اینکار را به صورت خودکار انجام می‌دهند نیز استفاده کنید.

  • Place CSS tags always before JavaScript tags: high ‫اطمینان حاصل کنید که 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> قرار داشته باشند.

  • Minimize the number of iframes: high ‫تنها در صورتی از iframe استفاده کنید که قادر به استفاده از روش دیگری نباشید. البته نهایت تلاش خود را به‌کار بگیرید تا حد امکان از iframe استفاده نکنید

  • Pre-load optimization with prefetch, dns-prefetch and prerender: low ‫مرورگرهای پراستفاده می‌توانند با استفاده از تگ <link> و صفت rel با مقادیر مشخص، آدرس‌های خاصی را پیش بارگذاری (pre-loading) کنند

    ‫چرا:

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

    ‫چطور:

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

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

CSS

css

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

    ‫چرا:

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

    ‫چگونه:

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

  • Concatenation: medium ‫فایل‌های 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 را با هم ادغام می‌کنند استفاده کنید.
    • ‫البته اطمینان حاصل کنید که این ادغام باعث ایجاد مشکل در پروژه شما نشود.

  • Non-blocking: high ‫فایل‌های 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: medium ‫قوانین بدون استفاده را حذف کنید

    ‫چرا:

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

    ‫چطور:

    ‫⚠️ همیشه فریم‌ورک‌های مورد استفاده‌تان را بررسی کنید تا کدهای اضافی نداشته باشند. بیشتر اوقات شما به تمامی قوانین موجود در این فریم‌ورک‌ها احتیاج نخواهید داشت.

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

    ‫چرا:

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

    ‫چطور:

    ‫همیشه از فایل‌های خارجی و یا قرار دادن کدهای CSS در درون بخش <head> استفاده کنید

  • Analyse stylesheets complexity: high ‫بررسی استایل می‌تواند کمک کند تا مشکلات، موانع و قوانین تکراری را شناسایی کنید

    ‫چرا:

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

    ‫چطور:

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

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

فونت ها

fonts

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

    ‫چرا:

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

    ‫چگونه:

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

  • Use preconnect to load your fonts faster: medium ‫برای بارگذاری سریع فونت‌هایی که خارج از سرور شما قرار دارند از قابلیت preconnect استفاده کنید

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    ‫چرا:

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

    ‫چگونه:

    • ‫قبل از استفاده از تکنیک prefetch، از webpagetest برای بررسی سایت خود استفاده کنید
    • ‫در گزارش تولید شده، به دنبال بخشی باشید که جستجوی DNS در آن قرار دارد و به هاست‌هایی که باید متصل شود اشاره می‌کند.
    • ‫در بخش <head> از تکنیک prefetch برای وب فونت‌های خود استفاده کنید و در نهایت هاست‌های اشاره شده را نیز preconnect کنید.

  • Webfont size: medium ‫حجم مجموع فونت‌های استفاده نباید بیشتر از 300 کیلوبایت باشد

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

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

تصاویر

images

  • 📖 Image Bytes in 2018

  • Images optimization: high ‫تصاویر باید بدون تغییر گسترده در هنگام نمایش به کاربر، بهینه و فشرده شوند

    ‫چرا:

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

    ‫چطور:

    • ‫هر جا که امکان پذیر بود به جای تصاویر کوچک از افکت‌های CSS3 استفاده کنید
    • ‫هر جا که ممکن بود از فونت‌ها به جای متن‌های تصویری استفاده کنید
    • ‫از SVG استفاده کنید
    • ‫از ابزارهای فشرده سازی تصویر (که به صورت خودکار اینکار را انجام می‌دهند) استفاده کنید و سطح فشرده سازی آن‌ها را زیر ۸۵ قرار دهید

  • Images format: high ‫فرمت مناسب را برای تصاویر مورد نظر انتخاب کنید

    ‫چرا:

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

    ‫چطور:

    • ‫از ابزار Lighthouse برای شناسایی اینکه کدام تصاویر می‌توانند از فرمت‌های نسل بعدی استفاده کنند، استفاده کنید. (مانند JPEG 2000 ،JPEG XR و یا WebP)
    • ‫فرمت‌های مختلف را با هم مقایسه کنید؛ برخی اوقات استفاده از PNG8 بسیار بهتر از PNG16 است و بعضی اوقات نه.

  • Use vector image vs raster/bitmap: medium ‫هر زمان که ممکن بود، از تصاویر بُرداری به‌جای پیکسلی استفاده کنید

    ‫چرا:

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

  • Images dimensions: medium ‫اگر اندازه تصویر مورد استفاده را می‌دانید، بر روی تگ <img> صفات width و height را متناسب با مقدار این اندازه تنظیم کنید

    ‫چرا:

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

  • Avoid using Base64 images: medium ‫شما می‌توانید تصاویر کوچک را به base64 تبدیل کنید اما اینکار یک عادت خوب نیست

  • Lazy loading: medium ‫تصاویری که در هنگام بارگذاری وبسایت در محدوده نمایش داده شده به کاربر نیستند (مثلا در پایین صفحه هستند) باید با استفاده از تکنیک lazy loading بارگذاری شوند

    ‫چرا:

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

    ‫چطور:

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

  • Responsive images: medium ‫اطمینان حاصل کنید که تصاویر متناسب با اندازه صفحه نمایش کاربر، به‌کار برده شوند.

    ‫چرا:

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

    ‫چطور:

    • ‫اندازه‌های مختلف از تصویر را برای دستگاه‌هایی که مورد نظر شماست ایجاد کنید
    • ‫ از صفت srcset و تگ picture برای نمایش نسخه‌های مختلف از تصویر خود استفاده کنید

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

جاوا اسکریپت

javascript

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

    ‫چرا:

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

    ‫چطور:

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

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

    ‫چرا:

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

    ‫چگونه:

    ‫ اطمینان حاصل کنید که تمامی فایل‌های شما به وسیله قابلیت defer یا async بارگذاری شوند. همچنین در مورد کدهایی که در درون تگ <head> قرار می‌دهید با دقت تصمیم گیری کنید.

  • Non-blocking JavaScript: high ‫ بارگذاری فایل‌های جاوا اسکریپت باید از طریق قابلیت async به صورت غیر همزمان باشد و یا از طریق قابلیت defer به تعویق بی‌افتد.

    <!-- Defer Attribute -->
<script defer src="foo.js"></script>

<!-- Async Attribute -->
<script async src="foo.js"></script>

    ‫چرا:

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

    ‫چگونه:

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

  • Optimized and updated JS libraries: medium ‫تمامی کتابخانه‌های جاوا اسکریپت که در پروژه استفاده می‌شوند باید لازم و ضروری باشند (برای عملکردهای ساده ترجیحا از جاوا اسکریپت خام استفاده کنید)؛ و به آخرین نسخه آپدیت شده باشند.

    ‫چرا:

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

    ‫چطور:

    ‫- اگر پروژه شما از پکیج‌های NPM استفاده می‌کند، npm-check یک گزینه مناسب برای بروزرسانی کتابخانه‌های مورد استفاده شماست.
    ‫- Greenkeeper می‌تواند به صورت خودکار کتابخانه‌های شما را بررسی کند و هرگاه یک بروزرسانی در دسترس بود به شما پیشنهاد دهد.

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

سرور

server-side

  • Your website is using HTTPS: high

    ‫چرا:

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

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

    ‫چرا:

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

    ‫چطور:

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

  • Page load times < 3 seconds: high تا جایی که ممکن است زمان بارگذاری صفحه را کاهش دهید تا محتوا سریع‌تر به دست کاربر برسد.

    ‫چرا:

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

    ‫چطور:

    ‫از ابزارهای آنلاین مانند Page Speed Insight یا WebPageTest جهت بررسی صفحات و این لیست کارایی فرانت‌اند جهت بهبود سرعت بارگذاری استفاده کنید.

  • Time To First Byte < 1.3 seconds: high ‫هر چقدر که می‌توانید، مدت زمانی را که مرورگر منتظر دریافت پاسخ از سمت سرور است را کاهش دهید

  • Minimizing HTTP requests: high ‫اطمینان حاصل کنید که هر فایل درخواستی برای وبسایت یا اپلیکیشن شما ضروری است.
  • Use a CDN to deliver your assets: medium ‫از CDN برای رساندن سریع محتوای خود به کاربران در سرتاسر جهان استفاده کنید

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

  • Serve reachable files: high ‫از درخواست دادن به صفحات و فایل‌های ناموجود خودداری کنید (خطای 404 را کاهش دهید)

  • Set HTTP cache headers properly: high ‫از HTTP header جهت کاهش ارسال درخواست و دریافت پاسخ بین سرور و کاربر استفاده کنید. این کار با کش کردن برخی منابع در مرورگر کاربر، بازدیدهای آینده را سریع‌تر می‌کند.
  • GZIP / Brotli compression is enabled: high ‫از یک متد فشرده سازی مانند Gzip یا Brotli جهت کاهش حجم فایل‌ها ارسالی (از سمت سرور) به کاربر استفاده کنید. هر چقدر حجم فایل‌ها کمتر باشد، کاربر آن‌ها را سریع‌تر دریافت کرده و در نتیجه سرعت و کارایی بهتر می‌شود.

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

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

Angular

React

Vue

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

WordPress

Articles

Plugins recommended

Translations

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

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].

Backers

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

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT

All icons are provided by Icons8

⬆ back to top