خانه / وردپرس / آموزش وردپرس / رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۳ دی ۱۳۹۷ تعداد بازدید : 10 بازدید بدون دیدگاه

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

سلام به تیک تم خوش آمدید.در این مقاله به آموزش رفع مشکل جاوا اسکریپت 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 یک ابزار آنلاین است که بوسیله گوگل برای بهینه سازی وب سایت های صاحبان کسب وکار است. سرعت وبسایت شما را تست می کند و بعد از آن یک سری پیشنهادات برای افزایش سرعت سایت شما ارائه می کند.بعد از اینکه تست تمام شد یک نمره به سایت شما اختصاص می دهد. بیشتر وب سایت ها نمره ای میان ۵۰ الی ۷۰ دریافت می نمایند و بالاترین نمره در این تست ۱۰۰ می باشد.

همین حالا ببینید:  افزونه حذف اکانت کاربر توسط خودش در وردپرس با Delete Me

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس Autoptimize

اولین چیزی که شما می بایست انجام دهید نصب و فعال سازی افزونه Autoptimize است. برای جزئیات بیشتر، آموزش نصب افزونه در وردپرس را ببینید.

بعد از فعال سازی از بخش تنظیمات به صفحه ی تنظیمات افزونه Autoptimize بروید. شما برای شروع می توانید گزینه های JavaScript و CSS را چک کنید و در آخر دکمه ی ذخیره تغییرات را بزنید.

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

شما می توانید سایت خود را با ابزار 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 در صفحه اسکورل نمایید.

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

اول می بایست گزینه “Enable” را در قسمت Minify چک کنید و سپس گزینه Manual را انتخاب کنید.

برای ذخیره تنظیمات روی دکمه save all settings کلیک نمایید.

بعد نیاز دارید تا فایل اسکریپت ها و CSS ها را اضافه نمایید. شما میتوانید آدرس این فایل ها را از ابزار تست سرعت گوگل دریافت نمایید.

در قسمت پیشنهادات در جایی که عبارت ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ قرار دارد بر روی دکمه ‘Show how to fix’ کلیک کنید. در زیر لیست اسکرپیت ها و استایل شیت ها را نشا می دهد.

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

اگر نشانگر موس را بالای اسکرپیت ها ببرید URL را به طور کامل نشان می دهد.شما می توانید URL را که می خواهید با فشردن کلیدهای CTRL + C صفحه کلید کپی کنید.

همین حالا ببینید:  رفع خطای ۴۲۹ Too Many Requests در وردپرس

حالا به مدیریت وردپرس بروید و وارد بخش Performance » Minify شوید.

در شروع نیاز خواهید داشت تا فایل های جاوا اسکزیپت را برای کوچک سازی و بهینه سازی اضافه نمایید. سپس به بخش JS اسکورل نمایید و در زیر قسمت ‘Operations in areas’ گزینه Embed types را بر روی Non-blocking async برای هر بخش <head> تنظیم کنید.

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

بعد روی دکمه Add script کلیک نمایید و و سپس شروع به اضافه کردن URL های اسکریپت که از ابزار Google PageSpeed کپی کرده اید کنید.

پس از اتمام کار، به قسمت CSS بروید و بر روی گزینه ‘Add a stylesheet’ کلیک نمایید. شروع به افزودن URL هایی که از ابزار Google PageSpeed کپی کرده اید کنید.

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
رفع مشکل جاوا اسکریپت Render Blocking در وردپرس

حالا برای ذخیره تنظیمات روی دکمه Save settings and purge cache کلیک کنید. از ابزار Google PageSpeed بازدید کنید و دوباره وب سایت خود را آزمایش کنید. اطمینان حاصل کنید که وب سایت خود را نیز کاملا آزمایش کردید تا ببینید که همه چیز خوب کار می کند.

هنوز مشکل دارید؟!

در نظرات مشکل خودتون رو مطرح کنید 🙂

مطالب مرتبط:

رفع خطای حافظه خالی در وردپرس| افزایش حافظه php

آموزش رفع خطای ۵۰۴ Gateway در وردپرس

رفع خطای ۵۰۳ Service Unavailable در وردپرس

رفع خطای error establishing a database connection وردپرس

منبع:‌ تیک تم – ارائه دهنده: قالب تجاری وردپرس – قالب شخصی وردپرس –پشتیبانی وردپرس

رفع مشکل جاوا اسکریپت Render Blocking در وردپرس
5 (100%) 2 votes

لینک کوتاه این مطلب: https://tiktheme.com/?p=14104


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *