رفع سرعت صفحه گوگل حذف رندر-مسدود کردن جاوا اسکریپت و CSS در محتوای بیش از حد

تست Google PageSpeed ​​[1] حذف رندر مسدود کردن جاوا اسکریپت و CSS در محتوای سطحی بالاتر پیشنهاد می کند که فایل های JS و CSS سایت شما بعد از اینکه HTML به طور کامل بارگذاری شد ارائه شود - بنابراین، بارگذاری HTML خود را متوقف نکنید آنها را دانلود کنید.


رفع انسداد Javascript و CSS را انجام دهید

تست  Google PageSpeed   ​​[1] حذف رندر مسدود کردن جاوا اسکریپت و CSS در محتوای سطحی بالاتر پیشنهاد می کند که فایل های JS و CSS سایت شما بعد از اینکه HTML به طور کامل بارگذاری شد ارائه شود - بنابراین، بارگذاری HTML خود را متوقف نکنید آنها را دانلود کنید.

[1] - PageSpeed ​​Insights - developers.google.com
تعریف اسکریپت مسدود کننده رندر: اسکریپت هایی که قبل از تجزیه کامل HTML DOM بارگیری می شوند. به عنوان مثال ، اسکریپت های موجود در سرصفحه یا درون محتوا ، بدون هیچ دستورالعمل خاصی برای مرورگرها ، برای به تأخیر انداختن بارگذاری اسکریپت تا بعد از رنگ آمیزی HTML.

JavaScript و CSS مسدودکننده رندر را در محتوای بالاتر از حد حذف کنید: نحوه اصلاح آن را نشان دهید

  1. از یک سیستم خارجی بخواهید وب سایت خود را برای شما بهینه کند
  2. از CDN استفاده کنید که تمام بهینه سازی های احتمالی را از طرف شما انجام دهد ، از جمله سه بهینه سازی زیر که برای رفع از بین بردن منابع انسداد رندر لازم است:
  3. به تعویق انداختن پرونده های جاوا اسکریپت
  4. CSS را پس از بارگذاری HTML بارگیری کنید
  5. از یک افزونه وردپرس استفاده کنید

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

هیچ راه حلی برای حذف منابع انسداد رندر در کد htaccess وجود ندارد زیرا این مسئله مربوط به DOM است ، به معنی محتوای وب سایت و ترتیب بارگیری منابع شامل ، مانند Javascript و CSS ، اما نه تنها. این موارد را نمی توان در Htaccess فعال کرد ، بلکه فقط در محتوای HTML DOM وجود دارد.

اگر این مشکلات را برای دسک تاپ حل کنید ، همزمان منابع مسدود کننده رندر را برای موبایل از بین خواهید برد زیرا هر دو دقیقاً یکسان هستند!

Did you know that you can even have all these steps executed automatically for you by using an external  شتاب دهنده سرعت سایت   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

بارگیری پرونده های Javascript

برای بارگذاری فایل های JS شما [2] شما می توانید async یا اضافه کردن دستورالعمل به لینک های اسکریپت خود را اضافه کنید. Async تضمین نمی کند که آنها به همان ترتیب بارگذاری شوند - بنابراین اگر شما چندین اسکریپت داشته باشید که باید یکی پس از دیگری اجرا شود، ترجیح دادن بازخوانی ترجیح داده می شود تا ترتیب را تضمین کنید:

[2] - حذف JavaScript مسدود کننده رندر | بینش PageSpeed ​​| برنامه نویسان خوب - developers.google.com

CSS را بعد از بار HTML بارگیری کنید

برای اینکه CSS پس از انتقال کامل HTML کامل بارگذاری شود، گوگل [3] این قطعه کد را برای اضافه کردن در انتهای HTML خود، به عنوان مثال پس از بستن تگ پایینی و قبل از بستن تگ، پیشنهاد می کند:

[3] - تحویل CSS را بهینه کنید | بینش PageSpeed ​​| برنامه نویسان خوب - developers.google.com

به منظور بهینه سازی وب سایت شما، ایده خوبی است که کد CSS استفاده نشده را حذف کنید، عملیات که می تواند خسته کننده باشد، اگر شما در طراحی وب استفاده نکنید. اگر شما خودتان تم وب سایت خود را ایجاد نکرده اید، ممکن است از یک سیستم خارجی استفاده کنید تا کد CSS استفاده نشده را بر روی صفحات خود از طرف خود حذف کنید، مانند جهش EZOIC به عنوان مثال، نسخه جدید (و کاملا رایگان) سایت شگفت انگیز خود را سرعت شتاب دهنده

تست سرعت سایت Google را پشت سر بگذارید!

