آیا می خواهید JavaScript و CSS انسداد رندر را در وردپرس حذف کنید؟
اگر وب سایت خود را در بینش Google PageSpeed آزمایش کنید ، احتمالاً پیشنهادی برای حذف اسکریپت های مسدود کننده ارائه و CSS خواهید دید. با این حال ، هیچ جزئیاتی در مورد چگونگی انجام این کار در سایت وردپرس شما ارائه نمی دهد.
در این مقاله ، ما به شما نشان خواهیم داد که چگونه برای بهبود نمره Google PageSpeed خود ، JavaScript و CSS مسدودکننده رندر را به راحتی برطرف کنید.
JavaScript و CSS مسدودکننده رندر چیست؟ h4>
مسدود کردن رندر JavaScript و CSS پرونده هایی هستند که از نمایش یک صفحه وب قبل از بارگذاری این پرونده ها جلوگیری می کنند.
هر سایت WordPress دارای یک موضوع و پلاگین است که JavaScript و CSS پرونده ها در جلوی وب سایت خود. این اسکریپت ها می توانند زمان بارگیری صفحه سایت شما را افزایش دهند ، و همچنین می توانند ارائه صفحه را مسدود کنند.
قبل از بارگذاری بقیه HTML در صفحه ، مرورگر کاربر باید آن اسکریپت ها و CSS را بارگیری کند. این بدان معناست که کاربران با اتصال کندتر برای دیدن صفحه باید چند میلی ثانیه بیشتر منتظر بمانند.
از این اسکریپت ها و صفحه های سبک به عنوان JavaScript و CSS مسدود کننده رندر یاد می شود.
دارندگان وب سایتی که می خواهند نمره 100 Google PageSpeed را بدست آورند باید برای دستیابی به آن امتیاز عالی این مشکل را برطرف کنند.
امتیاز Google PageSpeed چیست؟ h4>
Google PageSpeed Insights یک ابزار تست سرعت وب سایت ایجاد شده توسط Google برای کمک به دارندگان وب سایت در بهینه سازی و آزمایش وب سایت های خود. این ابزار وب سایت شما را با توجه به دستورالعمل های Google برای سرعت آزمایش می کند و پیشنهاداتی برای بهبود زمان بارگذاری صفحه سایت شما ارائه می دهد.
براساس تعدادی از قوانینی که سایت شما تصویب می کند ، یک امتیاز به شما نشان می دهد. بیشتر وب سایت ها چیزی بین 50-70 دارند. با این حال ، برخی از دارندگان وب سایت احساس می کنند برای رسیدن به 100 (بالاترین امتیاز صفحه).
آیا شما واقعاً به امتیاز 100 “مناسب Google PageSpeed نیاز دارید؟
هدف بینش Google PageSpeed ارائه رهنمودهایی برای بهبود سرعت و عملکرد وب سایت شماست. شما ملزم به رعایت دقیق این قوانین نیستید.
به یاد داشته باشید که سرعت تنها یکی از بسیاری از معیارهایی که به Google کمک می کند نحوه رتبه بندی سایت شما را تعیین کند. دلیل بسیار مهم بودن سرعت این است که باعث بهبود تجربه کاربر در سایت شما می شود.
تجربه کاربری بهتر نیاز به موارد دیگری بیش از سرعت دارد. شما همچنین باید اطلاعات مفید ، رابط کاربری بهتر و محتوای جذاب با متن ، عکس و فیلم را ارائه دهید.
هدف شما باید ایجاد یک وب سایت سریع باشد که تجربه کاربری فوق العاده ای را ارائه دهد.
در آخرین طراحی مجدد WPBeginner ، ما تمرکز خود را بر روی سرعت و همچنین بهبود تجربه کاربر حفظ کردیم.
ما توصیه می کنیم از قوانین Google Pagespeed به عنوان پیشنهاد استفاده کنید و اگر می توانید آنها را به راحتی و بدون از بین بردن تجربه کاربر اجرا کنید ، عالی است. در غیر این صورت ، باید تلاش کنید تا آنجا که می توانید انجام دهید ، و سپس نگران بقیه موارد نباشید.
با گفتن این مطلب ، بیایید نگاهی به آنچه می توانید برای رفع JavaScript و CSS انسداد رندر انجام دهید ، بیاندازید.
ما دو روش برای رفع JavaScript و CSS مسدود کننده ارائه در وردپرس را پوشش خواهیم داد. شما می توانید یکی از مواردی را که برای وب سایت شما مناسب است انتخاب کنید.
1 اسکریپت های مسدود کننده رندر و CSS را با WP Rocket اصلاح کنید h4>
برای این روش ، ما از افزونه WP Rocket . این بهترین ذخیره سازی وردپرس است پلاگین موجود در بازار و به شما امکان می دهد بدون هیچ گونه مهارت فنی یا تنظیمات پیچیده ، به سرعت عملکرد وب سایت خود را بهبود بخشید.
ابتدا باید افزونه WP Rocket . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
WP Rocket خارج از جعبه کار می کند ، و با تنظیمات بهینه وب سایت شما حافظه پنهان را روشن می کند. می توانید در مورد راهنمای کامل ما در مورد چگونگی درست WP Rocket را در وردپرس نصب و راه اندازی کنید .
به طور پیش فرض ، گزینه های بهینه سازی JavaScript و CSS را روشن نمی کند. این بهینه سازی ها به طور بالقوه می توانند بر ظاهر وب سایت یا برخی از ویژگی های شما تأثیر بگذارند ، به همین دلیل این افزونه به شما امکان می دهد این تنظیمات را به صورت اختیاری فعال کنید.
برای انجام این کار ، باید به صفحه تنظیمات »WP Rocket بروید و سپس به برگه” File Optimization “بروید. از اینجا به بخش CSS Files رفته و کادرهای کنار گزینه های Minify CSS ، Combine CSS و Optimize CSS Delivery را علامت بزنید.
توجه: WP Rocket سعی خواهد کرد تمام پرونده های CSS شما را کوچک کند ، آنها را ترکیب کند و فقط CSS مورد نیاز برای قسمت قابل مشاهده وب سایت شما را بارگیری کند. این می تواند بر ظاهر وب سایت شما تأثیر بگذارد ، بنابراین شما باید وب سایت خود را به طور کامل در چندین دستگاه و اندازه صفحه آزمایش کنید.
بعد ، باید به قسمت Files JavaScript بروید. از اینجا می توانید همه گزینه ها را برای بهبود حداکثر عملکرد بررسی کنید.
می توانید مانند JavaScript فایلهای JavaScript را کوچک و ترکیب کنید.
همچنین می توانید وردپرس را از بارگیری پرونده انتقال jQuery متوقف کنید. این اسکریپتی است که وردپرس بارگیری می کند تا سازگاری پلاگین ها و مضامین را با استفاده از نسخه های قدیمی jQuery فراهم کند.
اکثر وب سایت ها به این پرونده احتیاج ندارند ، اما شما هنوز هم می خواهید وب سایت خود را بررسی کنید تا مطمئن شوید که حذف آن بر موضوع یا افزونه های شما تأثیری ندارد.
بعد ، کمی بیشتر به پایین پیمایش کنید و کادرهای کنار گزینه “بارگیری JavaScript Defered” و “حالت ایمن برای jQuery” را علامت بزنید.
این گزینه ها بارگیری JavaScript غیر ضروری را به تأخیر می اندازند و حالت امن jQuery به شما امکان می دهد jQuery را برای موضوعاتی که ممکن است به صورت درون خطی از آن استفاده کنند بارگیری کنید. اگر مطمئن هستید که موضوع شما از جی کوئری درون خطی در هر جایی استفاده نمی کند ، می توانید این گزینه را علامت گذاری نکنید.
برای ذخیره تنظیمات خود ، فراموش نکنید که روی دکمه ذخیره تغییرات کلیک کنید.
بعد از آن ، ممکن است بخواهید حافظه پنهان را در WP Rocket پاک کنید قبل از اینکه وب سایت خود را دوباره با Google Page Speed Insights آزمایش کنید.
در سایت آزمایشی خود توانستیم به نمره 100٪ در دسک تاپ دست پیدا کنیم و مسئله انسداد رندر در نمرات موبایل و دسک تاپ حل شد.
2. با بهینه سازی خودکار h4> اسکریپت های مسدود کردن رندر و CSS را برطرف کنید
برای این روش ، ما از یک افزونه جداگانه استفاده خواهیم کرد که به طور خاص برای بهبود تحویل پرونده های CSS و JS وب سایت شما ساخته شده است. در حالی که این افزونه کار خود را تمام می کند ، اما ویژگی های قدرتمند دیگری که WP Rocket دارد ندارد.
اولین کاری که باید انجام دهید نصب و فعال سازی بهینه سازی خودکار است پلاگین برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
برای پیکربندی تنظیمات افزونه ، باید از صفحه تنظیمات »بهینه سازی خودکار بازدید کنید.
ابتدا باید کادر کنار گزینه “Optimize JavaScript Code” را در زیر بلوک JavaScript Options علامت بزنید. مطمئن شوید که گزینه “Aggregate JS-files” برداشته نشده است.
بعد ، به پایین به کادر CSS Options رفته و گزینه “Optimize CSS Code” را علامت بزنید. مطمئن شوید که گزینه “Aggregate CSS-files” برداشته نشده است.
اکنون می توانید بر روی دکمه “ذخیره تغییرات و ذخیره خالی” برای ذخیره تنظیمات خود کلیک کنید.
پیش بروید و وب سایت خود را با ابزار Page Speed Insights تست کنید. در سایت آزمایشی خود ، با این تنظیمات اساسی توانستیم مشکل مسدود کردن رندر را برطرف کنیم.
اگر هنوز اسکریپت های مسدود کننده رندر وجود دارد ، پس باید به صفحه تنظیمات افزونه برگردید و گزینه ها را تحت هر دو گزینه JavaScript و CSS بررسی کنید.
به عنوان مثال ، می توانید به پلاگین اجازه دهید JS درون خطی داشته باشد و اسکریپت هایی را که به طور پیش فرض مانند seal.js یا jquery.js حذف شده اند ، حذف کنید.
برای ذخیره تغییرات و حافظه پنهان پلاگین خالی ، روی دکمه “ذخیره تغییرات و ذخیره خالی” کلیک کنید.
پس از پایان کار ، ادامه دهید و وب سایت خود را دوباره با ابزار Page Speed بررسی کنید.
چگونه کار می کند؟
بهینه سازی جمع کل موارد جاوا اسکریپت و CSS ایجاد شده . پس از آن ، CSS و JavaScript های کوچک شده پرونده ها و کپی های ذخیره شده را به صورت async یا به تعویق انداخته در وب سایت شما ارائه می دهد.
با این کار می توانید اسکریپت ها و سبک های مسدود کننده رندر را برطرف کنید. با این حال ، لطفاً به خاطر داشته باشید که این امر می تواند بر عملکرد یا ظاهر وب سایت شما نیز تأثیر بگذارد.
عیب یابی h4>
بسته به اینکه پلاگین ها و قالب وردپرس شما از JavaScript و CSS استفاده می کنند ، حل کامل مشکلات جاوا اسکریپت و CSS مسدود کننده رندر کاملاً چالش برانگیز است.
اگرچه ابزارهای بالا می توانند به شما کمک کنند ، اما پلاگین های شما ممکن است برای عملکرد صحیح به اسکریپت های خاصی در سطح اولویت دیگری نیاز داشته باشند. در این صورت ، راه حل های فوق می توانند عملکرد چنین افزونه هایی را خراب کنند ، یا ممکن است رفتار غیرمنتظره ای داشته باشند.
ممکن است Google همچنان موارد خاصی مانند بهینه سازی تحویل CSS برای محتوای بالاتر از حد را به شما نشان دهد. WP Rocket به شما امکان می دهد تا تعمیر کنید که با اضافه کردن دستی CSS مهم برای نمایش منطقه برابر بالا در موضوع شما لازم است.
با این وجود ، فهمیدن کد کد CSS مورد نیاز برای نمایش بالاتر از محتوای برابر بسیار دشوار است.
امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه JavaScript و CSS مسدود کننده ارائه را در وردپرس رفع کنید. همچنین ممکن است بخواهید راهنمای نهایی ما را در مورد نحوه افزایش سرعت مشاهده کنید. عملکرد وردپرس برای مبتدیان و مقایسه ما با بهترین مدیریت میزبانی وردپرس شرکت ها.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/.