اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
رفع خطای Defer parsing of JavaScript در GTmetrix
یکی از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix با آن برخورد می‌کنیم، با عنوان Defer parsing of JavaScript و Prefer asynchronous resources به ما نمایش داده می‌شود که هر دو مربوط به فایل‌های جاوا اسکریپت است و برای حل هر دو خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس راهکار یک‌سانی وجود دارد. وقتی با این دو ارور در جی تی متریکس مواجه می‌شوید، به این معنی است که فایل‌های JS در سایت شما به صورت بهینه استفاده نشده و باعث شده که مدت زمان لود سایت بیشتر از حالت عادی شود. منظور از بهینه‌سازی این است که فایل‌ها در جایی شروع به لود شدن می‌کنند که باعث می‌شود مدت زمان لود صفحه بالا برود، در صورتی که اگر فایل‌ها را بذاریم برای مراحل آخر و در فوتر اجرایشان کنیم روی لود سایت تاثیر بدی نخواهند گذاشت.
هما‌ن‌طور که می‌دانید، در تمامی سایت‌ها از فایل‌های جاوا اسکریپت برای اجرای برخی کارها در مرورگر استفاده می‌شود و این فایل‌ها هم معمولاً نسبت به سایر فایل‌هایی که به صورت کدنویسی شده هستند حجم بیشتری دارند. مرورگر برای آن که بتواند این فایل‌ها را اجرا کند، باید منتظر بماند تا اول این فایل‌ها اجرا شوند و سپس متناسب با همین محتوای سایت رو هم به مرور بارگذاری کرده و نمایش دهد. مشکل دقیقاً در این زمان پیش می‌آید که بخاطر قرار گرفتن این فایل‌ها در Header باعث می‌شود که مرورگر ابتدا شروع به دانلود و پردازش این فایل‌ها کند و سپس با رفتن به خطوط بعدی سایر قسمت‌های یک سایت را که شامل محتوای آن است، نمایش دهد. برای همین تا زمانی که فایل‌های JS لود شوند، مرورگر همچنان در حال لود صفحه است و همین موضوع باعث می‌شود که کاربران فکر کنند این سایت با کندی کار می‌کند. برای همین بهترین راه‌کاری که برای حل این مشکل وجود دارد، این است که فایل‌های JS را در فوتر سایت اجرا کنیم.
در این حالت ابتدا مرورگر میاد و صفحه رو به صورت کامل به کاربر نمایش می‌دهد و وقتی به بخش کدهای جاوا اسکریپت که حالا در فوتر قرار گرفته رسید، متناسب با دستورت برنامه نویسی که این فایل‌ها دارند سایر بخش‌های سایت رو هم نمایش می‌دهد. طی یک آزمایشی که گوگل در سال ۲۰۱۱ انجام داده، برای لود هر ۱ کیلوبایت از یک فایل جاوا اسکریپت به طور میانگین ۱ میلی ثانیه زمان لازم است تا هم لود شود و هم خوانده شود. به همین دلیل اگر مجموع فایل‌های جاوا اسکریپت روی ۱۰۰ کیلوبایت قرار داشته باشند که البته بیشتر است، مدت زمان ۲۰۰ میلی ثانیه صرف می‌شود که شاید به صورت عددی زیاد به نظر نیاید، اما روی سرعت لود سایت تاثیر زیادی خواهد داشت. هر دو این خطاها با استفاده از راهکارهای مشترکی قابل حل شدن هستند و اگه یکی از این خطاها رو برطرف کنید به صورت خودکار اونیکی هم رفع خواهد شد که در ادامه به معرفی چند روش برای این کار می‌پردازیم.
قرار دادن فایل‌های JS در فوتر اگر سایت شما به صورت HTML طراحی شده می‌توانید با انتقال کدهایی که مربوط به لود فایل جاوا اسکریپت هستند در فوتر سایت کاری کنید که این فایل‌ها در آخرین مرحله از لود یک صفحه شروع به لود شدن و پردازش در مرورگر کنند. برای همین از قرار دادن این کدها در بخش head جلوگیری کنید. برای انجام این کار کافیه کدهای JS که با تگ <script> در صفحات HTML فراخوانی می‌شوند را در فوتر، قبل از تگ بسته </body> قرار دهید تا ابتدا متن‌ها، تصاویر، فونت‌ها و CSS ها لود شوند و سپس در مرحله آخر فایل‌های جاوا اسکریپت شروع به لود شدن کنند. البته اگر از سیستم مدیریت محتوا مثل وردپرس یا جوملا استفاده می‌کنید این روش پاسخگو نیست. چرا که برخی افزونه‌ها هستند که داری فایل JS هستند و به صورت خودکار در هدر قرار می‌گیرند. برای اینکه بتونید فایل این افزونه‌ها را در فوتر اجرا کنید، باید کدها را به فوتر اضافه کنید و سپس بخش کدنویسی شده لود فایل رو از داخل خود افزونه بردارید. این کار برای زمانی که افزونه‌ای آپدیت می‌شود باز هم باید تکرار شود، زیر بعد از آپدیت شدن کلیه فایل‌های افزونه آپدیت شده و تغییراتی که ایجاد می‌کنید از بین میرن. بخاطر همین موضوع باید از افزونه‌ها برای این کار کمک بگیرید که موارد زیر یکی از بهترین‌ها هستند:
- صفحات فرود سایت خود را بهینه‌سازی کنید
- افزونه wp deferred javascripts وردپرس
- افزونه autoptimize وردپرس
- افزونه Async JavaScript وردپرس
- افزونه Speed Booster Pack وردپرس
- پلاگین Javascript Async and Defer جوملا
- پلاگین JCH Optimize جوملا
- پلاگین scriptsdown جوملا
استفاده از موارد defer و async
استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد. وقتی از این دو اتربیوت استفاده کنید، به مرورگر می‌گویید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نماند و هم‌زمان با این که داره فایل JS را بارگذاری می‌کند سایر فایل‌ها و صفحه HTML را هم بارگذاری کند که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که با هم دارند در این است که اگر از حالت defer استفاده کنید، مرورگر منتظر می‌ماند تا صفحه HTML هم بارگذاری می‌شود و بعد شروع به اجرای فایل JS کند اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن می‌کند و دیگر منتظر نمی‌ماند که بعد از لود کامل صفحه HTML اجرا شود! در نتیجه بهتر است که از گزینه async استفاده کنید.
در مقاله بعدی به بررسی ادامه این روش‌های و سایر خطاهای GTmetrix می‌پردازیم.