این اجازه داد که من آزمون  Google PageSpeed   ​​[1] را منتقل کنم. از بین بردن رندرینگ-مسدود کردن جاوا اسکریپت و CSS در محتوای بالاتر (همراه با دست کشیدن مرورگر Leverage [4]) در یک وب سایت، از 51 نمره در تلفن همراه ( شکل 1) 72 (شکل 2)، و از 59 (شکل 3) تا 79 روی دسکتاپ (شکل 4).

[4] - برطرف کردن cache مرورگر اهرم Google PageSpeed ​​در htaccess - یوان Bierling ، SAP بین المللی / مشاور وب - www.ybierling.com

چگونگی حذف منابع رندر-مسدود کردن در وردپرس

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

سپس به گزینه هایی بروید که برای آن شما باید یک مدیر باشید و به گزینه های JetPack> Writing> Performance and Speed ​​بروید. چک کنید Enable accelerator site، سرعت بار بارگذاری تصویر را افزایش دهید، سرعت بار بارگذاری فایل را افزایش دهید، و بارگذاری تنبل را برای تصاویر.

استاد ایجاد وب سایت: اکنون ثبت نام کنید!

حضور دیجیتالی خود را با دوره جامع ایجاد وب سایت ما تغییر دهید - سفر خود را برای تبدیل شدن به یک متخصص وب امروز شروع کنید!

ثبت نام در اینجا

حضور دیجیتالی خود را با دوره جامع ایجاد وب سایت ما تغییر دهید - سفر خود را برای تبدیل شدن به یک متخصص وب امروز شروع کنید!

این باعث می شود که منابع رندر سازی شده در WordPress و صفحات بارگذاری سریعتر با اجازه دادن به JetPack برای بهینه سازی تصاویر شما و ارائه تصاویر و فایل های استاتیک (مانند CSS و جاوا اسکریپت) از شبکه جهانی سرورها، از بین بروند.

نحوه حذف رندر-مسدود کردن جاوا اسکریپت و CSS در وردپرس

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

بارگذاری تنبل تصاویر: تصاویر وب سایت تنها زمانی درخواست می شود که کاربر در صفحه وب حرکت کند و ممکن است آنها را نمایش دهد

برای پیاده سازی بارگیری تنبل تصاویر بر روی وب سایت های خود، به سادگی مقادیر تنبل را به ویژگی های بارگذاری تصاویر وب سایت خود اضافه کنید و مرورگرهای اخیر متوجه خواهند شد که این تصاویر فقط باید درخواست و بارگذاری شوند اگر نمایش داده شوند، به این معنی که کاربر به پایین حرکت می کند متغیرهایی تصویر

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
LAZY LOADING - عملکرد وب - شبکه توسعه دهنده موزیلا

در بالای آن، بارگذاری تنبل نیز با Iframes کار می کند و یک پیاده سازی مهم برای از بین بردن منابع مسدود کردن رندر از صفحات وب شما است.

هنگامی که منابع مسدود کننده رندر دستورالعمل هایی برای بارگذاری پس از محتوای اصلی، به این معنی که HTML DOM، شما در حال حاضر بسیاری از امتیازات در آزمون فانوس Google، آزمون صفحه نمایش سرعت، یا Google Core Web Vitals کسب خواهید کرد.

یک سیستم خارجی داشته باشید که وب سایت خود را برای شما بهینه کند

آیا می دانید بدون هیچ تلاش زیادی از سایت خود - به جز ثبت نام در یک آزمایش رایگان و تغییر DNS خود ، می توانید تمام مشکلات  Google PageSpeed   ​​را از طرف شما حل کنید؟

با استفاده از پلت فرم Ezoic Site Speed ​​Accelerator ، کلیه مسائل معمول صفحه PageSpeed ​​توسط سیستم آنها حل می شود ، که واسطه بین وب سایت شما و بازدید کنندگان خواهد بود. آنها قبل از نمایش آن به بازدید کننده خود ، صفحه وب را برای شما بهینه می کنند.

در آوریل سال 2021، سرعت شتاب دهنده سرعت سایت Ezoic پرداخت می شود و به وب سایت ها کمک می کند تا به وب سایت های اصلی وب سایت های سبز دسترسی پیدا کنند!

با ثبت نام آزمایشی رایگان در پلت فرم Ezoic سبز شوید و آن را برای خودتان امتحان کنید - آنها باعث می شوند وب سایت شما طی چند روز به بالاترین استانداردهای بهینه سازی سرعت صفحه برسد: ارائه تصاویر وب نسل بعدی ، ارائه CSS و JavaScript با حذف CSS بلا استفاده و JS ، تصاویر با بار تنبلی ، تغییر اندازه تصاویر ، حافظه پنهان صفحات سایت ، بهینه سازی قلم ها ، پیش اتصال به تمام سایت های درج شده خود و موارد دیگر.

