خطاهای قسمت Best Practices پیچ اسپید گوگل

خطاهای قسمت Best Practices پیچ اسپید گوگل

  • آموزشی, مقالات
خطاهای قسمت Best Practices پیچ اسپید گوگل

خطاهای قسمت Best Practices پیچ اسپید گوگل

خطاهای بخش Best Practices در پیج اسپید گوگل تقریبا شامل 11 مورد اصلی هستند. در ادامه خطاها را و راه‌حل‌های رفع آن را توضیح میدهیم.

مقالات مربتط:

افزایش سرعت سایت در PageSpeed ​​Insights

معرفی و آشنایی کامل با ابزارهای سئو

معرفی و رفع خطای Core Web Vitals

خطای Missing <!DOCTYPE html>

این خطا زمانی دیده میشود که در اول کد HTML اعلان DOCTYPE html وجود نداشته باشد یا قبل آن محتوا یا کامنتی قرار گرفته باشد. و نبود این اعلان باعث می‌شود مرورگر صفحه را در حالت رندر کند که با استاندارد های HTML و CSS سازگار نیست و باعث تغییر نحوه محاسبه ابعاد و بهم ریختگی ظاهر صفحه و اجرای جاوااسکریپت می‌شود.

راه حل رفع خطا

  • در بالاترین خط فایل HTML یا قالب اصلی سایت، دقیقاً این کد را بدون هیچ فاصله یا کاراکتر اضافی جایگذاری کنید
  • اگر از سیستم مدیریت محتوا (CMS) یا فریم‌ورک استفاده می‌کنید، در فایل قالب پایه مثل header.php در وردپرس یا base.html در Django این خط را اضافه کنید.

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

خطای Browser Console Errors

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

  • بارگذاری نشدن فایل‌های جاوااسکریپت یا CSS به دلایل مسیر نادرست یا دسترسی محدود
  • استفاده از توابع یا متدهای منسوخ یا اشتباه در کد جاوااسکریپت
  • اشکال در ارتباط با APIهای خارجی
  • خطاهای نحوی یا runtime در کدهای جاوااسکریپتی
  • استفاده از منابع یا عناصر HTML نادرست یا ناقص

راه حل رفع خطا

با فشردن کلیدهای F12 یا Ctrl+Shift+I (در اکثر مرورگرها) کنسول را باز کنید و به تب Console بروید.

تمام پیام‌های قرمز (Errors) را با دقت بررسی کنید. هر خطا معمولاً شامل آدرس فایل، شماره خط و توضیحی درباره مشکل است.

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

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

اگر درخواست‌های خارجی به API یا منابع دیگر خطا می‌دهند، مطمئن شوید URL ها صحیح و در دسترس هستند.

سیاست‌های CORS را بررسی کنید تا دسترسی‌ها به درستی تنظیم شده باشند.

از ابزارهای Debugger مرورگر برای دنبال کردن جریان اجرای کد و پیدا کردن محل دقیق خطا استفاده کنید.

در صورت استفاده از فریم‌ورک‌ها یا کتابخانه‌های جاوااسکریپت، نسخه‌های سازگار و به‌روز آن‌ها را به کار ببرید.

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

خطاهای قسمت Best Practices پیچ اسپید گوگل

خطای Incorrect Image Aspect Ratio

این خطا زمانی ظاهر میشود ابعاد تصویری که تعریف شده در کد HTML یا CSS با ابعاد تصویر واقعی تعریف شده تطابق نداشته باشد. برای مثال مرورگر هنگام خروجی گرفتن صفحه متوجه می‌شود که برای تصویر فضایی ک اختصاص یافته با اندازه واقعی تصویر هماهنگ نیست. این هماهنگ نبودن باعث می‌شود تجربه کاربری و ظاهر صفحه دچار مشکل شود. بنایراین:

هر تصویر یک ابعاد مشخص دارد که معمولاً بر اساس ابعاد پیکسل آن تعریف می‌شود  زمانی که در کد صفحه، مشخصات ابعاد (مثل ویژگی‌های width و height در تگ <img>) جوری تعیین شود که با ابعاد واقعی تصویر همخوانی نداشته باشد، مرورگر نمی‌تواند فضای مناسبی برای تصویر در صفحه ایجاد کند.

