خواندن ۶ دقیقه·۲ سال پیش

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

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

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

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

مسدود کننده رند یا Eliminate render-blocking چیست؟

اگر شما در سرویسهایی مانند Google's PageSpeed سرعت وب‌سایت خود را تست کنید میتوانید معیار Eliminate render-blocking resources را در لیست معیارهای سنجش سرعت سایت خود ببینید. کنترل منابع مسدودکننده رندر (به عبارتی منابع کاهش‌دهنده سرعت رندر وب‌سایت) میتواند به افزایش سرعت وب‌سایت کمک کند.

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

عبارت Render blocking به معنای مواردی همچون تگ script و link است، که تا وقتی هنوز به طورکامل بارگیری نشده‌اند، فرایند رندر صفحات را متوقف میکنند. و نتیجه آن هم تاخیر نمایس (افزایش زمان) نمایش محتوا به کاربر است. به مثال زیر دقت کنید :

<!-- other <head> stuff --> 

<!-- conventional render blocking CSS & JavaScript references --> 
<link rel='stylesheet' href='styles.css'> 
<script src='scripts.js'> </head>

در این مثال ابتدا باید فایلهای styles.css و scripts.js بارگیری شوند، سپس ادامه پردازش برای نمایش محتوا انجام شود.

مفهوم Eliminating render blocking resources به معنای کنترل این منابع خارجی (فایلهای جاوااسکریپت و css ) برای کاهش تاخیر نمایش محتوا به کاربران است.

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

بارگیری با اولویت مناسب

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

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

تعیین اینکه کدام منابع ضروری یا حیاتی (critical) هستند کاملا به محتوای هر صفحه بستگی دارد. مثلا اگر در بلاگ یک اسلایدر هم وجود دارد، کدهای جاوااسکریپت این اسلایدر ضروری نیستند یا اصطلاحا non-critical می‌باشند. روش مناسب این است که ابتدا محتوای مقاله به کاربر نمایش داده شود، سپس کدهای جاوااسکریپت بارگیری شوند و روی اسلایدر اعمال شوند. برای فایلهای css هم میتوان اولویت‌بندی تعیین کرد.

فایلهای css

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

در این استراتژی استایلهای حیاتی css در ابتدا بارگیری و روی صفحه اعمال می‌شوند. این استایلها یا درون تگ style تعریف شده‌اند یا اگر در فایل خارجی هستند، حجم مناسبی (کمتر از 10kb) دارند. استایلهای غیرحیاتی بعد از بارگیری صفحه، در پس زمینه بارگیری میشوند و سپس روی صفحه اعمال می‌شوند. به این تکنیک اصطلاحا asynchronous CSS میگوئیم. در این بخش یک مثال از استایلهای حیاتی و غیرحیاتی آمده است :

<!-- other <head> stuff --> 

<!-- very small file for critical CSS (or optionally inlined with a <style> block) -->
<link rel='stylesheet' href='critical.css'>  <!-- under ~10KB -->

<!-- async non-critical CSS -->
<link rel='stylesheet' media='print' ='this.=null;this.removeAttribute('media');' href='non-critical.css'>  
<!-- no-JS fallback for non-critical CSS -->

<noscript>
   <link rel='stylesheet' href='non-critical.css'> 
</noscript>  

</head>

استایلهای حیاتی : همه استایلهای ضروری که برای اینکه کاربر با یک صفحه ناخوشایند روبرو نشود به شیوه عادی به صفحه خود لینک میکنیم. این استایل باید تا حدامکان حجم آن کاهش یابد تا تاخیری در نمایش محتوا بوجود نیاید :

<!-- other <head> stuff -->
 <link rel='stylesheet' href='critical.min.css'> <!-- under ~10KB --> 

</head>

همچنین این فایل باید کوچک شده یا اصطلاحا minified باشد.

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

<!-- other <head> stuff --> 

<style>.main-menu{...}.main-menu a{...}/*-- etc --*/</style> 

</head>

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

استایلهای غیر ضروری : استایلهای غیر ضروری در ابتدای بارگیری، بارگیری نمی‌شوند بلکه پس از نمایش اولیه محتوا بارگیری شده و به کاربر نمایش داده می‌شوند. برای این عمل، روشهای مختلفی وجود دارد. یکی از روش‌های توصیه شده استفاده از ویژگی media در تگ لینک است :

<!-- other <head> stuff including critical CSS --> 

<!-- optionally increase loading priority --> 
<link rel='preload' as='style' href='non-critical.css'> 
<link rel='stylesheet' media='print' ='this.=null;this.removeAttribute('media');' href='non-critical.css'> 

<!-- no-JS fallback -->
<noscript>
     <link rel='stylesheet' href='non-critical.css'>
</noscript>  

</head>

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

یک روش دیگری که برای جلوگیری از اتلاف وقت می‌توانیم انجام دهیم استفاده از شرط برای ویژگی media است. مثلا در این مورد اگر حداقل سایز عرض صفحه 60em باشد، فایلهای css بارگیری می‌شوند.

<link rel='stylesheet' href='critical-general.css'>
<link rel='stylesheet' media='(min-width:60em); href='critical-large.css'>

همچنین در روش دیگر میتوان فایلهای css را پایین تگ body اضافه کرد.

<!-- other <head> stuff --> 
<link rel='stylesheet' href='critical.css'> 
</head>  
<body>     

<!-- page content --> 
<link rel='stylesheet' href='non-critical.css'> 
</body>

جاوااسکریپت :

از ویژگی defer برای تگهای script میتوانیم، کمک بگیریم تا سرعت رندر صفحه خود را افزایش دهیم. با استفاده از ویژگی فایل جاوااسکریپت بعد از load صفحه، در پس زمینه بارگیری و سپس اجرا می‌شود :

<!-- other <head> stuff --> 

<script defer src='sitewide.js'> 
<script defer src='jquery.min.js'> 
<script defer src='page-specific.js'> 

</head>

البته از ویژگی async هم میتوان استفاده کرد، اما این دو از قاعده متفاوتی استفاده میکنند.

ویژگی async : پس از بارگیری کامل فایل script اجرا می‌شوند.

ویژگی defer : پس از بارگیری کامل صفحه اجرا میشوند.

به عبارتی اولویت با async است.

جاوااسکریپت داخلی : بهتر است بدانیم اسکریپت داخلی کش نمیشود، پس بهتر است آنرا به یک یا چند فایل خارجی منتقل کنیم. برای اسریکتهای داخلی نمیتوانیم از ویژگی defer و async استفاده کنیم. در مثال زیر، برای اینکه اسکریپت داخلی پس از اسکریپت خارجی با ویژگی defer اجرا میشود از یک event listener بنام DOMContentLoaded استفاده میکنیم:

<!-- other <head> stuff --> 
<script defer src='scripts.js'> 
<script defer src='jquery.min.js'>  

</head> 
<body>     
<!-- page content --> 
 
   document.addEventListener('DOMContentLoaded', function(){ 
      // more jQuery-dependent stuff 
   }); 
 

</body>

defer سرعت سایت render blocking افزایش سرعت سایت برنامه نویسی وب

عباس باقری

برنامه نویس و طراح وب‌سایت

شاید از این پست‌ها خوشتان بیاید