کارت اعتباری لازم نیست - تنها کاری که باید انجام دهید این است که بصورت رایگان ثبت نام کنید و امتحان کنید. به علاوه ، اگر وب سایت شما از تبلیغات نمایشگر درآمد کسب می کند ، علاوه بر اینکه وب سایت شما خیلی سریع تر می شود ، آنها همچنین می توانند با بهینه سازی تبلیغات خود با یادگیری ماشین و هوشمند سازی مصنوعی پیشرفته ، چندین برابر بیشتر از آنچه در Google AdSense انجام می دهید ، کسب کنند.

سوالات متداول

چگونه می توان جاوا اسکریپت و CS را در محتوای بالاتر از آن از بین برد؟
برای از بین بردن JavaScript و CSS مسدود کننده رندر برای محتوای بالاتر ، باید اطمینان حاصل کنید که پرونده های JS و CSS سایت شما پس از بارگیری کامل HTML بارگیری می شوند. این به معنای مکث فرآیند بارگیری HTML برای بارگیری این پرونده ها نیست. می توانید پرونده های JavaScript را با ویژگی Async یا Defer به تعویق بیندازید و برای CSS می توانید از کد خاص برای بارگیری آن پس از HTML استفاده کنید. یک سیستم بهینه سازی خارجی مانند Ezoic همچنین می تواند به طور خودکار این کار را انجام دهد.
چگونه توسعه دهندگان وب می توانند به توصیه Google Pagespeed برای از بین بردن JavaScript و CSS مسدود کننده رندر بپردازند؟
توسعه دهندگان وب می توانند سایت خود را با کوچک کردن فایل های JavaScript و CSS ، با استفاده از بارگذاری ناهمزمان برای JavaScript ، ورود CSS بحرانی به طور مستقیم در HTML ، بهینه سازی کنند و بارگذاری CSS غیر بحرانی و پرونده های JavaScript را انجام دهند. اجرای این استراتژی ها می تواند به طور قابل توجهی زمان بارگذاری و نمرات Pagespeed را بهبود بخشد.

نمره فانوس کروم کامل: چه اتفاقی می افتد؟


Yoann Bierling
درباره نویسنده - Yoann Bierling
Yoann Bierling یک متخصص انتشارات وب و مشاوره دیجیتال است و از طریق تخصص و نوآوری در فناوری ها تأثیر جهانی می کند. او در مورد توانمندسازی افراد و سازمانها برای شکوفایی در عصر دیجیتال ، وی را به ارائه نتایج استثنایی و رشد رشد از طریق ایجاد محتوای آموزشی سوق می دهد.

استاد ایجاد وب سایت: اکنون ثبت نام کنید!

حضور دیجیتالی خود را با دوره جامع ایجاد وب سایت ما تغییر دهید - سفر خود را برای تبدیل شدن به یک متخصص وب امروز شروع کنید!

ثبت نام در اینجا

حضور دیجیتالی خود را با دوره جامع ایجاد وب سایت ما تغییر دهید - سفر خود را برای تبدیل شدن به یک متخصص وب امروز شروع کنید!




نظرات (8)

 2018-08-19 -  quranapk
عاشق خواندن مطالب خود هستید و مرتباً پست می کنید - این به من کمک می کند CSS مسدود کردن رندر را برطرف کنم
 2018-09-23 -  Monica
بنابراین ما این کار را انجام می دهیم ، بسیار خوب است که بدانیم چگونه می توان منابع جلوگیری از ارائه را از بین برد
 2018-09-25 -  Van
عالی ، دقیقاً همان چیزی است که به دنبال آن می گشتم ، اکنون آماده حذف منابع مسدود کننده ارائه در تلفن همراه هستم
 2018-11-03 -  utumikaji0
شگفت آور ، اکنون وقت آن است که من آن را امتحان کنم و منابع رفع انسداد رندر را برطرف کنم!
 2019-01-12 -  Leo
نمی دانم چگونه از شما تشکر کنم ، اما این نابغه ای ناب است ، متشکرم - در وردپرس کار کرد تا منابع مسدود کننده ارائه را حذف کند
 2019-04-21 -  Ludanulema
سلام ، من مقاله شما را دیدم و به من کمک کرد تا مشکل را از بین ببرم که منابع رندر را در PHP حذف کنم ، متشکرم
 2019-06-12 -  animeg2Q
من هم اکنون آن را امتحان می کنم ، متشکرم برای به اشتراک گذاشتن این راه حل رفع منابع جلوگیری از رندر
 2019-07-02 -  Gasfackele
این برای من خوب کار کرد ، نیازی به جستجو بیشتر برای از بین بردن منابع ممانعت از ارائه در وب سایت HTML نیست

پیام بگذارید