نحوه رفع انسداد رندر جاوا اسکریپت و CSS در وردپرس

آیا می خواهید مسدود کردن عملکرد JavaScript و CSS در وردپرس را از بین ببرید؟

اگر وب سایت خود را در بینش های Google PageSpeed ​​آزمایش می کنید ، احتمالاً پیشنهادی برای حذف بلوک های ضبط و اسکریپت CSS مشاهده خواهید کرد. با این حال ، جزئیات در مورد چگونگی انجام این کار در وب سایت وردپرس شما ارائه نمی دهد.

در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید JavaScript و CSS را به راحتی مسدود کنید در وردپرس برای بهبود نمره Google PageSpeed ​​خود.

اما قبل ، بیایید با هم کشف کنیم چگونه به نصب یک وبلاگ وردپرس مراحل 7 et چگونه برای پیدا کردن، نصب و فعال یک تم وردپرس در وبلاگ خود.

JavaScript و CSS Render-Blocking چیست؟

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

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

مرورگر کاربر قبل از بارگیری بقیه کد HTML در صفحه ، باید این اسکریپت ها و CSS را بارگیری کند. این بدان معنی است که کاربران با اتصال آهسته تر باید برای دیدن صفحه چند میلی ثانیه دیگر صبر کنند.

به این اسکریپت ها و شیوه نامه ها JavaScript و CSS blocker رندر گفته می شود.

صاحبان وب سایت در تلاش برای دستیابی به نمره 100 صفحه GoogleSpeed ​​برای دستیابی به آن نمره کامل باید این مسئله را برطرف کنند.

Google PageSpeed ​​Score چیست؟

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

این بر اساس تعدادی از قوانینی که وب سایت شما تصویب می کند ، به شما نمره می دهد. بیشتر وب سایتها بین 50 تا 70 هستند. با این حال ، برخی از صاحبان وب سایت احساس فشار می کنند تا به 100 برسند.

آیا واقعاً به نمره "100" در Google PageSpeed ​​نیاز دارید؟

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

به یاد داشته باشید ، سرعت تنها یکی از معیارهای SEO بسیاری است که به Google کمک می کند تا چگونه رتبه وب سایت شما را تعیین کند. دلیل سرعت آن بسیار مهم است که بهبود می یابد تجربه کاربر در وب سایت خود

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

هدف شما باید ایجاد یک وب سایت سریع باشد که تجربه کاربری خوبی را ارائه می دهد.

در آخرین طراحی مجدد BlogPasCher ، ما بر سرعت و همچنین بهبود تجربه کاربر تمرکز داشتیم.

ما توصیه می کنیم که از قوانین Google Pagespeed به عنوان یک پیشنهاد استفاده کنید ، و اگر می توانید بدون خراب کردن تجربه کاربر ، آنها را به راحتی اجرا کنید ، پس این عالی است. اگر اینگونه نباشد ، باید تلاش کنید تا آنجا که می توانید انجام دهید ، و در مورد بقیه نگران نباشید.

با این اوصاف ، بیایید نگاهی به آنچه می توانید برای رفع انسداد ارائه JavaScript و CSS در وردپرس انجام دهید ، بیاندازیم.

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

1. اسکریپت های مسدود کننده و CSS را با WP Rocket برطرف کنید

برای این روش از افزونه WP Rocket استفاده خواهیم کرد. این هست بهترین افزونه ذخیره سازی وردپرس در بازار وجود دارد و به شما امکان می دهد به سرعت عملکرد وب سایت خود را بدون هیچ گونه مهارت فنی و پیچیده تنظیم کنید.

اول از همه ، شما باید افزونه WP Rocket را نصب و فعال کنید. برای اطلاعات بیشتر ، به راهنمای مرحله به مرحله ما درباره نحوه نصب افزونه وردپرس مراجعه کنید..

WP Rocket حافظه نهان خود را با تنظیمات بهینه فعال می کند. به طور پیش فرض، گزینه های بهینه سازی جاوا اسکریپت و CSS را فعال نمی کند. این بهینه سازی ها به طور بالقوه می توانند بر رویظاهر وب سایت شما یا ویژگی های خاصی، به همین دلیل است که این افزونه به شما امکان می دهد آن تنظیمات را به عنوان یک گزینه فعال کنید.

برای انجام این کار باید ادامه دهید تنظیمات »موشک WP، سپس به "بهینه سازی پرونده. از آنجا ، به قسمت پایین بروید پرونده های CSS جعبه ها را تیک بزنید  CSS را به حداقل برسانید, فایلهای CSS را ترکیب کنید et تحویل CSS را بهینه کنید.