راه حل رفع خطا

  • استفاده از ویژگی‌های width و height متناسب با نسبت تصویر در تگ <img> حتماً مقدار width و height را متناسب با نسبت ابعاد واقعی تصویر مشخص کنید.
  • استفاده از CSS برای حفظ ابعاد تصویر اگر اندازه تصویر به صورت نسبی تغییر می‌کند، باید از تکنیک‌های CSS مثل aspect-ratio استفاده کنید تا ابعاد تصویر حفظ شود
  • تصاویر را قبل از بارگذاری بررسی کنید تا ابعاد واقعی آنها با مقادیری که در کد صفحه وارد می‌کنید همخوانی داشته باشد.

خطای JavaScript Libraries with Known Security

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

راه حل رفع خطا

  • شناسایی کتابخانه‌هایی که جاوااسکریپت استفاده می‌کند در نسخه فعلی خود مشکلات امنیتی دارند ک باعث تخریب و دزیده شدن اطلاعت سایت می‌شود. می‌توان از ابزارهایی مثل npm audit یا Snyk استفاده کرد
  • بعد از شناسایی باید آنهارا آپدیت کنید. و اگر نسخه امنی نبود دنبال جایگزین مناسب باشید.
  • از روش‌های ابزاری مثل npm audit یا Snyk تا اسیب پذیری کمتر شود.

خطای Missing Weak Content Security Policy (CSP) Against

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

راه حل رفع خطا

  • در هدر HTTP یا تگ <meta>، یک سیاست CSP تعیین کنید که فقط منابع مورد اعتماد اجازه بارگذاری و اجرا داشته باشند.
  • جاوااسکریپت‌های خطی و eval را حذف کنید یا به جای آن‌ها از فایل‌های جداگانه با آدرس‌های امن استفاده کنید.
  • اعمال CSP از طریق هدر HTTP بهتر از تگ meta است زیرا هدر HTTP قابل دستکاری کمتر است و قبل از بارگذاری صفحه اجرا می‌شود.
  • استفاده از ابزارهای آنلاین برای تولید CSP
    ابزارهایی مثل CSP Evaluator و Report URI می‌توانند کمک کنند تا سیاست مناسبی بسازید.
  • سیاست CSP را با توجه به تغییرات سایت و افزوده شدن منابع جدید، به‌روز نگه‌دار.

خطاهای قسمت Best Practices پیچ اسپید گوگل

خطای Does Not Use HTTP/2 for All Resources

این خطا زمانی ظاهر میشود که بعضی یا همه‌ی منابع صفحه مانند تصاویر، فونت‌ها، CSS از طریق HTTP/1.x بارگذاری می‌شوند در حالی که HTTP/2 برای آن‌ها فعال نیست. مزایای فنی HTTP/2 مثل اجرای هم‌زمان چند درخواست روی یک کانکشن، فشرده‌سازی هدرها و اولویت‌بندی جریان‌ها استفاده نمی‌شود و هر درخواست هزینهٔ اضافی دارد.باعث افزایش تأخیر، کندی بارگذاری و کاهش امتیاز در متریک‌هایی مثل LCP/FCP می‌شود.

راه حل رفع خطا

  • HTTP/2 را روی لبهٔ سایت فعال کنید
  • از TLS 1.3 استفاده کنید و ALPN را فعال نگه دارید تا negotiation برای HTTP/2 انجام شود. بدون TLS/ALPN، مرورگرها معمولاً HTTP/2 را رد می‌کنند.
  • CDN و دامنه‌های استاتیک را بررسی و پیکربندی کنید.
  • حذف تکنیک‌های قدیمی که با HTTP/2 تداخل دارند.

خطای Uses document.write()

این خطا زمانی ظاهر می‌شود که سایت از متد‌های قدیمی برای اضافه کردن محتوا یا اسکریپت استفاده می‌کند.

این روش document.write() در گذشته متداول بود اما امروز بخاطر ایجادمشکلات امنیتی قدیمی و باطل شده. وقتی مرورگر به document.write() می‌‌رسد بارگذاری صفحه متوقف می‌شود. این وقفه باعث کند شدن بارگذاری و از بین رفتن مزیت‌های بارگذاری غیر‌همرمان و حتی پاک شدم کامل محتوای صفحه می‌شود

