هدایای ویژه طراحی سایت

نحوه حذف منابع مسدودکننده رندر در وب سایت

وحید اکبری
یک نظر
بروزرسانی: ۲۴ آذر, ۱۴۰۰

اگر این مقاله را دوست دارید، لطفا آن را با دوستان خود به اشتراک بگذارید.

بررسی اجمالی

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

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

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

چگونه حذف منابع مسدودکننده رندر بر عملکرد صفحه تأثیر می‌گذارد؟

هر بار که مرورگر صفحه‌ای را بارگذاری می‌کند، کد HTML صفحه را خط به خط تجزیه می‌کند.

چگونگی رندر منابع مسدود کردن کار مرورگر — اسکریپت ها و برچسب ها در <head> HTML ابتدا قبل از ادامه مرورگر پردازش می شوند.

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

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

منابع متعدد مسدودکننده رندر می‌تواند به این معنی باشد که بازدیدکننده شما قبل از دیدن چیزی معنی‌دار در صفحه شما (مانند صفحه خالی یا خلوت) برای مدت طولانی منتظر می‌ماند.

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

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

اسکریپت‌ها و برچسب‌هایی که در ابتدای صفحه قرار می‌گیرند باید به تعویق بیافتند/به‌طور ناهمزمان بارگذاری شوند یا به طور کلی حذف شوند، زیرا هرچه بازدیدکنندگان شما سریع‌تر چیزی را در صفحه شما مشاهده کنند، عملکرد بهتری (یا در بسیاری از موارد، درک عملکرد) بهتر است.

به حداقل رساندن منابع مسدودکننده رندر، تا حد امکان، می‌تواند بارگذاری تدریجی را تسهیل کند، به First Paints (اولین رنگ) اجازه می‌دهد زودتر رخ دهد و بازدیدکنندگان شما را قادر می‌سازد تا متوجه شوند که سایت شما در حال انجام کاری است.

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

در بسیاری از موارد، بارگذاری تدریجی، بازخورد بصری ارائه می‌دهد که می‌تواند به حفظ بازدیدکنندگان در صفحه شما کمک کند.

GTmetrix چگونه این ممیزی را راه‌اندازی می‌کند؟

GTmetrix منبعی را به‌عنوان مسدودکننده رندر علامت‌گذاری می‌کند و اگر در صفحه شما با موارد زیر مواجه شود، این ممیزی را فعال می‌کند:

یک تگ <script> که در <head> سند ظاهر می‌شود و ویژگی defer یا async ندارد.
یک برچسب <link rel=”stylesheet”> که ویژگی غیرفعال یا رسانه ندارد.
یک تگ <link rel=”import”> که ویژگی async ندارد.

نحوه حذف منابع مسدودکننده رندر

در ادامه، به شما نشان خواهم داد که چگونه منابع مسدودکننده رندر را در صفحه خود به حداقل برسانید یا حذف کنید.

شناسایی منابع مسدودکننده رندر

تجزیه و تحلیل GTmetrix را اجرا کنید و ببینید صفحه شما در ممیزی «Eliminate render-blocking resources» با معنی تحت‌الفظی “حذف منابع مسدودکننده رندر” ،چگونه امتیاز می‌گیرد. شما می‌توانید این را در:

برگه خلاصه (Summary) در زیر خلاصه ساختار، به عنوان یک موضوع مهم برای بررسی.
یا
خود برگه ساختار (Structure).

ببینید و با کلیک بر روی ممیزی، منابع شناسایی شده به عنوان مسدود کردن رندر مشخص می‌شوند.

با کلیک بر روی ممیزی، منابعی که در حال مسدود کردن رندر هستند نمایش داده می شود.

برای مراحل بعدی این منابع را یادداشت کنید.

روش‌های عمومی برای حذف منابع مسدود کننده رندر

دو روش کلی برای حذف منابع مسدودکننده رندر وجود دارد که به شرح زیر است:

برچسب‌ها را به پایین منتقل کنید

همه تگ‌های <script> و <link> را به انتهای کد HTML خود منتقل کنید.

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

ویژگی‌های async یا defer را اضافه کنید

توجه: این استراتژی نیاز به دانش عمیق از عملکرد وب‌سایت‌تان دارد.

و این شامل حصول اطمینان از این می‌شود که تگ‌های <script> و <link> غیر بحرانی با ویژگی‌های async یا defer همراه هستند:

برای تگ‌های <script> و async را اضافه کنید یا به تگ موکول کنید:

<script src="/scripts/functionality.js" async></script>
<script src="/scripts/functionality.js" defer></script>

افزودن ویژگی‌های async یا defer به تگ‌های <script> می‌تواند به حذف رفتار مسدود کردن رندر کمک کند.

برای برچسب‌های <link rel=”import”> و async را به برچسب اضافه کنید:

<link rel="import" href="file.html" async>

توجه به این نکته بسیار مهم است که باید بدانید که آیا اسکریپت شما برای کار با ویژگی‌های async یا defer طراحی شده است یا خیر. اگر آنها را روی اسکریپت‌هایی که برای کار با async یا defer طراحی نشده‌اند اعمال کنید، می‌توانید وب‌سایت‌تان خود را خراب کنید.

همچنین باید توجه داشت که ویژگی‌های async و defer فقط باید برای منابع غیر بحرانی اعمال شوند، یعنی منابعی که در رندر مؤلفه‌های حیاتی صفحه شما مورد نیاز نیستند. بیشتر در این مورد در زیر …

حذف مسدود کردن رندر در شیوه‌نامه‌ها

