سلام به تیک تم خوش آمدید.در این مقاله به آموزش رفع مشکل جاوا اسکریپت Render Blocking در وردپرس می پردازیم.شما هم باید مشکل render-blocking جاوااسکریپت و سی اس اس را در وبسایت وردپرس خود حذف کنید. اگر وبسایت خود را با Google PageSpeed بررسی کرده باشید، می فهمید پیشنهاد این سرویس برای حذف render-blocking مربوط به جاوااسکریپت و سی اس اس شده اید. در این مقاله میخواهیم به شما آموزش دهیم که چگونه می توانید به آسانی این مشکل را حل کرده و امتیاز سایت خود در Google PageSpeed را بهبود ببخشید.
مشکل جاوا اسکریپت Render Blocking در وردپرس چیست؟
هر وبسایت وردپرسی دارای قالب و افزونه هایی است که جاوا اسکریپت و فایل های CSS به بخش هایی از سایت اضافه شده. که این اسکریپت ها می توانند زمان بالا آمدن یک صفحه از سایت را افزایش دهند و همینطور می توانند صفحه را بلاک کنند.مرورگر کاربر باید این JavaScript و CSS ها را قبل از بارگذاری بقیه HTML در صفحه بارگذاری کند. این به این معنی است که کاربران با سرعت اتصال کم برای دیدن صفحه چند میلی ثانیه بیشتر باید صبر کنند. این اسکریپت ها و شیوه ها به عنوان render-blocking جاوا اسکریپت و CSS شناخته می شوند. صاحبان وب سایت ها برای رسیدن به امتیاز ۱۰۰ از Google PageSpeedدر حال تلاش اند.
امتیاز Google speed score چیست؟
Google speed score یک ابزار آنلاین است که بوسیله گوگل برای بهینه سازی وب سایت های صاحبان کسب وکار است. سرعت وبسایت شما را تست می کند و بعد از آن یک سری پیشنهادات برای افزایش سرعت سایت شما ارائه می کند.بعد از اینکه تست تمام شد یک نمره به سایت شما اختصاص می دهد. بیشتر وب سایت ها نمره ای میان ۵۰ الی ۷۰ دریافت می نمایند و بالاترین نمره در این تست ۱۰۰ می باشد.
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس Autoptimize
اولین چیزی که شما می بایست انجام دهید نصب و فعال سازی افزونه Autoptimize است. برای جزئیات بیشتر، آموزش نصب افزونه در وردپرس را ببینید.
بعد از فعال سازی از بخش تنظیمات به صفحه ی تنظیمات افزونه Autoptimize بروید. شما برای شروع می توانید گزینه های JavaScript و CSS را چک کنید و در آخر دکمه ی ذخیره تغییرات را بزنید.
شما می توانید سایت خود را با ابزار PageSpeed تست کنید. در صورتی که هنوز هم Render-Blocking جاوا اسکریپت و CSS برجاست شما می توانید به صفحه ی تنظیمات افزونه برگردید و به تنظیمات پیشرفته بروید. و همینطور می توانید به افزونه اجازه دهید که js درون خطی قرار دهد و یا اینکه اسکریپت هایی مانند seal.js یا jquery.js را که به صورت پیش فرض حذف شده اند را حذف کند.
در مرحله بعد، تا گزینه CSS به پایین بروید و به افزونه اجازه دهید تا CSS درون خطی را قرار دهد. برای ذخیره تغییرات و خالی کردن حافظه کش افزونه روی دکمه ی ” ذخیره و خالی کردن کش ” کلیک کنید. یکبار که انجام دادید به مراحل بعد بروید و دوباره وب سایت خود را با ابزار PageSpeed چک کنید. برای اینکه بدانید با بهینه سازی جاوا اسکریپت یا CSS چیزی بهم ریخته نشده است، وب سایت خود را به طور کامل تست کنید.
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس W3 Total Cache
این روش نیاز به کار کمی دارد و به کاربرانی پیشنهاد میشود که هم اکنون در سایت خود از w3 total cache استفاده می نمایند.
برای استفاده از این روش ابتدا باید پلاگین W3 Total Cache را نصب و فعال کنید سپس وارد بخش Performance » General Settings شوید و به قسمت Minify در صفحه اسکورل نمایید.
اول می بایست گزینه “Enable” را در قسمت Minify چک کنید و سپس گزینه Manual را انتخاب کنید.
برای ذخیره تنظیمات روی دکمه save all settings کلیک نمایید.
بعد نیاز دارید تا فایل اسکریپت ها و CSS ها را اضافه نمایید. شما میتوانید آدرس این فایل ها را از ابزار تست سرعت گوگل دریافت نمایید.
در قسمت پیشنهادات در جایی که عبارت ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ قرار دارد بر روی دکمه ‘Show how to fix’ کلیک کنید. در زیر لیست اسکرپیت ها و استایل شیت ها را نشا می دهد.
اگر نشانگر موس را بالای اسکرپیت ها ببرید URL را به طور کامل نشان می دهد.شما می توانید URL را که می خواهید با فشردن کلیدهای CTRL + C صفحه کلید کپی کنید.
حالا به مدیریت وردپرس بروید و وارد بخش Performance » Minify شوید.
در شروع نیاز خواهید داشت تا فایل های جاوا اسکزیپت را برای کوچک سازی و بهینه سازی اضافه نمایید. سپس به بخش JS اسکورل نمایید و در زیر قسمت ‘Operations in areas’ گزینه Embed types را بر روی Non-blocking async برای هر بخش <head> تنظیم کنید.
بعد روی دکمه Add script کلیک نمایید و و سپس شروع به اضافه کردن URL های اسکریپت که از ابزار Google PageSpeed کپی کرده اید کنید.
پس از اتمام کار، به قسمت CSS بروید و بر روی گزینه ‘Add a stylesheet’ کلیک نمایید. شروع به افزودن URL هایی که از ابزار Google PageSpeed کپی کرده اید کنید.
حالا برای ذخیره تنظیمات روی دکمه Save settings and purge cache کلیک کنید. از ابزار Google PageSpeed بازدید کنید و دوباره وب سایت خود را آزمایش کنید. اطمینان حاصل کنید که وب سایت خود را نیز کاملا آزمایش کردید تا ببینید که همه چیز خوب کار می کند.
هنوز مشکل دارید؟!
در نظرات مشکل خودتون رو مطرح کنید 🙂
مطالب مرتبط:
رفع خطای حافظه خالی در وردپرس| افزایش حافظه php
آموزش رفع خطای ۵۰۴ Gateway در وردپرس
رفع خطای error establishing a database connection وردپرس
منبع: تیک تم – ارائه دهنده: قالب تجاری وردپرس – قالب شخصی وردپرس –
