چک لیست سرعت و کارایی Front-End

۲۷ اسفند ، ۱۳۹۷

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

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

برای هر مورد توضیح داده شده است. لازم به ذکر است که این موارد برای رسیدن به بهترین کارایی می باشند و از الویت‌های مختلفی برخودارند، به این منظور با توجه به اهمیت آنها به سه دسته کم،معمولی و زیاد تقسیم شده‌اند.

 

راهنما:

  • موارد کم اهمیت به صورت زیر نشانه گذاری شده است.

    Low
  • مواردی با اهمیت معمولی

    Medium
  • موارد پر اهمیت

    High

 

HTML

  • Minified HTML: medium کد HTML خلاصه و کوچک می‌شوند، کامنت‌ها، فاصله‌ها، خط جدید در فایل آماده راه‌اندازی حذف می‌شوند.

    چرا؟

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

    ابزارهای کمکی:

  • Remove unnecessary comments:low

    مطمئن شوید که تمام کامنت‌های غیر ضروری پاک شده‌اند.

  • Remove unnecessary attributes:low

    وجود برخی از ویژگی‌ها دیگر اجباری نیست مثل type که به صورت‌های type=”text/javascript” یا type=”text/css” . می‌توان آنها را حذف کرد.

  • CSS tags always before JavaScript tags:high

  • Minimize the number of iframes:high

    از iframe فقط زمانی که هیچ چاره‌ی دیگری ندارید استفاده کنید و تا حد ممکن تعداد آنها را در پروژه‌تان کاهش دهید.

 

CSS

  • • Minification:high

    ابزارهای کمکی:

  • • Concatenation:medium

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

  • • Non-Blocking:high

    فایل‌های css می‌توانند لود صفحه را تا لود شدن خودشان مسدود کنند پس این فایل‌ها لازم است که مسدود نشده باشند تا از زمان بارگذاری DOM جلوگیری شود.

    برای این منظور دو ویژگی rel=”preload” و as=”style” به تگ اضافه می‌کنیم.

  • • Length of CSS classes:low

    اندازه‌ی طول کلاس‌ها می تواند روی فایل‌های css و html تاثیرگذار باشد. ممکن است قاعده نام‌گذاری پیروی شده بین تیم توسعه‌دهنده‌ها به صورتی باشد که کاراکترهای غیرضروری زیادی را شامل شوند، پس در قاعده‌گذاری نام‌گذاری کلاس‌ها حداکثر تعداد کاراکتر نیز در نظر بگیرید.

  • • Unused CSS:medium

    سلکتورهای استفاده نشده را حذف کنید تا حجم اضافی از فایل‌تان را نگیرند.

  • • CSS Critical:high

    استایل در مواقع بحرانی با استفاده از تگ style بالای هدف و ترجیحا به صورت تک خط. CSS Critical به سرعت رندر صفحات وب و کاهش درخواست‌های ارسالی به سرور کمک می‌کند. برای ایجاد آن از ابزارهای آنلاین یا پلاگین‌ها استفاده کنید.

    ابزارهای کمکی:

  • Embedded or inline CSS:high

    از نوشتن استایل داخل تگ body خودداری کنید. یکی از دلایل آن تمرین برای جداکردن کلی محتوا از دیزاین است. همچنین به نگهداری کد کمک می‌کند. در نهایت در حجم فایل و سرعت سایت تاثیرگذار بوده.

  • Analyze stylesheet complexity:high

    تحلیل css به شما کمک می‌کند تا جلوی افزوندگی و تکرار سلکتورها را بگیرید.

    ابزارهای کمکی:

 

Fonts

 

Images

 

JavaScript

 

Server

  • Use HTTPS:medium

  • Page weight < 1500 KB:medium

    تا حدامکان از سایر و حجم هر صفحه+منابع و المانها، کم کنید.

    ابزارهای کمکی:

  • Page load times > 3 seconds:medium

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

    ابزارهای کمکی:

  • Time to first Byte < 1.3 seconds:medium

    زمان انتظار مرورگر تا رسیدن به بایت سایت را کاهش دهید.

  • Cookie size:medium

    اگر از کوکی استفاده می‌کنید، مطمئن شوید که سایز هر کوکی بیشتر از 4096byte نشود. همچنین اسم دامنه‌تان بیشتر از ۲۰ کاراکتر نباشد.

  • Minimizing HTTP requests:high

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

  • Serve files from the same protocol:high

    وبسایت‌تان از هرکدام از پروتکل‌های HTTP و HTTPS استفاده می‌کند، فایل‌ها را نیز از همان پروتکل بگیرید.

  • Serve reachable files:high

    فایل‌های در دسترس را استفاده کنید و از بروز 404 جلوگیری کنید.

 

ابزارهای مناسب سنجش کارایی (Preformance tools)

 

 


میانگین آرا:
95% (4 نفر)
رای دهید:
مقالات مرتبط
مشاهده بیشتر...