به‌طور پیش‌فرض، همه شیوه‌نامه‌ها منابع مسدودکننده رندر در نظر می‌گیرند و استراتژی‌های متعددی برای حذف رندر مسدود کردن در شیوه‌نامه‌ها وجود دارد. در اینجا نکات کلیدی برای هر یک آمده است:

CSS را بر اساس نوع رسانه تقسیم کنید

استایل‌های خود را به شیوه‌نامه‌های جداگانه تقسیم کنید که بر اساس نوع رسانه‌ای که برای آن در نظر گرفته شده‌اند (مانند موبایل، دسک‌تاپ و غیره) دسته‌بندی می‌شوند.

ویژگی نوع رسانه مربوطه را اضافه کنید (به عنوان مثال، دستی، صفحه نمایش، و غیره – لیست کامل را در اینجا ببینید).

تقسیم کردن CSS بر اساس نوع رسانه تضمین می‌کند که مرورگر فقط شیوه‌نامه‌هایی را که با دستگاه کاربر مطابقت دارند تجزیه بکند.

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

بهینه‌سازی مسیر رندر بحرانی

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

در اصطلاح اساسی، منابعی که در ارائه اولین پیکسل‌های روی صفحه نقش داشته باشند، حیاتی تلقی می‌شوند، به عنوان مثال، HTML، CSS، و جاوا اسکریپت که ناوبری هدر یا چرخ فلک را تشکیل می‌دهند.

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

مسیر رندر بحرانی به عنوان «توالی مراحلی است که مرورگر طی می‌کند تا HTML، CSS و جاوا اسکریپت را به پیکسل‌های روی صفحه تبدیل کند».

بهینه‌سازی مسیر رندر بحرانی منجر به اولین رنگ سریع‌تر در مرورگر می‌شود. ۲ استراتژی متداول استفاده می‌شود که هر دو بر بهینه‌سازی رندر “Above-the-Fold” تمرکز دارند.

«Above-the-Fold» به قسمتی گفته می‌شود که بازدیدکننده معمولاً قبل از اسکرول کردن به پایین برای دیدن بقیه محتوا در یک وب‌سایت می‌بیند. ۲ استراتژی مورد استفاده در اینجا عبارتند از:

ترکیب فایل‌های CSS

چندین فایل CSS را در یک فایل (یا دو فایل، بسته به حجم CSS شما) ترکیب کنید زیرا هر فایل CSS اضافی که توسط صفحه شما استفاده می‌شود زمان بارگذاری صفحه را افزایش می‌دهد.

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

داخل (Inlining) فایل‌های CSS

این روش دیگری برای کاهش تعداد کل فایل‌های CSS است.

Inlining به تمرین اضافه کردن کد CSS و/یا جاوا اسکریپت مستقیماً به فایل HTML شما اشاره دارد، در مقابل پیوند دادن به فایل‌های CSS/JavaScript جداگانه.

سپس مرورگر این موارد را فوراً می‌خواند و اجرا می‌کند و از ارائه بهینه عناصر مورد نظر اطمینان حاصل می کند.

کد داخلی به این معنی است که کد CSS/JavaScript مستقیماً در HTML صفحه جاسازی شده است و اجرای فوری را تضمین می کند. مثال از گوگل

همان‌طور که قبلا ذکر شد، بهینه‌سازی مسیر رندر بحرانی یک استراتژی پیشرفته است و نیاز به درک رفتار رندر وب‌سایت شما دارد.

فشرده‌سازی و کوچک کردن منابع مبتنی بر متن

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

چگونه فشرده‌سازی متن را فعال کنیم؟

برای فعال کردن فشرده‌سازی متن، بسته به سرور وب که برای ارائه منابع متنی شما استفاده می‌شود، دستورالعمل‌های زیر را دنبال کنید:

۱) برای سرورهای آپاچی

کد زیر را کپی کرده و در فایل htaccess خود قرار دهید:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

۲) برای سرورهای دیگر

راهنماهای زیر را بخوانید تا یاد بگیرید چگونه فشرده سازی متن را در انواع دیگر سرورها فعال کنید:

NGINX
مایکروسافت IIS

۳) برای کاربران وردپرس (یا سایر CMS)

برای کاربران وردپرس، ساده‌ترین راه برای فعال کردن فشرده‌سازی Gzip استفاده از یک افزونه کش است که از فعال کردن Gzip پشتیبانی می‌کند.

توجه داشته باشید که برخی از افزونه‌ها ممکن است برای تغییر فایل‌ها در وب سرور شما به مجوزها متکی باشند. اگر افزونه کش شما مجوز ندارد، بسته به سروری که استفاده می کنید، از هاست خود بپرسید یا از یکی از روش های ذکر شده استفاده کنید.

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

برای وردپرس (یا سایر کاربران CMS)

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

این افزونه‌ها از طریق تگ‌های <script> و/یا <link> صفحه شما عبور می‌کنند و ویژگی‌های defer یا async مناسب را اعمال می‌کنند.

البته در ازای هر افزونه یا اکستنشنی که تغییرات را به صورت خودکار در فایل‌های وب‌سایت شما اعمال می‌کند، باید آزمایش کنید و مطمئن شوید که عملکرد سایت دست نخورده است.

همچنین ممکن است لازم باشد نحوه مدیریت پلاگین یا برنامه افزودنی با منابع فردی را با توجه به افزودن برچسب‌های defer یا async، مخصوصاً با منابع رندر حیاتی، سفارشی کنید.

خلاصه

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

با بررسی «حذف ممیزی منابع مسدودکننده رندر» در گزارش GTmetrix، می‌توانید بفهمید کدام منابع به عنوان مسدودکننده رندر در نظر گرفته می‌شوند.