Remarque : WP Rocket سعی می کند تمام فایل های CSS شما را کوچک کند، آنها را ترکیب کند و فقط CSS لازم را برای قسمت قابل مشاهده وب سایت شما بارگیری کند. این می تواند تاثیر بگذاردظاهر وب سایت شما، بنابراین باید وب سایت خود را به طور کامل روی چندین دستگاه و اندازه صفحه نمایش آزمایش کنید.

سپس باید به بخش بروید پرونده های JavaScript. از اینجا می توانید تمام گزینه ها را برای حداکثر بهبود عملکرد تیک بزنید.

می توانید فایلهای جاوا اسکریپت را درست مانند آنچه که فایلهای CSS انجام داده اید ، کمینه و ترکیب کنید.

همچنین می توانید از آپلود فایل وردپرس جلوگیری کنید. جی کوئری مهاجرت کنید. این اسکریپتی است که وردپرس برای ارائه سازگاری برای افزونه ها و مضامین با استفاده از نسخه های قدیمی تر jQuery بارگیری می کند.

اکثر وب سایت ها به این پرونده نیاز ندارند ، اما بهتر است وب سایت خود را بررسی کنید تا مطمئن شوید که حذف آن بر موضوع یا افزونه های شما تأثیری ندارد.

سپس کمی بیشتر به پایین پیمایش کنید و گزینه ها را بررسی کنیدجاوا اسکریپت تعویض شد"و"حالت ایمن برای jQuery".

این گزینه ها بارگذاری JavaScript غیر ضروری را به تأخیر می اندازد ، و حالت ایمن jQuery به شما امکان می دهد جی کوئری را برای مضامین بارگذاری کنید که می توانند از آن بصورت درون خطی استفاده کنند. 

به یاد داشته باشید که برای ذخیره تنظیمات ، روی دکمه Save Changes کلیک کنید.

پس از آن می توانید قبل از آزمایش مجدد وب سایت خود با Google Page Speed ​​Insights ، کش را در WP Rocket پاک کنید.

در وب سایت آزمون ما ، ما در دسک تاپ توانستیم به نمره 100٪ برسیم و مسئله رندر گیر هم در نمرات موبایل و هم برای دسک تاپ حل شد.

2. مسدود کردن عملکرد JavaScript و CSS را با استفاده از خودکار تنظیم کنید

برای این روش ، ما از افزونه دیگری که بطور ویژه برای بهبود تحویل پرونده های CSS و JS وب سایت شما ساخته شده استفاده خواهیم کرد. در حالی که این افزونه کار را تمام می کند ، فاقد ویژگی های قدرتمند دیگری است که WP Rocket ارائه می دهد.

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

هنگام فعال سازی ، باید به صفحه مراجعه کنید تنظیم »خودکار کردن برای پیکربندی تنظیمات افزونه.

اول از همه ، شما باید گزینه "بهینه سازی کد جاوا اسکریپتزیر بلوک جاوا اسکریپت گزینه. اطمینان حاصل کنید که گزینه "جمع کردن تمام پرونده های JS مرتبط" علامت گذاری نشده است.

سپس به پایین منطقه بروید گزینه های CSS و گزینه را علامت بزنید کد CSS را بهینه می کنید؟" مطمئن شوید که گزینه "تمام پرونده های CSS مرتبطبررسی نشده است.

اکنون می توانید بر روی دکمه "ذخیره تغییرات و پاک کردن حافظه پنهان" کلیک کنید تا تنظیمات خود را ذخیره کنید.

پیش بروید و وب سایت خود را با صفحه Speed ​​Insights تست کنید. در وب سایت نسخه ی نمایشی ما ، ما قادر به حل مسئله رندر گیرنده با این تنظیمات اساسی بودیم.

اگر هنوز اسکریپت های مسدود کننده رندر وجود دارد ، باید به صفحه تنظیمات افزونه برگردید و گزینه های JavaScript و CSS را جستجو کنید.

به عنوان مثال ، می توانید به افزونه اجازه دهید JS Inline را شامل شود و اسکریپت هایی را که به طور پیش فرض مانند seal.js یا jquery.js حذف شده اند حذف کنید.

برای ذخیره تغییرات خود و پاک کردن حافظه پنهان روی دکمه "ذخیره تغییرات و پاک کردن حافظه پنهان" کلیک کنید.

پس از اتمام کار ، پیش رفته و وب سایت خود را دوباره با ابزار Page Speed ​​Insights بررسی کنید.

چگونه کار می کند؟

به صورت خودکار بسته های کلیه پرونده های JavaScript و CSS. پس از آن او ایجاد می کند پرونده های CSS و JavaScriptts را به حداقل رساند و نسخه های ذخیره شده وب سایت خود را بصورت هماهنگ یا معوق ارائه می دهد.

این به شما امکان می دهد مشکل مسدود کردن را حل کنید ارائه اسکریپت ها و سبک های مسدود کردن با این حال، لطفاً به خاطر داشته باشید که این ممکن است بر عملکرد یا تأثیر بگذاردظاهر وب سایت شما.