راه حل رفع خطا

  • باید تمام استفاده‌های document.write() را با روش‌های مدرن جایگزین کرد.
  • قصد اضافه کردن HTML یا متن دارید، از متدهایی مثل element.insertAdjacentHTML() یا appendChild() استفاده کنید.
  • اگر می‌خواهید اسکریپت بارگذاری کنید، آن را به صورت داینامیک با createElement(‘script’) اضافه کرده و ویژگی async یا defer را فعال کنید.
  • تماً به پاک‌سازی محتوای ورودی و استفاده از Content Security Policy مناسب توجه کنید تا از حملات XSS جلوگیری شود

اطلاعات بیشتر:

معرفی و رفع خطای Core Web Vitals

معرفی جامع ابزار Google Page Speed

رفع ارورهای پیج اسپید گوگل

خطاهای قسمت Performance پیچ اسپید گوگل

خطای Does Not Use Passive Event Listeners for Scroll

این خطا زمانی ظاهر می‌شود که اتفاق‌های مربوط به اسکرول و لمس به‌صورت پیش‌فرض ثبت شده‌اند. مرورگر قبل از ادامهٔ رفتار پیش‌فرض منتظر می‌ماند تا تابع جاوااسکریپت اجرا شده event.preventDefault() را اجرا کند. این انتظار مانع از اجرای روان اسکرول می‌شود، باعث کندی، لگ در پیمایش و jank می‌گردد و به همین دلیل Lighthouse/PSI این مورد را به‌عنوان هشدار عملکردی گزارش می‌کند.

راه حل رفع خطا

  • تمام گوش‌دهنده‌های این نوع رویدادها را به‌صورت passive ثبت کنید. این کار با اضافه کردن { passive: true } هنگام افزودن event listener انجام می‌شود.
  • رفتار پیش‌فرض را متوقف کنید، بهتر است از CSS و ویژگی touch-action برای مدیریت رفتار لمسی استفاده کنید تا نیازی به preventDefault() نباشد.

خطاهای قسمت Best Practices پیچ اسپید گوگل

خطایUses Deprecated APIs (e.g., Application Cache)

این خطا زمانی ظاهر می‌شود که سایت شما از API‌های منسوخ‌شده‌ی مرورگر استفاده کند. یعنی رفتار ناپایدار در حالت آفلاین/بروزرسانی، مشکلات امنیتی و پشتیبانی ناقص در مرورگرها و به همین دلیل Lighthouse/PSI آن را اعلام می‌کند.

راه حل رفع خطا

  • حذفِ هر اثری از AppCache در HTML
  • جایگزینی با Service Worker + Cache API سرویس‌ورکر کنترل کامل‌تر و استراتژی‌های کش قابل تنظیم می‌دهد.
  • استفاده از ابزارهای آماده برای پیاده‌سازی امن و کامل‌تر از Workbox.
  • مدیریت نسخه و آپدیت‌ها از نام‌گذاری کش با ورژن استفاده کنید و در event activate کش قدیمی را پاک کنید.

حذف تمام آثار AppCache، پیاده‌سازی Service Worker + Cache API (یا استفاده از Workbox)، مدیریت نسخه/آپدیت و آزمایش روی HTTPS — با این کار هم مشکلdeprecated برطرف می‌شود و هم قابلیت آفلاین و کنترل کش سایت‌تان قابل‌اطمینان و قابل‌تنظیم خواهد شد

خطای Missing Miscellaneous User Experience Warnings

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

راه حل رفع خطا

  • مجوز یا تعامل حساس را فقط وقتی از کاربر بخواهید که واقعاً نیاز است.
  • Notification.permission و navigator.permissions.query() استفاده کنید تا از درخواست‌های تکراری و ناخواسته جلوگیری شود.
  • اگر کتابخانهٔ ثالثی مودال یا پنجرهٔ مزاحم می‌آورد، نسخهٔ غیرتهاجمی یا async آن را بگیر یا آن را داخل iframe ایزوله کنید.
نتیجه

به طور خلاصه، خطاهای بخش Best Practices در PageSpeed Insights نشان می‌دهند که سایت از نظر استانداردهای مدرن وب، امنیت و تجربه کاربری ضعف دارد؛ این ضعف‌ها می‌توانند باعث کاهش سرعت، ایجاد حفره امنیتی و افت رضایت کاربر شوند. رفع آن‌ها باعث می‌شود سایت سریع‌تر، امن‌تر و کاربرپسندتر شود.

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

شرکت تبلیغاتی ماکان، همراه مطمئن شما در مسیر طراحی و توسعه‌ی سایت‌های حرفه‌ای با وردپرس و رشد در دنیای دیجیتال.

جدیدترین مقالات

مقالات تصادفی