نحوه حذف Render-Blocking JS & CSS برای سرعت سایت

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

با این حال، این تم ها و افزونه ها برای کار کردن به جاوا اسکریپت (JS) و Cascading Style Sheets (CSS) نیاز دارند. . وردپرس آنها را به صورت خودکار در قالب فایل های اسکریپت ایجاد می کند. آنها اغلب ضعیف بهینه شده اند. به این ترتیب، آنها می توانند سرعت وب سایت شما را به میزان قابل توجهی کاهش دهند.

این ممکن است برای خوانندگان ناامید کننده باشد. بنابراین، در این راهنما، نحوه یافتن و حذف این اسکریپت‌های مسدودکننده رندر را بررسی می‌کنیم و به شما نشان می‌دهیم که چگونه سرعت بارگذاری وب‌سایت وردپرس خود را افزایش دهید.

اسکریپت‌های JS و CSS با مسدود کردن رندر چیست و چرا بد هستند؟

اکثر صفحات وب در اینترنت از سه جزء کلیدی تشکیل شده اند: جاوا اسکریپت، CSS، و زبان های نشانه گذاری فرامتن. HTML به عنوان پایه عمل می کند، در حالی که جاوا اسکریپت و CSS در آن تعبیه شده اند . با این حال، این روزها، قراردادن فراخوانی به اسکریپت های خارجی در سند HTML مرسوم تر شده است.

این اسکریپت‌ها در صفی قرار می‌گیرند که مرورگر وب شما از آن برای ارائه صفحه وب استفاده می‌کند. ساده ترین راه برای مشاهده اینکه یک صفحه وب از چه اسکریپت هایی بدون نگاه کردن به کد منبع استفاده می کند، دانلود آن از مرورگر وب (Ctrl + S) است. مرورگر وب سند HTML را همراه با پوشه ای با تمام (یا اکثر) اسکریپت ها، تصاویر و سایر فایل های مورد استفاده صفحه وب دانلود می کند.

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

اگر شکایاتی دریافت می‌کنید یا متوجه شده‌اید که وب‌سایت شما در ارائه محتوای خود مشکلاتی دارد، برای رفع آن دیر نیست.

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

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

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

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

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

1. ترتیب بارگذاری را بهینه کنید

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

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

2. کوچک کردن کد

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

افزونه‌ها و ابزارهایی مانند W3TC دارای ماژول‌هایی هستند که جاوا اسکریپت و CSS را در مضامین شما کوچک می‌کنند. از طرف دیگر، می‌توانید به صورت دستی کد اسکریپت خود را با یک ابزار آنلاین رایگان مانند JavaScript Minifier کوچک کنید.

3. از بارگذاری معوق و ناهمزمان جاوا اسکریپت

استفاده کنید

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

می توانید از ویژگی async برای بارگیری اسکریپت به صورت موازی با صفحه وب استفاده کنید و به محض در دسترس بودن آن را اجرا کنید. از طرف دیگر، می توانید از ویژگی defer برای به تعویق انداختن تجزیه اسکریپت ها استفاده کنید. این بدان معنی است که اسکریپت را به موازات صفحه وب نیز بارگیری می کند، اما تنها زمانی آن را اجرا می کند که مرورگر صفحه وب را تجزیه کند.

توصیه می‌کنیم که از ویژگی‌های async یا به تعویق انداختن در اسکریپت‌های مورد استفاده برای ارائه و نمایش عناصر بصری استفاده نکنید. معادل کلمه کلیدی جاوا اسکریپت برای این ویژگی ها، کلیدواژه های async و wait هستند. می‌توانید از آنها برای جاوا اسکریپت های خود را به صورت ناهمزمان تر بارگیری کنید بدون ویرایش برچسب های HTML در صفحه وب خود.

4. عناصر بصری جاوا اسکریپت را با CSS3

جایگزین کنید

در گذشته، CSS به اندازه امروز همه کاره نبود. برای مثال، CSS 1.0 و 2.0 فاقد ابزارهای UI مانند کنترل‌های اصلی و لغزنده بودند.

سپس CSS 3 آمد. رنگ‌های جدید، سایه‌های جعبه، کدورت و غیره را ارائه می‌دهد. جاوا اسکریپت برای اضافه کردن کنترل‌های پیچیده رابط کاربری عالی است. با این حال، جاوا اسکریپت نسبت به CSS از نظر منابع سنگین‌تر است.

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

5. تمام اسکریپت های غیر ضروری را حذف کنید

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

بنابراین بهترین راه برای بهینه سازی سرعت وب سایت شما حذف تمام اسکریپت های کم استفاده است. شما باید تجزیه و تحلیل کنید که کدام اسکریپت ها کاملا غیر ضروری هستند و آنها را حذف کنید. دوباره، می‌توانید از تب پوشش Chrome DevTools یا GTmetrix برای پیدا کردن اسکریپت‌های کم استفاده در صفحه وب خود استفاده کنید و سپس آنها را حذف کنید.

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

6. استفاده از افزونه ها برای بهینه سازی وب سایت وردپرس

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

برخی از بهترین افزونه ها برای بهینه سازی اسکریپت عبارتند از:

• موشک WP: این یکی از محبوب ترین افزونه ها برای بهینه سازی وب. می تواند به طور خودکار تشخیص دهد که کدام اسکریپت ها مشکل دارند و آنها را برای شما برطرف کند. می‌توانید از آن برای ذخیره‌سازی سریع، تفکیک، فشرده‌سازی و کوچک‌سازی استفاده کنید.
• بهینه سازی خودکار: این می تواند به تعویق بیفتد و حذف کند اسکریپت های غیر ضروری، CSS درون خطی را یکپارچه کنید و اسکریپت ها، HTML و تصاویر را کوچک کنید. Autoptimize از طریق یک API باز و گزینه های پیشرفته بسیار قابل تنظیم است.
• حافظه کل W3 : استفاده از این افزونه نیاز به کمی کار دارد. قبل از حذف یا ویرایش، باید اسکریپت ها را به صورت دستی ردیابی و شناسایی کنید. در بیشتر موارد، این افزونه از قبل با بسته وردپرس شما در دسترس است.
• Async Javascript: یک باز پلاگین منبع ارائه شده توسط وردپرس. به شما امکان می دهد جاوا اسکریپت مسدود کننده رندر را شناسایی کنید و سپس آن را به تعویق بیندازید یا به صورت ناهمزمان بارگیری کنید.

پس چرا از ابتدا افزونه ها را توصیه نکردیم؟ متأسفانه برخی از این پلاگین ها برای شما هزینه زیادی دارند. به عنوان مثال، Autoptimize 49 دلار در سال هزینه دارد. اگرچه این هزینه معقولی است، اما ممکن است برای افرادی که در حال حاضر مقدار زیادی پول برای میزبانی و سایر برنامه‌ها و افزونه‌ها پرداخت می‌کنند، غیر ایده‌آل باشد.

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