کمک

بسته به نحوه استفاده افزونه ها و مضمون وردپرس شما از جاوا اسکریپت و CSS استفاده می کند ، حل کردن تمام مشکلات با مشکل بسیار دشوار است. انسداد از نمایش JavaScript و CSS.

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

Google هنوز هم می تواند مواردی مانند بهینه سازی تحویل CSS را به شما نشان دهد. WP Rocket به شما امکان می دهد با افزودن دستی CSS مهم برای نمایش کامل موضوع وردپرس ، این مشکل را برطرف کنید.

با این وجود ، دانستن اینکه کد CSS شما برای نمایش چه چیزی لازم است ، بسیار دشوار خواهد بود.

همچنین برخی از تم ها و افزونه های برتر وردپرس را کشف کنید  

شما می توانید از سایر افزونه های وردپرس استفاده کنید تا ظاهری مدرن و بهینه سازی چنگال وبلاگ یا وب سایت خود داشته باشید.

ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.

1. پلاگین بهینه سازی سرعت وردپرس

آیا در تلاش برای مدیریت چندین افزونه بهینه سازی سرعت وب سایت هستید؟ آیا نگران هستید که آنها مانع سرعت اجرای وب سایت شما شوند؟ سپس ، این افزونه وردپرس بهترین راه حل برای تمام نگرانی های شما خواهد بود.

این افزونه برای ارائه عملکرد تقریباً 6-8 افزونه مختلف وردپرس طراحی شده است. فقط باید آن را نصب و پیکربندی کنید تا شاهد بهبود بارگیری صفحات خود باشید.

ما می خواهیم اشاره کنیم که این یک a نیست افزونه کش یا CDN، اما نتیجه ای که ارائه می دهد چشمگیر است. دریغ نکنید که این افزونه وردپرس را امتحان کنید تا ببینید چه چیزی توانایی آن را دارد.

دانلود | نسخه ی نمایشی | میزبانی وب

2. Social Share & Locker Pro

افزونه Social Share & Locker Pro برای کمک به وب سایت شما در شبکه های اجتماعی بیشتر دیده شده است. فقط با چند کلیک می توانید موقعیت آیکون های اجتماعی خود را تنظیم کنید یا با الزام به اشتراک گذاری در یکی از شبکه های اجتماعی ارائه شده توسط خود ، محتوای خود را قفل کنید.

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

همچنین با Social Share & Locker Pro قادر خواهید بود نام کامل شبکه های اجتماعی یا فقط نماد را نمایش دهید. این به طراحی شما ، فضای موجود یا خواسته های شما بستگی دارد.

دانلود | نسخه ی نمایشی | میزبانی وب

3. وردپرس PDF سبز

لایت باکس پی دی اف وردپرس یک افزونه وردپرس که به شما امکان می دهد بیننده فایل های PDF ایجاد کنید. PDF Viewer مجموعه ای از عکس هایی است که می تواند به صورت PDF ذخیره شود.

با استفاده از این برنامه افزودنی ، می توانید به تعداد دلخواه بیننده PDF ایجاد کنید. برای هر بیننده ، سرپرست می تواند برخی از گزینه ها را تنظیم کند مانند:

• تصویر جلد: که به عنوان اولین صفحه PDF ایجاد شده توسط کاربر اضافه خواهد شد
• حداکثر تصاویر برای هر بازدید کننده
• تصویر علامت: در صفحات PDF اعمال می شود
• ارسال از طریق ایمیل: در صورت فعال بودن این ویژگی، الف فرم تماس درست بعد از گالری تصاویر ارائه خواهد شد. از طریق این فرم، کاربران می توانند PDF ایجاد شده را برای هر کسی ایمیل کنند.

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

درباره سایر منابع پیشنهادی برای کمک به شما در ساخت و مدیریت وب سایت خود اطلاعات کسب کنید.

• افزونه های 10 WordPress برای بهبود سئوی وب سایت شما
• افزونه های WordPress Premium 5 برای بهینه سازی دسته های خود
• 10 افزونه WordPress برای تبدیل ارز
• پلاگین 10 وردپرس به ادغام های پخش کننده های صوتی در یک وب سایت

نتیجه

اینجا ! این برای این آموزش است. امیدواریم این مقاله به شما کمک کند تا یاد بگیرید که چگونه مسدود کردن ارائه JavaScript و CSS را در وردپرس برطرف کنید. شما همچنین می توانید از ما دیدن کنید راهنمای نهایی در مورد چگونگی سرعت بخشیدن به عملکرد وردپرس برای مبتدیان.

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

دریغ نکنید با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید. و اگر پیشنهادی یا سخنی دارید ، آنها را در بخش ما بگذارید نظر.

...