آموزش حل مشکل Render-Blocking جاوا اسکریپت و CSS در وردپرس

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0٫00 از 5)
بارگذاری...

آیا میخواهید render-blocking جاوااسکریپت و سی اس اس را در سایت وردپرس خود حذف کنید؟ اگر سایت خود را با Google PageSpeed بررسی کرده باشید، متوجه پیشنهاد این سرویس برای حذف render-blocking مربوط به جاوااسکریپت و سی اس اس شده اید. در این مطلب میخواهیم به شما نشان دهیم که چگونه می توانید به آسانی این مشکل را حل کرده و امتیاز سایت خود در Google PageSpeed را بهبود ببخشید.

حل مشکل Render-Blocking

Render-Blocking جاوااسکریپت و سی اس اس چیست؟

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

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

صاحبان سایت هایی که به دنبال کسب نمره ۱۰۰ از Google PageSpeed هستند، میبایست این مشکل را رفع کنند تا به آن نمره دست یابند.

 

نمره Google PageSpeed چیست؟

Google PageSpeed Insights ابزار آنلاینی است که توسط گوگل و برای کمک به صاحبان سایت ها برای بهینه سازی سایتشان و بررسی آن ایجاد شده است. این ابزار سایت شما را بر اساس راهنمای گوگل بررسی کرده و پیشنهاداتی را برای بهبود سرعت بارگذاری سایتتان، به شما ارائه می کند.

این ابزار نمره ای را بر اساس تعداد مواردی که سایت شما آنها را گذرانده است، به آن اختصاص می دهد. بیشتر سایت های نمره ای بین ۵۰ تا ۷۰ را کسب می کنند. اما بعضی از صاحبان سایت ها به دنبال کسب نمره عالی یعنی ۱۰۰ هستند.

 

آیا شما واقعا به نمره عالی یعنی ۱۰۰ ابزار Google PageSpeed نیاز دارید؟

هدف Google PageSpeed ارائه پیشنهاداتی است که شما بتوانید از طریق آنها سرعت سایت خود و عملکرد آن را بهبود ببخشید. بدین ترتیب نیازی نیست که این موارد را حتما دنبال کنید.

در ادامه بخوانید:  رفع خطای " آپلود این نوع پرونده به دلیل مسائل امنیتی مجاز نیست " در وردپرس

به خاطر داشته باشید که سرعت تنها یکی از فاکتور های سئو است که به گوگل در شناسایی رتبه سایت شما کمک می کند. البته دلیلی که باعث اهمیت سرعت شده این است که سرعت بارگذاری تاثیر زیادی در بهبود تجربه کاربری سایت دارد.

یک تجربه کاربری بهتر البته به چیزهای دیگری غیر از سرعت نیز نیاز دارد. شما همچنین میبایست اطلاعات مفیدی را در اختیار کاربران قرار داده، ظاهر کاربری سایت را بهبود ببخشید و از محتوای جذاب که شامل تصویر، متن و ویدئو است، استفاده کنید.

هدق شما میبایست ایجاد سایتی باشد که سریع بارگذاری شده و تجربه کاربری فوق العاده ای را برای کاربر فراهم می کند.

 

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

 

۱- حل مشکل Render Blocking  با افزونه Autoptimize

این روش آسان تر بوده و توصیه به کاربران استفاده از این روش است.

ابتدا شما باید افزونه Autoptimize را نصب و فعال کنید. برای دریافت این افزونه می توانید از لینکی که در پایین قسمت اول این مطلب قرار داده شده استفاده کنید.

در صورتیکه با نصب افزونه در وردپرس آشنا نیستید، می توانید مقاله “سه روش مختلف نصب پلاگین (افزونه) در وردپرس” را مطالعه کنید.

بعد از نصب و فعالسازی افزونه، از منوی سمت راست پیشخوان وردپرس و قسمت تنظیمات، بر روی Autoptimize کلیک کنید تا وارد صفحه تنظیمات افزونه شوید.

در ادامه بخوانید:  پنهان کردن برگه های محافظت شده از کاربران خاص

شما می توانید کار را با زدن تیک مربوط به بهینه سازی کد CSS و بهینه سازی کد Javascript شروع کنید و بعد از آن برای ذخیره، بر روی دکمه “ذخیره تغییرات” کلیک کنید.

شما حالا می توانید سایت خود را با ابزار PageSpeed بررسی کنید. اگر همچنان مشکل render blocking پابرجاست، میبایست به صفحه تنظیمات افزونه برگشته و بر روی آیکونی که در بالای صفحه تنظیمات افزونه وجود دارد کلیک کنید تا تنظیمات پیشرفته نمایش داده شوند:

بعد از کلیک کردن بر روی آیکون مذکور، تنظیمات اضافی افزونه نمایش داده خواهند شد:

در اینجا شما می توانید به افزونه اجازه دهید که فایل های JS درون خطی یکی شده و اسکریپت هایی که به طور پیش فرض خارج شده اند را حذف کند.

بعد از آن به بخش پایین همان صفحه رفته و می توانید این تنظیمات را برای بخش CSS نیز اعمال کنید.

بعد از انجام تنظیمات، بر روی دکمه “ذخیره تغییرات و تخلیه کش” کلیک کرده تا تغییرات اعمال شده ذخیره شده و کش افزونه خالی کشود.

به محض اینکه کارتان تمام شد، می توانید مجددا سایت خود را با ابزار مذکور تست کنید.

دانلود افزونه Autoptimize

 

۲- حل مشکل با افزونه W3 Total Cache

این روش نیازمند کار بیشتری بوده و برای کاربرانی توصیه می شود که در حال حاضر در حال استفاده از این افزونه هستند.

ابتدا شما باید افزونه W3 Total Cache را نصب و فعال کنید. برای دریافت افزونه می توانید از لینکی که در پایین همین بخش قرار داده شد است استفاده کنید.

در صورتیکه با نصب افزونه در وردپرس آشنا نیستید، می توانید مقاله “سه روش مختلف نصب پلاگین (افزونه) در وردپرس” را مطالعه کنید.

بعد از نصب و فعالسازی افزونه، از منوی سمت راست پیشخوان و بخش Performance، بر روی General Settings کلیک کرده تا به صفحه تنظیمات افزونه منتقل شوید.

در ادامه بخوانید:  مخفی سازی عنوان برگه ها و نوشته ها در وردپرس با افزونه Hide Title

  • در صفحه مذکور به بخش Minify در پایین صفحه بروید.
  • ابتدا شما باید تیک گزینه “Enable” را زده و سپس از بخش Minify Mode تیک گزینه Manual را بزنید.
  • در نهایت بر روی دکمه save all settings کلیک کنید تا تنظیمات انجام شده ذخیره شوند.
  • بعد از آن شما باید اسکریپت ها و فایل های CSS را که که میخواهید minify شوند را اضافه کنید.
  • شما می توانید آدرس تمام اسکریپت ها و فایل های استایلی را که به مشکل render blocking برخورده اند را از طریق ابزار Google PageSpeed بدست آورید.

زیر قسمت suggestions آنجایی که گفته است: “Eliminate render-blocking JavaScript and CSS in above-the-fold content” بر روی Show how to fix کلیک کنید. با این کار لیستی از اسکریپت ها و فایل های استایل نمایش داده خواهد شد.

موس خود را روی اسکریپتی که ببرید، آدرس کامل آن نمایش داده خواهد شد. شما می توانید آدرس مذکور را انتخاب کرده و آن را کپی کنید.

سپس از پیشخوان وردپرس و بخش Performance ، بر روی Minify کلیک کنید.

ابتدا شما باید فایل های جاوااسکریپتی را که میخواهید minify شوند را اضافه کنید. به پایین صفحه و بخش JS بروید و زیر بخش Operations in areas، مقدار Embed type را برای قسمت </head> روی Non-blocking async بگذارید.

بعد از آن شما باید بر روی دکمه Add script کلیک کرده و سپس آدرس هایی را که پیشتر کپی کرده اید را وارد کنید.

به محض اینکه کارتان تمام شد، به بخش CSS رفته و روی دکمه Add a stylesheet کلیک کنید. در آنجا آدرس فایل های استایلی را که پیشتر کپی کرده اید، وارد کنید.

حالا روی دکمه Save settings and purge cache کلیک کرده تا تنظیمات صورت گرفته ذخیره شوند.

مجددا سایت خود را با ابزار Google PageSpeed تست کنید.

دانلود افزونه W3 Total Cache

اطلاعات بیشتر



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



جواد
( عضو از 2 سال قبل )
  • 220 نوشته
  • 33 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی
جواد - عضو تیم تحریریه مجموعه نوین وردپرس...

نظرات کاربران

ثبت دیدگاه

چند نکته قبل از ارسال دیدگاه :
  • تمامی دیدگاه ها قبل از انتشار عمومی توسط کارشناسان سایت بررسی خواهند شد.
  • دیدگاه هایی که جنبه تبلیغاتی داشته باشند تایید نخواهند شد.
  • آدرس سایت ، مشخصات مدیریت و... در متن دیدگاه حذف خواهند شد.
  • دیدگاه هایی که به زبان انگلیسی باشند تایید نخواهند شد.
  • دیدگاه هایی که حاوی توهین ، تهدید یا... باشند تایید نخواهند شد.

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

مطالب مرتبط



دسته بندی مطالب

آخرین آپدیت محصولات

همکار ما شوید

اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.

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