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

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

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

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

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

راهنما:

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

HTML

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

چرا؟

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

ابزارهای کمکی:
Remove unnecessary comments:

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

وجود برخی از ویژگی‌ها دیگر اجباری نیست مثل type که به صورت‌های type=”text/javascript” یا type=”text/css” . می‌توان آنها را حذف کرد.
CSS tags always before JavaScript tags:
Minimize the number of iframes:

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

CSS

• Minification:

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

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

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

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

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

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

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

ابزارهای کمکی:
Embedded or inline CSS:

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

تحلیل 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

Webfont formats:

از فرمت وب فونت WOFF2 در صفحات وب پروژه‌تان استفاده می‌کنید. دقت کنید که فونتی که در پروژه استفاده خواهید کرد این فرمت را داشته باشد.
Use “preconnect” to load fonts faster:

داخل تگ لینک حتما دو ویژگی rel=”preconnect” و crossorigin را اضافه کنید. وقتی وارد یک سایت می‌وید، دستگاه شما باید پیدا کند که به چه سروری در کجا باید وصل شود. مرورگر باید به dns سرور وصل شود و تا جستجو و لود کامل assetها صبر کند. Preconnect به مرورگر اجازه می‌دهد تا با اتصال TCP به سرور فونت وصلی شود که این امر سرعت را بالا می‌برد.

لینک‌های کمکی:
Webfont size:

مجموع اندازه فایل‌های فونت نباید بیشتر از 300kb شود.
Prevent Invisible Text:

از استفاده از نوشته‌های بی‌رنگ (transparent) قبل از لود فونت خودداری کنید.

Images

Images optimization:

بهینه و optimize کردن تصاویر باعث لود سریعتر سایت می‌شود البته این امر مفید است تا جاییکه به نمایش سایت ارائه شده به بیننده صدمه نزند. تا حد ممکن از افکت‌های CSS3 استفاده کنید. در صورت امکان فونت را جایگزین تصاویر کنید مثل آیکون‌ها. تصاویر SVG استفاده کنید.
Images format:

هوشمندانه فرمت هر یک از تصاویر را انتخاب کنید، با توجه به نیازتان.

لینک‌های کمکی:
Use vector image vs raster/bitmap:

تصاویر وکتوری و برداری مثل SVG سبک‌تر، واکنشگرا (responsive) و مقیاس‌پذیرند. تا حد امکان ازین تصاویر استفاده کنید.
Avoid using Base64 images:

قاعدتا می‌توانید تصاویر کوچک را به BASE64 تبدیل کنید ولی در واقع بهترین راه نیست. تصاویر BASE64 کارایی نسبتا خوبی ندارند.

لینک‌های کمکی:
Lazy loading:

لود تصاویر به صورت lazy load باعث افزایش سرعت پاسخگویی (response time) سمت کاربر می‌شود که روش‌ها و پلاگین‌های متعددی برای آن وجود دارد.
Responsive images:

در صورت امکان می توانید با استفاده از ویژگی‌های srcset و picture در تگ عکس‌ها، سایزهای مختلفی از تصاویر را ارائه کنید.

JavaScript

JS Minification:

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

ابزارهای کمکی:
No JavaScript inside:

از قرار دادن جاوااسکریپت وسط کد خودداری کنید. کد js خود را در یکی از فایلهای خارجی یا در تگ head یا در انتهای body یعنی درست قبل از بسته شدن تگ body قرار دهید.

قرار دادن کد js وسط body، سرعت لود صفحه را پایین می‌آورد زیرا بعد ساخته شدن DOM اجرا می‌شود. بهترین راه قرار دادن در یک فایل خارجی به صورت async یا defer است.
Non-blocking JavaScript:

برای این منظور یکی از دو ویژگی async یا defer را به تک script اضافه کنید.
Check dependencies size limit:

از کتابخانه‌های خارجی هوشمندانه استفاده کنید و بهینه‌ترین پکیج را با توجه نیازتان انتخاب کنید
JavaScript Profiling:

بهینه بودن کدهای جاوااسکریپت‌تان را بررسی کنیدو کدهای پیچیده سرعت اجرا را کم می‌کند.

لینک‌های کمکی:
Use of Service Workers:

Server

Use HTTPS:
Page weight < 1500 KB:

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

ابزارهای کمکی:
Page load times > 3 seconds:

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

ابزارهای کمکی:
Time to first Byte < 1.3 seconds:

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

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

همیشه ازین بابت مطمئن شوید که هر کدام از درخواست‌های ارسال شده به سورو برای وبسایت شماست تا حد ممکن تعداد این درخواست‌ها را کاهش دهید.
Serve files from the same protocol:

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

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