در حالی که ظاهر یک وب‌سایت اهمیت دارد، آنچه کاربران را به بازدید مجدد ترغیب می‌کند، محتوای ارزشمند و سرعت بارگذاری بالا است. وردپرس مجموعه‌ای از افزونه‌ها و قالب‌های پیشرفته را در اختیار کاربران قرار می‌دهد تا بتوانند وب‌سایت‌های سفارشی خود را به سرعت طراحی کنند. جهت افزایش سرعت سایت می بایست نسبت به رفع مشکل Render-Blocking JavaScript و CSS اقدام نمایید.
قالب‌ها و افزونه‌ها برای عملکرد صحیح به JavaScript (JS) و Cascading Style Sheets (CSS) نیاز دارند. وردپرس به صورت خودکار این فایل‌های اسکریپت را ایجاد می‌کند اما در بسیاری از موارد، این فایل‌ها بهینه‌سازی نشده‌اند و می‌توانند سرعت وب‌سایت را به شدت کاهش دهند. این موضوع برای کاربران ناخوشایند است. بنابراین، در این مقاله بررسی می‌شود که چگونه می‌توان مشکل Eliminate render-blocking resources را شناسایی و رفع کرد تا باعث افزایش سرعت سایت وردپرسی شود.
تصویر(۱)
اسکریپت‌های Render-Blocking فایل های JS و CSS چیست و چرا مشکل‌ساز هستند؟
بیشتر صفحات وب از سه بخش اصلی تشکیل شده‌اند که شامل JavaScript، CSS و HTML می شود. در این میان، HTML ساختار پایه را ایجاد می‌کند و JS و CSS درون آن قرار می‌گیرند. امروزه رایج‌ترین روش این است که به جای درج مستقیم کدها، از فایل‌های خارجی برای این اسکریپت‌ها استفاده شود.
این اسکریپت‌ها در یک صف قرار می‌گیرند و مرورگر برای پردازش صفحه وب، آنها را اجرا می‌کند. ساده‌ترین راه برای مشاهده اسکریپت‌های یک صفحه وب، بدون بررسی کد منبع، این است که آن را از طریق مرورگر ذخیره کنید (استفاده از کلیدهای ترکیبی ctrl+s). در این صورت، مرورگر فایل HTML را همراه با پوشه‌ای حاوی اسکریپت‌ها، تصاویر و سایر منابع، دانلود می‌کند.
هرچه تعداد اسکریپت‌های پیچیده موجود در این صف بیشتر باشد، زمان بیشتری برای بارگذاری صفحه نیاز خواهد بود. معمولاً مرورگرها برخی از منابع صفحه مانند اسکریپت‌ها و تصاویر را در حافظه کش ذخیره می‌کنند تا دفعات بعدی سریع‌تر بارگذاری شوند. در حالی که کاربران می‌توانند با غیرفعال کردن JavaScript، افزایش حجم کش یا استفاده از افزونه‌هایی مانند AdBlock، سرعت بارگذاری صفحات را بهبود دهند اما راه‌حل ایده‌آلی نیست زیرا وظیفه اصلی بهینه‌سازی بر عهده توسعه‌دهنده است.
چگونه می توان مشکل Render-Blocking را شناسایی و اصلاح کرد؟
پیش از تصمیم‌گیری درباره حذف یا بهینه‌سازی اسکریپت‌ها، ابتدا باید سرعت وب‌سایت یا صفحه موردنظر را بررسی کنید. ابزارهای آنلاین مانند GTmetrix یا Google PageSpeed Insights این امکان را فراهم می‌کنند. کافی است آدرس صفحه را وارد کنید تا این ابزارها امتیاز سرعت و سایر تحلیل‌های مرتبط را ارائه دهند.
این ابزارها پیشنهاداتی برای بهینه‌سازی سایت ارائه می‌نمایند، مثلاً ممکن است توصیه کنند که تعداد عناصر موجود در صفحه را کاهش دهید یا CSS و JavaScript های بلااستفاده را حذف کنید. GTmetrix حتی مشخص می‌کند که کدام اسکریپت‌ها نیاز به بهینه‌سازی دارند.
تصویر(۲)
علاوه بر این، می‌توانید از تب Coverage در Chrome DevTools استفاده نمایید تا میزان استفاده از اسکریپت‌های سایت را مشاهده کنید. پس از شناسایی اسکریپت‌های غیربهینه، چند راه‌حل برای اصلاح آنها وجود خواهد داشت. البته، اجرای این مراحل نیاز به دانش کدنویسی دارد و حداقل باید با اصول برنامه‌نویسی جاوا اسکریپت آشنا باشید.
با این حال، اگر همچنان قصد دارید سرعت بارگذاری صفحات وب سایت خود را بهبود دهید، در ادامه انواع روش های رفع خطای Render-Blocking نمایش صفحه و افزایش سرعت سایت معرفی شده است.
۱. بهینه‌سازی ترتیب بارگذاری
اولین روش جهت رفع مشکل Render-Blocking، بهینه‌سازی ترتیب بارگذاری است. بخش <head> در صفحات وب برای پیش‌بارگذاری المان‌های ضروری استفاده می‌شود. بهتر است پایه و اساس صفحه وب در این قسمت قرار گیرد تا هنگام بارگذاری، کاربر با صفحه‌ای خالی روبرو نشود. در این بخش استفاده از CSS داخلی مشکلی ندارد اما قرار دادن جاوا اسکریپت توصیه نمی‌شود.
پس از بهینه‌سازی بخش <head>، نوبت به بخش <body> می‌رسد. اکثر مرورگرهای وب صفحات را از بالا به پایین پردازش می‌کنند. بنابراین، ترتیب اجرای اسکریپت‌ها باید بر اساس میزان اهمیت و پیچیدگی آنها تنظیم شود. بهتر است اسکریپت‌هایی که برای نمایش صفحه ضروری نیستند، در انتهای صفحه و همراه با کدهای پیچیده‌تر قرار بگیرند تا بارگذاری صفحه سریع‌تر انجام شود.
۲. فشرده‌سازی کد
فشرده سازی کد روش دیگری برای رفع مشکل Render-Blocking می باشد. فشرده‌سازی (Minify) شامل بازنویسی و حذف کاراکترهای غیرضروری مانند فاصله‌های خالی، کامنت‌ها، کاماها و خط ها می شود که موجب کاهش حجم اسکریپت‌ها و در نتیجه افزایش سرعت سایت می‌گردد.
ابزارهایی مانند W3 Total Cache (W3TC) دارای ماژول‌هایی برای فشرده‌سازی جاوا اسکریپت و CSS در قالب‌های سایت هستند. همچنین می‌توان از ابزارهای آنلاین رایگانی مانند JavaScript Minifier برای فشرده‌سازی دستی کدها و رفع مشکل Render-Blocking استفاده کرد.
تصویر(۳)
۳. استفاده از بارگذاری با تاخیر (defer) و غیرهمزمان (async) برای جاوا اسکریپت
مرورگرها هنگام پردازش صفحات وب، کدها را از بالا به پایین می‌خوانند. از همین رو اگر در حین بارگذاری صفحه با یک تگ اسکریپت مواجه شوند، بارگذاری صفحه متوقف شده و اجرای اسکریپت آغاز می‌گردد که این فرآیند می‌تواند باعث کندی در بارگذاری صفحه شود.
برای رفع مشکل Render-Blocking JavaScript می‌توان از ویژگی async استفاده کرد. این ویژگی باعث می‌شود اسکریپت به صورت موازی با صفحه، بارگذاری شده و پس از آماده شدن اجرا گردد. گزینه دیگر، استفاده از ویژگی defer است. این ویژگی نیز اسکریپت را به صورت موازی بارگذاری می‌کند اما اجرای آن را تا زمانی که کل صفحه پردازش شود، به تاخیر می‌اندازد.
با تمام تفاسیر، توصیه می‌گردد از این ویژگی‌ها برای اسکریپت‌هایی که وظیفه پردازش و نمایش المان‌های بصری صفحه را بر عهده دارند، استفاده نشود. معادل این ویژگی‌ها در جاوا اسکریپت، کلیدواژه‌های async و await هستند. توسط این قابلیت‌ها، می‌توان جاوا اسکریپت را بدون اینکه نیازی به تغییر تگ‌های HTML باشد، به صورت غیرهمزمان بارگذاری نمود.
۴. جایگزینی المان‌های بصری جاوا اسکریپت با CSS3
روش چهارم برای رفع مشکل Render-Blocking، جایگزینی المان‌های بصری جاوا اسکریپت با CSS3 است. در گذشته، قابلیت‌های CSS بسیار محدودتر از امروز بودند. به عنوان مثال، نسخه‌های CSS 1.0 و ۲.۰ فاقد ابزارهای UI مانند کنترل‌های پایه و اسلایدرها بودند.
اما با معرفی CSS3، ویژگی‌های جدیدی مانند رنگ‌های متنوع، سایه‌ها، شفافیت و غیره به آن اضافه شد. جاوا اسکریپت همچنان برای ایجاد رابط کاربری پیشرفته گزینه‌ای قدرتمند محسوب می‌شود اما استفاده بیش از حد آن، منابع سیستم را بیشتر مصرف کرده و موجب کندی سایت می‌گردد.
اگر متوجه شدید که صفحه وب شما برای جبران کاستی‌های نسخه‌های قدیمی CSS از جاوا اسکریپت استفاده می‌کند، بهتر است آن را بازنگری کرده و در صورت امکان، جاوا اسکریپت‌های غیرضروری را با CSS جایگزین کنید. این کار نه‌تنها باعث بهبود سرعت بارگذاری صفحه می‌شود بلکه تجربه کاربری بهتری را نیز فراهم می‌کند.
۵. حذف اسکریپت‌های غیرضروری
حذف اسکریپت‌های غیر ضروری یکی از روش های رفع خطای Render-Blocking می باشد. جاوا اسکریپت (JS) و CSS برای گسترش قابلیت‌های صفحات وب و ایجاد منطق در بخش‌هایی که HTML به تنهایی کافی نیست، طراحی شده‌اند اما با معرفی HTML 5.3، تگ‌های جدیدی اضافه شده‌اند که آن را از عملکردهای قبلی JS و CSS بی‌نیاز کرده است. بنابراین، جایگزین کردن اسکریپت‌ها با قابلیت‌های پیشفرض HTML می‌تواند به طور طبیعی باعث افزایش سرعت سایت گردد.
یکی از بهترین روش‌های بهینه‌سازی سرعت وب‌سایت و رفع مشکل Render-Blocking، حذف تمام اسکریپت‌های کم‌استفاده یا غیرضروری است. برای این کار، باید ابتدا اسکریپت‌های غیرضروری را شناسایی و حذف کنید. ابزارهایی مانند تب Coverage در Chrome DevTools یا GTmetrix می‌توانند به شما کمک کنند تا اسکریپت‌های کم‌کاربرد در وب‌سایت خود را پیدا کرده و آنها را حذف کنید.
پس از حذف تگ‌ها یا عملکردهای غیرضروری، می‌توانید اسکریپت‌هایی که عملکرد مشابهی دارند را باهم ترکیب نمایید. اگر با کدهای وب‌سایت خود آشنایی داشته باشید، این کار چندان دشوار نخواهد بود اما اگر تجربه کافی در طراحی وب ندارید باز هم جای نگرانی نیست زیرا وردپرس این فرآیند را با استفاده از افزونه‌های بهینه‌سازی آسان‌تر کرده است. در ادامه به معرفی این افزونه‌ها پرداخته می شود.
تصویر(۴)
۶. استفاده از افزونه‌ها برای بهینه‌سازی وردپرس
استفاده از افزونه های بهینه سازی یکی دیگر از انواع روش های رفع خطای Render-Blocking می باشد. برای بهینه‌سازی وب‌سایت وردپرسی خود، لازم نیست حتماً یک برنامه‌نویس باشید. البته داشتن تجربه در این زمینه کمک‌کننده خواهد بود اما افزونه‌های متعددی جهت بهینه‌سازی اسکریپت‌ها وجود دارند که برخی حتی از هوش مصنوعی برای فشرده‌سازی کد، تغییر ترتیب بارگذاری و جایگزینی اسکریپت‌های غیرضروری با نسخه‌های بهینه استفاده می‌کنند.
برخی از بهترین افزونه‌های بهینه‌سازی اسکریپت در وردپرس:
- WP Rocket: یکی از محبوب‌ترین افزونه‌های بهینه‌سازی وب‌سایت است که به طور خودکار اسکریپت‌های مشکل‌ساز را شناسایی و اصلاح می‌کند. همچنین، قابلیت‌هایی مانند کشینگ سریع، بارگذاری با تاخیر (defer)، فشرده‌سازی و خلاصه‌سازی (minification) را ارائه می‌دهد و یکی از بهترن افزونه ها برای رفع مشکل Render-Blocking می باشد.
- Autoptimize: این افزونه می‌تواند اسکریپت‌های غیرضروری را حذف یا به تاخیر بیندازد، CSS داخلی را یکپارچه کند و کدهای JS، HTML و تصاویر را فشرده‌سازی نماید. امکان شخصی‌سازی بیشتر این افزونه به واسطه API ارائه شده و تنظیمات پیشرفته آن نیز مقدور است.
- W3 Total Cache: این افزونه نیاز به پیکربندی دستی بیشتری دارد زیرا اسکریپت‌های غیرضروری را می بایست خودتان شناسایی و مدیریت کنید. در اغلب موارد، این افزونه به صورت پیشفرض در پکیج‌های وردپرس موجود است.
- Async JavaScript: یک افزونه متن‌باز از وردپرس که به شما کمک می‌کند تا اسکریپت‌های Render-Blocking صفحه را شناسایی کرده و آنها را به صورت غیرهمزمان (async) یا تاخیری (defer) بارگذاری کنید.
نتیجه گیری: چرا ابتدا استفاده از افزونه‌ها توصیه نشد؟
در این مقاله تلاش شد تا انواع روش های رفع مشکل Render-Blocking توضیح داده شود. متأسفانه، بسیاری از افزونه‌های بهینه سازی رایگان نیستند. برای مثال، نسخه پریمیوم Autoptimize مستلزم پرداخت هزینه سالانه ۴۹ دلاری است. شاید این مبلغ معقول باشد اما برای کاربرانی که هزینه‌های بالایی جهت هاستینگ و سایر افزونه‌ها پرداخت می‌کنند، ممکن است گزینه ایده‌آلی نباشد.
با این حال، چه از افزونه‌ها استفاده نمایید یا به صورت دستی اسکریپت‌ها را مدیریت کنید، باید مفاهیمی مانند فشرده‌سازی (minification)، بارگذاری غیرهمزمان (asynchronous loading) و ترتیب بارگذاری (load order) را درک کنید. داشتن این دانش به شما کمک می‌کند در صورت بروز مشکل، سریعا نسبت به رفع آن اقدام نمایید.