رفع مشکل "Eliminate Render-Blocking Resources" در وردپرس
پرینت این مقاله
اگر سایت وردپرس خود را از طریق Google PageSpeed Insights آنالیز کرده اید، احتمالاً Google به شما گفته است که باید render-blocking مربوط به جاوا اسکریپت و CSS را در سایت وردپرسی خود حذف کنید. در حقیقت، شاید به همین دلیل است که هم اکنون در حال مطالعه این مقاله هستید.
در تصویر زیر کاملا مشخص است که render-blocking باعث شده سایت با تاخیر لود شود.
تصویر(1)
احتمالاً هم اکنون دو سوال در ذهن شما ایجاد شده است:
-
در وهله اول render-blocking چیست؟
-
چگونه می توانید render-blocking را در وردپرس از بین ببرید؟
در این پست، به هر دو سوال مطرح شده پاسخ داده می شود.
منظور از "Eliminate Render-Blocking Resources" چیست؟
برای اینکه بدانید Render-Blocking Resources چیست و چرا به زمان بارگذاری سایت شما آسیب می رساند، می بایست نحوه رندر یک صفحه وب توسط مرورگر را بررسی کنید.
وقتی یک بازدید کننده بر روی سایت شما قرار می گیرد، مرورگر کاربر در اصل از هدر سایت کدهای سایت را رندر می کند تا خوانده شود.
اگر در آن فرآیند، با یک پرونده CSS یا JavaScript روبرو شود، باید "خواندن" را متوقف و سپس دانلود و پردازش کند. مرورگر برای بارگیری و تجزیه و تحلیل این منابع به صورت "paused" (متوقف می شود) در می آید و باعث می شود سرعت لود سایت شما افزایش یابد.
در ادامه مثالی در این خصوص ذکر شده است. فرض کنید یک افکت جذاب را با JavaScript در فوتر سایت قرار داده اید و این صفحه نیز توسط "coolfooter.js" طراحی شده است، اسکریپتی که در بالای کد سایت شما به آن ارجاع می شود (حتی اگر این افکت در فوتر سایت باشد، بازدیدکنندگان تا وقتی که به فوتر سایت اسکرول نکنند، قادر به مشاهده آن نیستند).
بنابراین نحوه اجرا و رندر سایت شما در مرورگر کاربر به صورت زیر خواهد بود:
-
متا سربرگ
-
Coolfooter.js
-
HTML مربوط به above-the-fold (اولین بخشی از صفحه است که کاربر بدون نیاز به اسکرول کردن می بیند).
در زیر دلیل این مسئله ذکر شده است:
وقتی بازدید کننده ای به سایت شما مراجعه می کند، مرورگر کاربر شروع به خواندن کدهای سایت از بالا به پایین می کند. بنابراین قبل از اینکه بتواند کدهای HTML را در سایت تجزیه و ارائه کند، باید منتظر بارگیری و تجزیه فایل coolfooter.js باشید.
نتیجه نهایی؟ رندر کدهای HTML به زمان زیادی نیاز خواهد داشت و سایت برای بازدیدکنندگان به کندی باز می شود.
هنگامی که Google به شما می گوید مشکل Render-Blocking را در سایت رفع کنید، در اصل می گوید، "منابع غیر ضروری را در بالای سایت خود بار نکنید زیرا زمان بارگیری قسمت های قابل مشاهده مانند کدهای HTML طولانی تر می شود.
Render-Blocking Resources چیست؟
هنگامی که صحبت از render-blocking می شود، معمولاً در مورد CSS و JavaScript بحث هایی مطرح می گردد. ذکر این مورد مهم است که همه پرونده های CSS و JavaScript به صورت render-blocking نیستند.
آیا تصاویر نیز از Render-Blocking Resources استفاده می کنند؟
خیر، تصاویر render-blocking نیستند. بهینه سازی تصاویر برای کاهش اندازه پرونده آنها مهم است اما لازم نیست نگران بهینه سازی مسیر تحویل تصاویر خود باشید.
چگونه می توان بررسی کرد که آیا وب سایت دارای Render-Blocking است یا خیر؟
برای بررسی اینکه آیا سایت وردپرسی شما در حال حاضر دارای render-blocking است یا خیر، می توانید از Google PageSpeed Insights استفاده کنید.
تمام کاری که شما انجام می دهید این است که URL را وارد کرده و آنالیز سایت را شروع کنید. اگر سایت شما در زمینه render-blocking منابع مشکلی داشته باشد، PageSpeed Insights هر یک از منابع را در بخش Eliminate render-blocking resources در لیست Opportunities نمایش می دهد:
تصویر(2)
چگونه منابع Eliminate Render-Blocking را حذف کنید؟
نگران نباشید، شما مجبور نیستید این کار را به صورت دستی انجام دهید. در این مقاله پلاگین های وردپرسی معرفی می شوند که می توانند به شما در حذف منابع render-blocking کمک کنند.
با این حال بهتر است بدانید که این پلاگین ها در بک گراند برای از بین بردن render-blocking چه کاری انجام می دهند.
چگونگی حذف Render-Blocking برای کدهای JavaScript
چند استراتژی مختلف برای از بین بردن render-blocking جاوا اسکریپت وجود دارد. روش های اصلی که می توانید از آنها استفاده کنید:
Async - به تجزیه کننده HTML (به عنوان مثال مرورگر بازدید کننده) اجازه می دهد تا در کنار بارگیری JavaScript سایر کدها مانند HTML را نیز تجزیه کند. یعنی هنگام بارگیری فایل JavaScript، رندر کاملاً متوقف نمی شود. با این حال، تجزیه کننده HTML مکث خواهد کرد تا اسکریپت را بارگیری کند.
Defer - با استفاده از دستور defer به مرورگر اعلام می کنید که فایل های js را در آخرین مرحله بارگذاری وب سایت لود کند.
تصویر زیر تفاوت JavaScript async و defer را نشان می دهد:
تصویر(3)
فایده استفاده از defer این است که تضمین می کند اسکریپت های شما به ترتیب نمایش داده شوند.
Async از این روش استفاده نمی کند، در برخی موارد اگر async را بر روی همه منابع جاوا اسکریپت اعمال کنید، ممکن است مشکلاتی را ایجاد کند.
چگونگی حذف Render-Blocking برای کدهای CSS
حذف render-blocking برای CSS می تواند کمی پیچیده تر باشد زیرا شما باید مراقب باشید CSS مورد نیاز برای above-the-fold را به تأخیر نیندازید.
استایل هایی را که برای above-the-fold مورد نیاز است شناسایی کنید و آن استایل های inline را با HTML متناسب تحویل دهید.
چگونه می توان منابع CSS و JavaScript را که Render-Blocking هستند با پلاگین های وردپرس حذف کرد؟
برای نشان دادن چگونگی از بین بردن Render-Blocking در وردپرس، یک سایت آزمایشی ساده ایجاد شده است که شامل CSS و جاوا اسکریپت Render-Blocking است.
پلاگین های مورد استفاده در این آموزش:
-
Autoptimize + Async JavaScript (رایگان)
-
WP Rocket (پولی)
نکته: کاربرانی که در میهن وب هاست دارای سرویس هاست هستند می توانید از لینک زیر افزونه WP Rocket را به صورت رایگان دانلود نمایند.
قبل از بهینه سازی پردازش CSS و JavaScript، سایت تست به این صورت می باشد:
تصویر(4)
چگونه می توان Render-Blocking را با استفاده از Autoptimize + Async JavaScript Plugin حذف کرد؟
Autoptimize و Async JavaScript دو افزونه رایگان مجزا از یک توسعه دهنده هستند. این دو افزونه به شما کمک می کنند تا تحویل CSS و JavaScript خود را بهینه کنید.
پس از نصب هر دو افزونه، به تنظیمات و سپس "Async JavaScript" بروید:
تصویر(5)
برای فعال کردن Async JavaScript، در بالای صفحه "Enable Async JavaScript?" (شماره1) را فعال نمایید.
در کادر "Quick Settings" گزینه های "Apply Async و Apply Defer" (شماره2) را انتخاب کنید.
تصویر(6)
اگر گزینه Async در سایت شما مشکلی ایجاد می کند، توصیه می شود جی کوئری را به تعویق بیاندازید یا آن را حذف کنید، که این افزونه گزینه ای را برای انجام اینکار فراهم می کند.
پس از نصب افزونه Async JavaScript به تنظیمات و سپس "Autoptimize" بروید:
تصویر(7)
برای بهینه سازی کد های JavaScript و CSS به ترتیب کادرهای مشخص شده را فعال کنید.
تصویر(8)
اگر کاربر حرفه ای هستید، می توانید با سایر تنظیمات بهینه سازی JavaScript و CSS نیز کار کنید، اما اکثر سایت ها با تنظیمات پیش فرض نیز مشکلشان رفع می شود.
پس از پیکربندی Autoptimize و Async JavaScript، با بررسی مجدد سایت تست از طریق PageSpeed Insights مشخص شد مشکل Render-Blocking برای JavaScript و CSS رفع شده است.
تصویر(9)
اگر تمایل دارید تعداد بیشتری از پرونده ها را بررسی کنید، می توانید از Autoptimize برای دسترسی به CSS های مهم سایت استفاده کنید. اگرچه این کار به دانش برنامه نویسی و توسعه نیاز دارد، بنابراین پیشنهاد نمی شود افراد غیر حرفه ای آن را انجام دهند.
در صورت تمایل می توانید از پلاگین ها نیز به صورت جداگانه استفاده کنید. اما با توجه به اینکه هر دو افزونه توسط یک توسعه دهنده ارائه شده اند و با یکدیگر سازگار هستند، بهترین روش برای اکثر سایت ها بکارگیری ترکیبی از هر دو افزونه می باشد.
چگونه می توان Render-Blocking را با استفاده از WP Rocket حذف کرد؟
WP Rocket یک افزونه محبوب و پریمیوم وردپرسی جهت بهینه سازی و کش سایت است.
پس از نصب و فعال سازی WP Rocket، به زبانه File Optimization بروید. سپس، این دو گزینه را فعال کنید:
"Optimize CSS delivery" (شماره1) را در بخش "CSS Files" فعال کنید.
"Load JavaScript deferred" (شماره2) را در بخش "JavaScript files" فعال نمایید.
تصویر(10)
هم اکنون مشکل رفع شده است.
