آموزش رفع ارورهای سرچ کنسول گوگل – لیست 41 خطاهای سرچ کنسول

رفع ارورهای سرچ کنسول

در دنیای دیجیتال امروز، بهینه‌سازی وب‌سایت‌ها برای موتورهای جستجو و بهبود تجربه کاربری از اهمیت بالایی برخوردار است. یکی از ابزارهای قدرتمندی که به مدیران وب‌سایت‌ها کمک می‌کند تا مشکلات و خطاهای موجود در سایت‌های خود را شناسایی و رفع کنند، سرچ کنسول گوگل (Google Search Console) است. این ابزار به شما امکان می‌دهد تا مشکلات و ارورهای موجود در وب‌سایت خود را مشاهده و برای بهبود آن‌ها اقدام کنید. یکی از چالش‌های رایج، رفع خطاهای سرچ کنسول است که به طور مستقیم بر روی عملکرد سایت و رتبه‌بندی آن در نتایج جستجو تأثیر می‌گذارد.

در صورت نیاز به هرگونه مشاوره در زمینه امنیت سایت، طراحی سایت در شیراز و یا خدمات سئو سایت در شیراز میتوانید با تیم مجرب بهترین شرکت طراحی سایت در شیراز شیراز وب تماس بگیرید. ما در کنار شما هستیم.

رفع ارورهای سرچ کنسول گوگل می‌تواند بهبود قابل توجهی در سرعت بارگذاری صفحات و تجربه کاربری ایجاد کند. این فرآیند شامل شناسایی مشکلاتی است که توسط ابزارهایی مانند لایت هاوس (Lighthouse) شناسایی می‌شوند. لایت هاوس ابزاری است که توسط گوگل توسعه یافته و برای ارزیابی عملکرد، دسترسی‌پذیری، و SEO صفحات وب مورد استفاده قرار می‌گیرد. حل مشکل لایت هاوس و رفع ارورهای light house از جمله اقداماتی است که به بهبود نمره عملکرد سایت کمک می‌کند.

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

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

سفارش طراحی سایت

به منظور سفارش طراحی سایت و یا سئو سایت میتوانید از طریق دکمه واتس اپ و یا شماره 09396572475 با ما تماس بگیرید.

09396572475

Google Search Console – سرچ کنسول گوگل

توضیحات کلی: Google Search Console (سرچ کنسول گوگل) ابزاری رایگان از طرف گوگل است که به وب‌مسترها و صاحبان وب‌سایت‌ها کمک می‌کند تا عملکرد وب‌سایت خود را در نتایج جستجوی گوگل پایش کنند و بهبود ببخشند. این ابزار به کاربران امکان می‌دهد تا مشکلات فنی، خطاهای سایت، و بهینه‌سازی‌های مختلف را شناسایی و رفع کنند.

ویژگی‌ها و امکانات: یکی از مهم‌ترین قابلیت‌های سرچ کنسول گوگل، امکان مشاهده وضعیت ایندکس شدن صفحات وب‌سایت است. با استفاده از این ابزار، می‌توانید بفهمید که کدام صفحات شما توسط گوگل ایندکس شده‌اند و کدام صفحات نیاز به توجه بیشتری دارند. همچنین، گزارش‌های مفصلی از نحوه عملکرد وب‌سایت در جستجوهای گوگل، شامل کلمات کلیدی که کاربران برای یافتن سایت شما استفاده کرده‌اند، میانگین موقعیت صفحات در نتایج جستجو، و نرخ کلیک (CTR) ارائه می‌دهد.

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

سرویس Lighthouse گوگل

توضیحات کلی: Lighthouse (لایت هاوس) ابزاری متن‌باز از گوگل است که به توسعه‌دهندگان وب کمک می‌کند تا کیفیت صفحات وب خود را از جنبه‌های مختلف ارزیابی و بهبود ببخشند. این ابزار شامل چندین تست مختلف است که جنبه‌های عملکردی، دسترسی‌پذیری، سئو، و بهترین شیوه‌های وب را ارزیابی می‌کند.

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

حل مشکلات و بهبود عملکرد: حل مشکل لایت هاوس و رفع ارورهای lite house می‌تواند تاثیر مثبتی بر عملکرد کلی وب‌سایت شما داشته باشد. برای هر مشکلی که لایت هاوس شناسایی می‌کند، این ابزار توصیه‌ها و راهکارهای عملی برای رفع آن ارائه می‌دهد. این توصیه‌ها شامل بهینه‌سازی تصاویر، کاهش زمان بارگذاری صفحات، بهبود کدهای CSS و JavaScript و موارد دیگر است.

اصلی ترین خطاهای سرچ کنسول

توضیحات کلی: Core Web Vitals مجموعه ای از معیارهای کارکردی وب سایت است که گوگل برای ارزیابی تجربه کاربری صفحات وب معرفی کرده است. این معیارها شامل سه جنبه اصلی هستند: Largest Contentful Paint (LCP)، First Input Delay (FID)، و Cumulative Layout Shift (CLS). هر یک از این معیارها به یک جنبه خاص از تجربه کاربری مربوط می‌شود.

خطای Largest Contentful Paint (LCP)

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

دلیل های رایج خطای LCP و راه حل های ساده برای رفع آن:

1. تصاویر بزرگ و سنگین

مشکل: تصاویر بدون فشرده سازی یا با فرمت های قدیمی (مانند JPEG یا PNG).

راه حل:

• تصاویر را بهینه کنید و از ابزارهایی مثل TinyPNG یا ImageOptim برای فشرده سازی استفاده کنید.
• تصاویر را با فرمت های جدید مثل WebP ذخیره کنید که حجم کمتری دارند و سریع تر لود می شوند.
• از ویژگی Lazy Loading برای بارگذاری تدریجی تصاویر استفاده کنید.

2. لود کند فایل های CSS

مشکل: فایل های CSS بزرگ باعث کندی در رندر صفحه می شوند.

راه حل:

• فایل های CSS را فشرده کنید. ابزارهای آنلاین مثل CSS Minifier یا افزونه های وردپرس مثل Autoptimize کمک می کنند.
• فقط کدهای ضروری را در ابتدای صفحه بارگذاری کنید و بقیه را به تأخیر بیندازید (Critical CSS).

3. سرعت پایین سرور

مشکل: سرور شما پاسخ دهی کندی دارد.

راه حل:

• از سرویس دهنده های سریع تر یا هاست های مخصوص وردپرس استفاده کنید.
• از CDN (شبکه توزیع محتوا) مانند Cloudflare استفاده کنید تا محتوای سایت از نزدیک ترین سرور به کاربر ارائه شود.

4. جاوااسکریپت سنگین

مشکل: فایل های جاوااسکریپت بزرگ و غیرضروری باعث تأخیر در لود محتوا می شوند.

راه حل:

• جاوااسکریپت را فشرده کنید و فایل های غیرضروری را حذف کنید.
• از تکنیک Deferred Loading استفاده کنید تا جاوااسکریپت بعد از بارگذاری اصلی صفحه اجرا شود.

5. فونت ها و آیکون ها

مشکل: فونت های سفارشی یا آیکون های بزرگ باعث تأخیر در نمایش می شوند.

راه حل:

• از ویژگی font-display: swap; برای بارگذاری سریع تر فونت ها استفاده کنید.
• فقط از آیکون ها و فونت های ضروری استفاده کنید.

گام به گام برای حل LCP:

تحلیل مشکل:

• از ابزار PageSpeed Insights یا Lighthouse استفاده کنید تا بزرگ ترین المان صفحه را پیدا کنید.

بهینه سازی تصاویر:

• ابعاد دقیق و فرمت مناسب (WebP) برای تصاویر مشخص کنید و فشرده سازی انجام دهید.

فایل های CSS و JS:

• آن ها را فشرده کنید و به تأخیر بیندازید.

سرعت سرور:

• از CDN استفاده کنید یا به یک هاست پرسرعت تر منتقل شوید.

ابزارهای پیشنهادی:

• PageSpeed Insights: برای شناسایی دقیق مشکلات.
• GTmetrix: برای تحلیل LCP.
• ShortPixel یا Smush: برای بهینه سازی تصاویر در وردپرس.

خطای First Input Delay (FID)

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

دلیل های رایج خطای FID و راه حل های ساده برای رفع آن:

1. جاوااسکریپت سنگین و غیربهینه

• مشکل: فایل های جاوااسکریپت بزرگ یا کدهای ناکارآمد باعث می شوند مرورگر زمان زیادی را صرف پردازش آن ها کند و به تعاملات کاربر پاسخ ندهد.
• راه حل:
  • فایل های جاوااسکریپت را فشرده کنید (Minify) و کدهای غیرضروری را حذف کنید.
  • از Deferred Loading یا Async Loading استفاده کنید تا جاوااسکریپت بعد از بارگذاری صفحه اجرا شود.
  • کدهای حیاتی را اولویت بندی کنید و بقیه را به تاخیر بیندازید.

2. پردازش های طولانی در مرورگر

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

3. لود بیش از حد منابع

• مشکل: اگر تعداد زیادی فایل جاوااسکریپت یا CSS به صورت همزمان بارگذاری شوند، مرورگر زمان زیادی را صرف پردازش آن ها می کند.
• راه حل:
  • فایل های غیرضروری را حذف کنید.
  • از Lazy Loading برای بارگذاری تدریجی منابع استفاده کنید.
  • فایل های CSS و جاوااسکریپت را با هم ترکیب کنید (Bundling) تا تعداد درخواست ها کاهش یابد.

4. سرور کند یا پاسخ دهی ضعیف

• مشکل: اگر سرور شما کند باشد یا پاسخ دهی ضعیفی داشته باشد، ممکن است فایل های جاوااسکریپت دیر بارگذاری شوند.
• راه حل:
  • از یک هاست پرسرعت یا CDN (شبکه توزیع محتوا) استفاده کنید.
  • کش های مرورگر و سرور را فعال کنید تا منابع سریع تر بارگذاری شوند.

گام به گام برای بهبود FID:

1. شناسایی مشکل:
   • از ابزارهایی مثل Google PageSpeed Insights یا Lighthouse استفاده کنید تا ببینید کدام بخش های سایت باعث تاخیر در FID می شوند.
2. بهینه سازی جاوااسکریپت:
   • فایل های جاوااسکریپت را فشرده کنید و از Deferred Loading یا Async Loading استفاده کنید.
   • کدهای غیرضروری را حذف کنید و از Web Workers برای پردازش های سنگین استفاده کنید.
3. کاهش حجم منابع:
   • فایل های CSS و جاوااسکریپت را ترکیب کنید و از Lazy Loading استفاده کنید.
   • تعداد درخواست ها را کاهش دهید.
4. بهبود سرعت سرور:
   • از یک هاست پرسرعت یا CDN استفاده کنید.
   • کش های مرورگر و سرور را فعال کنید.

ابزارهای پیشنهادی:

• Google PageSpeed Insights: برای شناسایی مشکلات FID.
• Lighthouse: برای تحلیل دقیق عملکرد سایت.
• Webpack یا Gulp: برای فشرده سازی و بهینه سازی فایل های جاوااسکریپت و CSS.
• Cloudflare: برای استفاده از CDN و بهبود سرعت سرور.

خطای Cumulative Layout Shift (CLS)

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

دلیل های رایج خطای CLS و راه حل های ساده برای رفع آن:

1. تصاویر بدون ابعاد مشخص

• مشکل: اگر تصاویر بدون عرض و ارتفاع مشخص باشند، پس از بارگذاری باعث جابه جایی سایر عناصر صفحه می شوند.
• راه حل:
  • برای همه تصاویر، عرض (width) و ارتفاع (height) مشخص کنید.
  • از ویژگی aspect-ratio در CSS استفاده کنید تا نسبت ابعاد تصاویر حفظ شود.

2. تبلیغات، iframeها یا عناصر داینامیک

• مشکل: تبلیغات، iframeها یا عناصری که بعد از بارگذاری صفحه اضافه می شوند، می توانند باعث جابه جایی محتوا شوند.
• راه حل:
  • فضای کافی برای این عناصر در نظر بگیرید تا بعد از بارگذاری، محتوای دیگر جابه جا نشود.
  • از reserve-space برای تبلیغات و iframeها استفاده کنید.

3. فونت های سفارشی

• مشکل: فونت های سفارشی ممکن است دیر بارگذاری شوند و باعث جابه جایی متن شوند.
• راه حل:
  • از font-display: swap; در CSS استفاده کنید تا فونت های جایگزین سریع تر نمایش داده شوند.
  • فونت های ضروری را پیش بارگذاری (preload) کنید.

4. انیمیشن ها و ترانزیشن های نادرست

• مشکل: انیمیشن ها یا ترانزیشن هایی که باعث تغییر اندازه یا موقعیت عناصر می شوند، می توانند CLS را افزایش دهند.
• راه حل:
  • از transform به جای تغییر width یا height استفاده کنید.
  • انیمیشن ها را به گونه ای طراحی کنید که باعث جابه جایی عناصر نشوند.

گام به گام برای بهبود CLS:

1. شناسایی مشکل:
   • از ابزارهایی مثل Google PageSpeed Insights یا Lighthouse استفاده کنید تا ببینید کدام عناصر باعث تغییر چیدمان می شوند.
2. تعیین ابعاد برای تصاویر و ویدیوها:
   • برای همه تصاویر و ویدیوها، عرض و ارتفاع مشخص کنید.
   • از aspect-ratio برای حفظ نسبت ابعاد استفاده کنید.
3. مدیریت تبلیغات و iframeها:
   • فضای کافی برای تبلیغات و iframeها در نظر بگیرید.
   • از reserve-space استفاده کنید.
4. بهینه سازی فونت ها:
   • فونت های ضروری را پیش بارگذاری کنید.
   • از font-display: swap; استفاده کنید.
5. بررسی انیمیشن ها و ترانزیشن ها:
   • مطمئن شوید انیمیشن ها باعث جابه جایی عناصر نشوند.
   • از transform برای انیمیشن ها استفاده کنید.

ابزارهای پیشنهادی:

• Google PageSpeed Insights: برای شناسایی مشکلات CLS.
• Lighthouse: برای تحلیل دقیق عملکرد صفحه.
• CSS aspect-ratio: برای حفظ نسبت ابعاد تصاویر.
• Font-display: برای بهینه سازی فونت ها.

اهمیت و تاثیرات: این معیارها برای بهبود تجربه کاربری و بهینه‌سازی صفحات وب بسیار حیاتی هستند. گوگل این معیارها را به عنوان فاکتورهای مهم رتبه‌بندی در نتایج جستجو معرفی کرده است، بنابراین بهبود Core Web Vitals می‌تواند به افزایش رتبه وب‌سایت شما در نتایج جستجو کمک کند.

رفع مشکلات: برای بهبود Core Web Vitals، می‌توانید از ابزارهای مانند سرچ کنسول گوگل و لایت هاوس استفاده کنید. این ابزارها مشکلات موجود را شناسایی و راهکارهای عملی برای رفع آن‌ها ارائه می‌دهند. بهبود عملکرد صفحات وب از طریق بهینه‌سازی تصاویر، کاهش زمان پاسخ‌دهی سرور، و استفاده از تکنیک‌های بارگذاری تنبل (lazy loading) می‌تواند تاثیر مثبتی بر Core Web Vitals داشته باشد.

رفع خطاهای Core Web Vitals

1 . رفع خطای All Text Remains Visible During Webfont Loads

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

دلیل این خطا:

• فونت های سفارشی به صورت ناهمزمان بارگذاری می شوند و تا زمانی که کامل بارگذاری نشوند، مرورگر متن را با فونت پیش فرض یا فونت جایگزین نمایش نمی دهد.
• اگر فونت ها دیر بارگذاری شوند، کاربر ممکن است برای چند ثانیه متن را نبینید یا متن به شکل ناخوانا نمایش داده شود.

راه حل ساده برای رفع این خطا:

1. استفاده از font-display: swap;

• با اضافه کردن این ویژگی به فونت های سفارشی، مرورگر ابتدا متن را با فونت جایگزین (fallback font) نمایش می دهد و پس از بارگذاری کامل فونت سفارشی، آن را جایگزین می کند.
• مثال:
  @font-face {
    font-family: 'MyCustomFont';
    src: url('my-custom-font.woff2') format('woff2');
    font-display: swap;
  }

2. پیش بارگذاری فونت ها (Preload)

• با پیش بارگذاری فونت ها، مرورگر فونت ها را زودتر دانلود می کند و احتمال ناپدید شدن متن کاهش می یابد.
• مثال:
  <link rel="preload" href="my-custom-font.woff2" as="font" type="font/woff2" crossorigin>

3. استفاده از فونت های سیستم (Fallback Fonts)

• فونت های سیستم را به عنوان جایگزین در CSS تعریف کنید تا اگر فونت سفارشی دیر بارگذاری شد، متن با فونت سیستم نمایش داده شود.
• مثال:
  body {
    font-family: 'MyCustomFont', Arial, sans-serif;
  }

4. کاهش حجم فونت ها

• فونت های سفارشی را بهینه کنید و فقط از وزن ها و استایل های ضروری استفاده کنید.
• از فرمت های مدرن مثل WOFF2 استفاده کنید که حجم کمتری دارند و سریع تر بارگذاری می شوند.

مراحل ساده برای رفع خطا:

1. فونت های سفارشی را بررسی کنید:
   • مطمئن شوید فونت های سفارشی به درستی تعریف شده اند.
2. از font-display: swap; استفاده کنید:
   • این ویژگی را به فونت های سفارشی اضافه کنید تا متن ها در زمان بارگذاری فونت ناپدید نشوند.
3. فونت ها را پیش بارگذاری کنید:
   • با استفاده از تگ <link rel="preload"> فونت ها را زودتر بارگذاری کنید.
4. فونت های جایگزین تعریف کنید:
   • در CSS فونت های سیستم را به عنوان جایگزین قرار دهید.
5. فونت ها را بهینه کنید:
   • از فونت های سبک تر و فرمت های مدرن مثل WOFF2 استفاده کنید.

2 . رفع خطای Avoid CSS @import

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

دلیل این خطا:

• @import باعث می‌شود مرورگر هر فایل CSS را به صورت متوالی بارگذاری کند، یعنی تا زمانی که یک فایل CSS کاملا بارگذاری نشود، فایل بعدی شروع به بارگذاری نمی‌شود.
• این روش بارگذاری ناکارآمد است و می‌تواند باعث تاخیر در نمایش صفحه شود.

راه حل ساده برای رفع این خطا:

1. استفاده از تگ <link> در HTML

• به جای استفاده از @import در CSS، فایل‌های CSS را مستقیما در HTML با تگ <link> بارگذاری کنید. این روش به مرورگر اجازه می‌دهد چندین فایل CSS را به صورت همزمان بارگذاری کند.
• مثال:
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="other-styles.css">

2. ادغام فایل‌های CSS

• اگر چندین فایل CSS کوچک دارید، آن‌ها را در یک فایل واحد ادغام کنید. این کار تعداد درخواست‌های HTTP را کاهش می‌دهد و سرعت بارگذاری صفحه را افزایش می‌دهد.
• می‌توانید از ابزارهایی مثل Webpack، Gulp یا CSS Minifier برای ادغام و فشرده‌سازی فایل‌های CSS استفاده کنید.

3. بارگذاری فایل‌های CSS غیرضروری به صورت غیرهمزمان

• اگر برخی فایل‌های CSS برای بارگذاری اولیه صفحه ضروری نیستند، می‌توانید آن‌ها را به صورت غیرهمزمان (Async) بارگذاری کنید.
• مثال:
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

4. استفاده از Critical CSS

• فقط کدهای CSS ضروری برای نمایش اولیه صفحه (Above the Fold) را در یک فایل جداگانه قرار دهید و آن را در <head> صفحه بارگذاری کنید. بقیه کدهای CSS را می‌توانید به صورت تاخیری بارگذاری کنید.
• مثال:
  <style>
    /* کدهای ضروری CSS */
  </style>
  <link rel="stylesheet" href="other-styles.css" media="print" onload="this.media='all'">

مراحل ساده برای رفع خطا:

1. جایگزینی @import با تگ <link>:
   • تمام @import ها را از فایل‌های CSS حذف کنید و به جای آن از تگ <link> در HTML استفاده کنید.
2. ادغام فایل‌های CSS:
   • فایل‌های CSS کوچک را در یک فایل واحد ادغام کنید تا تعداد درخواست‌ها کاهش یابد.
3. بارگذاری غیرهمزمان فایل‌های غیرضروری:
   • فایل‌های CSS غیرضروری را به صورت غیرهمزمان بارگذاری کنید.
4. استفاده از Critical CSS:
   • کدهای CSS ضروری را در <head> صفحه قرار دهید و بقیه کدها را به صورت تاخیری بارگذاری کنید.

3 . رفع خطای Avoid Large Layout Shifts

این خطا مربوط به تغییرات ناگهانی در چیدمان صفحه (Layout Shifts) است که باعث می‌شود عناصر صفحه به طور ناخواسته جابه‌جا شوند. این اتفاق معمولاً زمانی رخ می‌دهد که عناصری مانند تصاویر، تبلیغات، iframeها یا فونت‌ها بعد از بارگذاری اولیه صفحه، باعث تغییر اندازه یا موقعیت سایر عناصر می‌شوند. این خطا می‌تواند تجربه کاربری را به شدت تحت تأثیر قرار دهد، زیرا کاربران ممکن است به اشتباه روی دکمه‌ها یا لینک‌ها کلیک کنند.

دلیل این خطا:

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

راه حل ساده برای رفع این خطا:

1. تعیین ابعاد برای تصاویر و ویدیوها

• برای همه تصاویر و ویدیوها، عرض (width) و ارتفاع (height) مشخص کنید. این کار باعث می‌شود مرورگر فضای لازم را از قبل در نظر بگیرد و پس از بارگذاری تصویر، چیدمان صفحه تغییر نکند.
• مثال:
  <img src="example.jpg" width="600" height="400" alt="Example Image">

2. استفاده از aspect-ratio در CSS

• اگر نمی‌خواهید ابعاد تصاویر را به صورت دستی تنظیم کنید، می‌توانید از ویژگی aspect-ratio در CSS استفاده کنید تا نسبت ابعاد تصاویر حفظ شود.
• مثال:
  img {
    aspect-ratio: 16 / 9;
  }

3. رزرو فضای کافی برای تبلیغات و iframeها

• برای تبلیغات، iframeها یا هر عنصر داینامیکی که بعد از بارگذاری صفحه اضافه می‌شود، فضای کافی در نظر بگیرید. این کار باعث می‌شود عناصر دیگر جابه‌جا نشوند.
• مثال:
  <div style="width: 300px; height: 250px;">
    <!-- تبلیغ یا iframe اینجا قرار می‌گیرد -->
  </div>

4. بهینه‌سازی فونت‌ها

• از font-display: swap; در CSS استفاده کنید تا متن ابتدا با فونت جایگزین نمایش داده شود و پس از بارگذاری فونت سفارشی، آن را جایگزین کند.
• مثال:
  @font-face {
    font-family: 'MyCustomFont';
    src: url('my-custom-font.woff2') format('woff2');
    font-display: swap;
  }

5. اجتناب از انیمیشن‌های نادرست

• از انیمیشن‌ها یا ترانزیشن‌هایی که باعث تغییر اندازه یا موقعیت عناصر می‌شوند، اجتناب کنید. به جای تغییر width یا height، از transform استفاده کنید.
• مثال:
  .element {
    transform: scale(1.2);
  }

مراحل ساده برای رفع خطا:

1. تعیین ابعاد برای تصاویر و ویدیوها:
   • برای همه تصاویر و ویدیوها، عرض و ارتفاع مشخص کنید.
2. استفاده از aspect-ratio:
   • از ویژگی aspect-ratio برای حفظ نسبت ابعاد تصاویر استفاده کنید.
3. رزرو فضای کافی برای عناصر داینامیک:
   • برای تبلیغات، iframeها و عناصری که بعد از بارگذاری صفحه اضافه می‌شوند، فضای کافی در نظر بگیرید.
4. بهینه‌سازی فونت‌ها:
   • از font-display: swap; استفاده کنید و فونت‌های ضروری را پیش‌بارگذاری کنید.
5. بررسی انیمیشن‌ها و ترانزیشن‌ها:
   • مطمئن شوید انیمیشن‌ها باعث تغییر اندازه یا موقعیت عناصر نشوند.

4 . رفع خطای Avoids an Excessive DOM Size

این خطا زمانی اتفاق می‌افتد که ساختار DOM (Document Object Model) صفحه شما بیش از حد بزرگ و پیچیده باشد. تعداد زیاد عناصر در DOM می‌تواند باعث کندی عملکرد صفحه، افزایش زمان بارگذاری و کاهش سرعت رندر شود. به طور کلی، یک DOM بزرگ می‌تواند بر تجربه کاربری تأثیر منفی بگذارد.

دلیل این خطا:

• تعداد زیاد عناصر در DOM: اگر صفحه شما شامل تعداد زیادی تگ‌های HTML باشد، مرورگر باید زمان بیشتری را صرف پردازش و رندر کردن آن‌ها کند.
• استفاده بیش از حد از عناصر تودرتو: عناصری که به صورت تودرتو و عمیق در DOM قرار گرفته‌اند، می‌توانند باعث پیچیدگی و کندی شوند.
• عدم بهینه‌سازی کد: استفاده از کدهای غیرضروری یا تکرار شونده می‌تواند باعث افزایش حجم DOM شود.

راه حل ساده برای رفع این خطا:

1. کاهش تعداد عناصر در DOM

• سعی کنید تعداد عناصر HTML را در صفحه کاهش دهید. به جای استفاده از عناصر اضافی، از CSS برای ایجاد افکت‌ها و استایل‌ها استفاده کنید.
• مثال:
  <!-- به جای این -->
  <div class="container">
    <div class="row">
      <div class="col">
        <p>متن نمونه</p>
      </div>
    </div>
  </div>
  
  <!-- از این استفاده کنید -->
  <p class="sample-text">متن نمونه</p>

2. اجتناب از عناصر تودرتو و عمیق

• از ایجاد ساختارهای تودرتو و عمیق در DOM خودداری کنید. سعی کنید ساختار صفحه را ساده و مسطح نگه دارید.
• مثال:
  <!-- به جای این -->
  <div>
    <div>
      <div>
        <p>متن نمونه</p>
      </div>
    </div>
  </div>
  
  <!-- از این استفاده کنید -->
  <p>متن نمونه</p>

3. استفاده از کامپوننت‌ها یا ماژول‌ها

• اگر از فریم‌ورک‌هایی مثل React, Vue یا Angular استفاده می‌کنید، سعی کنید کد خود را به کامپوننت‌های کوچک و قابل استفاده مجدد تقسیم کنید. این کار باعث کاهش حجم DOM می‌شود.
• مثال:
  javascript

  Copy

  // در React
  function SampleComponent() {
    return <p>متن نمونه</p>;
  }

4. حذف عناصر غیرضروری

• عناصری که در صفحه نمایش داده نمی‌شوند یا کاربردی ندارند را از DOM حذف کنید. این عناصر می‌توانند شامل کامنت‌ها، اسکریپت‌ها یا استایل‌های غیرضروری باشند.
• مثال:
  <!-- به جای این -->
  <div style="display: none;">
    <p>این متن نمایش داده نمی‌شود</p>
  </div>
  
  <!-- از این استفاده کنید -->
  <!-- این عنصر حذف شده است -->

5. بارگذاری تدریجی محتوا (Lazy Loading)

• اگر صفحه شما شامل محتوای زیادی است، می‌توانید از تکنیک Lazy Loading استفاده کنید تا فقط بخش‌هایی از محتوا که در دید کاربر هستند، بارگذاری شوند.
• مثال:
  <img src="placeholder.jpg" data-src="real-image.jpg" class="lazy-load" alt="Sample Image">
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));
      if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              let lazyImage = entry.target;
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.classList.remove("lazy-load");
              lazyImageObserver.unobserve(lazyImage);
            }
          });
        });
        lazyImages.forEach(function(lazyImage) {
          lazyImageObserver.observe(lazyImage);
        });
      }
    });
  </script>

مراحل ساده برای رفع خطا:

1. بررسی و کاهش تعداد عناصر در DOM:
   • تعداد عناصر HTML را در صفحه کاهش دهید و از CSS برای استایل‌دهی استفاده کنید.
2. ساده‌سازی ساختار DOM:
   • از ایجاد ساختارهای تودرتو و عمیق خودداری کنید و ساختار صفحه را ساده نگه دارید.
3. استفاده از کامپوننت‌ها:
   • اگر از فریم‌ورک‌ها استفاده می‌کنید، کد خود را به کامپوننت‌های کوچک و قابل استفاده مجدد تقسیم کنید.
4. حذف عناصر غیرضروری:
   • عناصری که کاربردی ندارند یا نمایش داده نمی‌شوند را از DOM حذف کنید.
5. بارگذاری تدریجی محتوا:
   • از Lazy Loading برای بارگذاری محتوای غیرضروری در ابتدا استفاده کنید.

5. رفع خطای Background and Foreground Contrast Ratio

دلیل خطا: کنتراست ضعیف بین متن و پس‌زمینه می‌تواند خوانایی محتوا را کاهش دهد و تجربه کاربری به خصوص برای کاربران با مشکلات بینایی را تحت تأثیر قرار دهد و سرچ کنسول ارور background and foreground contrast ratio را نمایش میدهد.

روش‌های رفع خطا:

1. افزایش کنتراست رنگ‌ها: از ابزارهای آنلاین مانند “WebAIM Contrast Checker” استفاده کنید تا مطمئن شوید که کنتراست بین رنگ متن و پس‌زمینه حداقل 4.5:1 باشد.
2. استفاده از رنگ‌های مناسب: رنگ‌هایی انتخاب کنید که کنتراست مناسبی داشته باشند و با یکدیگر تداخل نکنند.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی رنگ‌ها را تنظیم کنید. از تنظیمات المنتور برای انتخاب رنگ‌های با کنتراست بالا استفاده کنید.

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

6. رفع خطای Cumulative Layout Shift

دلیل خطا: تغییرات ناگهانی در چیدمان صفحه (Cumulative Layout Shift) می‌تواند تجربه کاربری را تحت تأثیر قرار دهد. این تغییرات ممکن است به دلیل بارگذاری تصاویر، تبلیغات، یا فونت‌های وب به وجود بیاید. این خطا باعث می‌شود که کاربران نتوانند به راحتی با محتوا تعامل کنند، زیرا عناصر صفحه به طور ناگهانی جابجا می‌شوند و به همین دلیل سرچ کنسول ارور cumulative layout shift میدهد.

روش‌های رفع خطا:

1. تعیین ابعاد تصاویر و ویدیوها: برای تمامی تصاویر و ویدیوها ابعاد (width و height) تعیین کنید تا مرورگر فضای لازم برای آنها را رزرو کند.

   html:

   <img src="image.jpg" width="600" height="400" alt="Description">

2. بارگذاری فونت‌ها با font-display: swap: این خاصیت کمک می‌کند که تغییرات فونت بدون جابجایی چیدمان صفحه انجام شود.

   css:

   @font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2');
font-display: swap;
}

3. پیش‌بارگذاری منابع حیاتی: از تگ <link rel="preload"> برای پیش‌بارگذاری منابع مهم مانند تصاویر، فونت‌ها و اسکریپت‌ها استفاده کنید.

   html:

   <link rel="preload" href="large-image.jpg" as="image">

4. در وردپرس با المنتور: از افزونه‌هایی مانند “WP Rocket” برای بهینه‌سازی بارگذاری منابع استفاده کنید. همچنین، المنتور به شما امکان می‌دهد ابعاد تصاویر را به راحتی تنظیم کنید و با بهینه‌سازی منابع، از تغییرات ناگهانی در چیدمان جلوگیری کنید.

7. رفع خطای Defer Offscreen Images

دلیل خطا: بارگذاری تصاویر که در صفحه قابل مشاهده نیستند (Offscreen Images) باعث افزایش زمان بارگذاری صفحه می‌شود. این مشکل می‌تواند تأثیر منفی بر عملکرد و تجربه کاربری داشته باشد و سرچ کنسول ارور defer offscreen images را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از loading="lazy": با افزودن این خاصیت به تگ <img>، تصاویر تنها زمانی بارگذاری می‌شوند که کاربر به آنها نزدیک می‌شود.

   html:

   <img src="image.jpg" alt="Description" loading="lazy">

2. استفاده از کتابخانه‌های جاوااسکریپت: کتابخانه‌هایی مانند “LazyLoad” می‌توانند به شما در بارگذاری تدریجی تصاویر کمک کنند.

   javascript:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" async></script>

3. در وردپرس با المنتور: المنتور به طور پیش‌فرض قابلیت بارگذاری تدریجی تصاویر را ندارد، اما می‌توانید از افزونه‌هایی مانند “Lazy Load by WP Rocket” استفاده کنید تا این ویژگی را به سایت خود اضافه کنید.

8. رفع خطای Document Uses Legible Font Sizes

دلیل خطا: استفاده از اندازه‌های کوچک فونت می‌تواند خوانایی متن را کاهش دهد و تجربه کاربری ضعیفی به خصوص برای کاربران موبایل ایجاد کند به همین دلیل Core web Vitals ارور document uses legible font sizes را نمایش میدهد.

روش‌های رفع خطا:

1. تنظیم اندازه فونت مناسب: مطمئن شوید که اندازه فونت‌ها حداقل 16px باشد تا خوانایی مناسبی داشته باشند.

   css:

   body {
font-size: 16px;
}

2. استفاده از واحدهای نسبی: از واحدهای نسبی مانند em و rem برای تنظیم اندازه فونت‌ها استفاده کنید تا مقیاس‌پذیری بهتری داشته باشند.

   css:

   body {
font-size: 1rem; /* معادل 16px */
}

3. در وردپرس با المنتور: المنتور امکان تنظیم اندازه فونت‌ها را به شما می‌دهد. از تنظیمات المنتور برای تعیین اندازه فونت‌های مناسب برای تمامی دستگاه‌ها استفاده کنید.

9. رفع خطای Documents Must Have Title Element

دلیل خطا: عدم وجود تگ <title> در سند HTML باعث می‌شود که مرورگرها و موتورهای جستجو نتوانند عنوان صفحه را نمایش دهند. این مسئله می‌تواند تأثیر منفی بر سئو و تجربه کاربری داشته باشد و باعث میشود سرچ کنسول گوگل پیغام documents must have title element را نمایش دهد.

روش‌های رفع خطا:

1. افزودن تگ <title>: مطمئن شوید که تگ <title> در بخش <head> سند HTML شما وجود دارد و دارای محتوای مناسبی است.

   html:

   <head>
<title>عنوان صفحه</title>
</head>

2. استفاده از مدیریت محتوای سایت: در سیستم‌های مدیریت محتوا مانند وردپرس، از تنظیمات مربوط به سئو برای تعیین عنوان صفحه استفاده کنید.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا عنوان صفحه را در تنظیمات سئو وارد کنید. از افزونه‌هایی مانند “Yoast SEO” یا “Rank Math” استفاده کنید تا مطمئن شوید که تمامی صفحات شما دارای تگ عنوان مناسبی هستند.

10. رفع خطای Efficient Cache Policy for Static Assets

دلیل خطا: عدم استفاده از سیاست کش مناسب برای منابع ثابت (مانند تصاویر، فایل‌های CSS و جاوااسکریپت) می‌تواند باعث شود که این منابع در هر بار بارگذاری صفحه مجدداً دانلود شوند. این مسئله می‌تواند زمان بارگذاری صفحه را افزایش دهد و پهنای باند مصرفی را افزایش دهد و ارور efficient cache policy for static assets بر اثر آن است.

روش‌های رفع خطا:

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

   apache:

   <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

2. استفاده از CDN: از شبکه‌های توزیع محتوا (CDN) استفاده کنید که به طور خودکار از سیاست‌های کش مناسب استفاده می‌کنند.
3. در وردپرس با المنتور: افزونه‌هایی مانند “WP Super Cache” یا “W3 Total Cache” می‌توانند به شما در تنظیم سیاست‌های کش مناسب کمک کنند. همچنین، از سرویس‌های CDN مانند “Cloudflare” استفاده کنید تا منابع ثابت شما بهینه‌تر بارگذاری شوند.

11. رفع خطای Efficiently Encode Images

دلیل خطا: تصاویر با فرمت‌های غیر بهینه یا با کیفیت بالاتر از نیاز می‌توانند زمان بارگذاری صفحه را افزایش دهند. استفاده از تصاویر بهینه شده می‌تواند به بهبود عملکرد و کاهش زمان بارگذاری کمک کند و باعث میشود سرچ کنسول ارور efficiently encode images را نمایش دهد.

روش‌های رفع خطا:

1. استفاده از فرمت‌های مناسب: فرمت‌های مدرن مانند WebP یا AVIF نسبت به فرمت‌های قدیمی‌تر مانند JPEG و PNG حجم کمتری دارند و زمان بارگذاری را کاهش می‌دهند.

   html:

   <picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>

2. فشرده‌سازی تصاویر: از ابزارهای آنلاین مانند TinyPNG یا ImageOptim برای فشرده‌سازی تصاویر استفاده کنید.
3. در وردپرس با المنتور: از افزونه‌هایی مانند “Smush” یا “Imagify” برای فشرده‌سازی و بهینه‌سازی تصاویر استفاده کنید. این افزونه‌ها به شما کمک می‌کنند تا تصاویر را به صورت خودکار بهینه‌سازی کنید و از فرمت‌های مدرن استفاده کنید.

12. رفع خطای Eliminate Render-Blocking Resources

دلیل خطا: منابعی که بارگذاری و اجرای آنها باید قبل از نمایش محتوای صفحه انجام شود، می‌توانند زمان بارگذاری را افزایش دهند. این منابع شامل فایل‌های CSS و جاوااسکریپت می‌شوند که باید بهینه‌سازی شوند که باعث نمایش ارور eliminate render-blocking resources میشود.

روش‌های رفع خطا:

1. بارگذاری CSS به صورت غیر مسدود کننده: با استفاده از media="print" و تغییر آن به media="all" بعد از بارگذاری، می‌توانید CSS را به صورت غیر مسدود کننده بارگذاری کنید.

   html:

   <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

2. بارگذاری جاوااسکریپت به صورت تأخیری: با استفاده از خاصیت async یا defer برای تگ‌های <script>، می‌توانید بارگذاری جاوااسکریپت را به تأخیر بیندازید.

   html:

   <script src="script.js" defer></script>

3. در وردپرس با المنتور: از افزونه‌هایی مانند “Async JavaScript” یا “Autoptimize” برای بهینه‌سازی بارگذاری منابع استفاده کنید.

13. رفع خطای Enable Gzip in Server

دلیل خطا: فشرده‌سازی Gzip می‌تواند اندازه فایل‌های منتقل شده بین سرور و مرورگر را کاهش دهد و در نتیجه زمان بارگذاری صفحه را کاهش دهد. در صورت فعال نبودن Gzip سرچ کنسول ارورenable gzip in server را نمایش میدهد.

روش‌های رفع خطا:

1. فعال کردن Gzip در سرور آپاچی: با افزودن کد زیر به فایل .htaccess، می‌توانید فشرده‌سازی Gzip را فعال کنید.

   apache:

   <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

2. فعال کردن Gzip در سرور Nginx: با افزودن کد زیر به فایل پیکربندی Nginx، می‌توانید فشرده‌سازی Gzip را فعال کنید.

   nginx:

   gzip on;
gzip_types text/html text/css application/javascript;

3. در وردپرس با المنتور: از افزونه‌هایی مانند “WP Rocket” یا “W3 Total Cache” استفاده کنید که قابلیت فعال‌سازی فشرده‌سازی Gzip را دارند.

14. رفع خطای Enable Text Compression

دلیل خطا: برای رفع ارور enable text compression، فشرده سازی متن (مانند HTML، CSS و جاوااسکریپت) می‌تواند اندازه فایل‌ها را کاهش دهد و زمان بارگذاری صفحه را بهبود بخشد.

روش‌های رفع خطا:

1. استفاده از Gzip: همانطور که در بخش قبل توضیح داده شد، فعال‌سازی Gzip یکی از روش‌های اصلی برای فشرده‌سازی متن است.
2. استفاده از Brotli: فشرده‌سازی Brotli که توسط گوگل توسعه داده شده است، عملکرد بهتری نسبت به Gzip دارد.

   apache:

   <IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript
</IfModule>

3. در وردپرس با المنتور: از افزونه‌هایی مانند “WP Rocket” که از فشرده‌سازی Brotli پشتیبانی می‌کنند استفاده کنید.

15. رفع خطای Form Elements Must Have Labels

دلیل خطا: عدم وجود برچسب (Label) برای عناصر فرم می‌تواند باعث کاهش دسترسی پذیری وبسایت شود. برچسب‌ها به کاربران کمک می‌کنند تا به راحتی بفهمند که هر فیلد چه کاربردی دارد. ارور form elements must have labels در سرچ کنسول به همین دلیل است.

روش‌های رفع خطا:

1. افزودن تگ <label>: برای هر عنصر فرم یک برچسب مشخص کنید و از ویژگی for برای اتصال برچسب به عنصر استفاده کنید.

   html:

   <label for="name">Name:</label>
<input type="text" id="name" name="name">

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

   html:

   <label for="name" class="sr-only">Name:</label>
<input type="text" id="name" name="name">

3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا برچسب‌ها را به راحتی اضافه کنید. از ابزارک فرم در المنتور استفاده کنید و برچسب‌های مناسب برای هر فیلد تعیین کنید.

16. رفع خطای How the Performance Score is Weighted

دلیل خطا: درک نحوه وزن دهی امتیاز عملکرد (Performance Score) به شما کمک می‌کند تا بهتر بفهمید کدام عوامل بیشترین تأثیر را بر عملکرد وبسایت دارند.

روش‌های رفع خطا:

1. مطالعه مستندات Google Lighthouse: مستندات Google Lighthouse شامل جزئیات دقیقی درباره نحوه محاسبه امتیاز عملکرد و وزن‌دهی هر معیار است. Lighthouse Scoring
2. تمرکز بر معیارهای کلیدی: معیارهایی مانند Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) بیشترین تأثیر را بر امتیاز عملکرد دارند. بهبود این معیارها می‌تواند امتیاز کلی شما را بهبود بخشد.
3. در وردپرس با المنتور: برای رفع ارور how the performance score is weighted از ابزارهایی مانند “Lighthouse” یا “PageSpeed Insights” استفاده کنید تا امتیاز عملکرد سایت خود را تحلیل کنید و مناطق نیازمند بهبود را شناسایی کنید.

17. رفع خطای Image Elements Do Not Have Alt Attributes

دلیل خطا: عدم وجود ویژگی alt برای تصاویر باعث می‌شود که محتوای تصویری برای کاربرانی که نمی‌توانند تصاویر را ببینند یا برای موتورهای جستجو قابل فهم نباشد. این باعث میشود که سرچ کنسول ارور image elements do not have alt attributes را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن ویژگی alt: برای تمامی تصاویر ویژگی alt تعیین کنید تا توضیحی مختصر از محتوای تصویر ارائه دهید.

   html:

   <img src="image.jpg" alt="Description of the image">

2. استفاده از توضیحات دقیق: ویژگی alt باید توضیح دقیقی از محتوای تصویر باشد تا درک کاملی از آن ارائه دهد.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی ویژگی‌های alt را برای تصاویر تعیین کنید. از تنظیمات تصویر در المنتور استفاده کنید تا این ویژگی را به تمامی تصاویر اضافه کنید.

18. رفع خطای Image Elements Do Not Have Explicit Width and Height

دلیل خطا: عدم تعیین ابعاد مشخص برای تصاویر می‌تواند باعث تغییرات ناگهانی در چیدمان صفحه شود که تجربه کاربری را تحت تأثیر قرار می‌دهد. به همین دلیل سرچ کنسول ارور image elements do not have explicit width and height را نمایش میدهد.

روش‌های رفع خطا:

1. تعیین ابعاد تصاویر: برای تمامی تصاویر ابعاد (width و height) تعیین کنید تا مرورگر بتواند فضای لازم را برای آنها رزرو کند.

   html:

   <img src="image.jpg" width="600" height="400" alt="Description">

2. استفاده از CSS: می‌توانید ابعاد تصاویر را با استفاده از CSS تعیین کنید.

   css:

   img {
width: 100%;
height: auto;
}

3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی ابعاد تصاویر را تنظیم کنید. از تنظیمات تصویر در المنتور استفاده کنید تا ابعاد دقیق برای تمامی تصاویر تعیین شود.

19. رفع خطای Images Must Have Alternate Text

دلیل خطا: همانند ویژگی alt، متن جایگزین برای تصاویر ضروری است تا محتوا برای همه کاربران قابل دسترس باشد و موتورهای جستجو بتوانند محتوای تصویری را درک کنند. در صورت اینکه Alt تصاویر را ننویسید سرچ کنسول ارور images must have alternate text را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن متن جایگزین: برای تمامی تصاویر متن جایگزین تعیین کنید تا توضیحی مختصر از محتوای تصویر ارائه دهد.

   html:

   <img src="image.jpg" alt="Description of the image">

2. استفاده از توضیحات دقیق: متن جایگزین باید توضیح دقیقی از محتوای تصویر باشد تا درک کاملی از آن ارائه دهد.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی متن جایگزین را برای تصاویر تعیین کنید. از تنظیمات تصویر در المنتور استفاده کنید تا این ویژگی را به تمامی تصاویر اضافه کنید.

20. رفع خطای Initial Server Response Time

دلیل خطا: زمان پاسخگویی اولیه سرور (Initial Server Response Time) بالا می‌تواند زمان بارگذاری صفحه را افزایش دهد و تجربه کاربری را تحت تأثیر قرار دهد. این مسئله ممکن است به دلیل بهینه‌سازی نشدن سرور، استفاده از هاستینگ ضعیف یا درخواست‌های متعدد به سرور باشد. به همین دلیل سرچ کنسول پیغام initial server response time را نمایش میدهد.

روش‌های رفع خطا:

1. بهینه‌سازی سرور: از سرورهای با کارایی بالا استفاده کنید و تنظیمات سرور را بهینه کنید. سرورهایی با SSD و استفاده از تکنولوژی‌های نوین می‌توانند پاسخگویی بهتری داشته باشند.
2. استفاده از کش سرور: کش سرور می‌تواند زمان پاسخگویی را به طور قابل توجهی کاهش دهد. استفاده از افزونه‌های کش مانند “WP Rocket” می‌تواند مفید باشد.
3. در وردپرس با المنتور: استفاده از هاستینگ‌های معتبر و با کیفیت مانند “SiteGround” یا “Kinsta” که بهینه‌سازی‌های لازم را انجام می‌دهند، می‌تواند بهبود قابل توجهی در زمان پاسخگویی اولیه سرور ایجاد کند.

21. رفع خطای Input Buttons Must Have Discernible Text

دلیل خطا: دکمه‌های ورودی که متن قابل تشخیصی ندارند می‌توانند باعث سردرگمی کاربران و کاهش دسترسی‌پذیری وبسایت شوند و سرچ کنسول پیغام input buttons must have discernible text را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن متن یا توضیحات: مطمئن شوید که تمامی دکمه‌های ورودی دارای متن یا توضیحات مناسبی هستند.

   html:

   <button type="submit">Submit</button>

2. استفاده از ویژگی‌های دسترسی‌پذیری: از ویژگی‌های ARIA مانند aria-label برای دکمه‌هایی که متن ندارند استفاده کنید.

   html:

   <button type="button" aria-label="Close">X</button>

3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی متن و ویژگی‌های دسترسی‌پذیری را به دکمه‌ها اضافه کنید. از ابزارک دکمه در المنتور استفاده کنید و مطمئن شوید که تمامی دکمه‌ها دارای متن قابل تشخیص هستند.

22. رفع خطای Largest Contentful Paint

دلیل خطا: Largest Contentful Paint (LCP) معیاری است که زمان بارگذاری بزرگترین عنصر قابل مشاهده در صفحه را اندازه‌گیری می‌کند. این معیار می‌تواند تأثیر قابل توجهی بر تجربه کاربری داشته باشد. یکی از متداول ترین ارور هایی که سرچ کنسول نمایش میدهد ارورlargest contentful paint است.

روش‌های رفع خطا:

1. بهینه‌سازی تصاویر و منابع بزرگ: مطمئن شوید که تصاویر و ویدیوهای بزرگ بهینه شده‌اند و از فرمت‌های مدرن مانند WebP استفاده کنید.
2. استفاده از پیش‌بارگذاری: از تگ‌های <link rel="preload"> برای پیش‌بارگذاری منابع حیاتی استفاده کنید.

   html:

   <link rel="preload" href="large-image.jpg" as="image">

3. در وردپرس با المنتور: از افزونه‌هایی مانند “WP Rocket” استفاده کنید تا منابع بزرگ را بهینه‌سازی و پیش‌بارگذاری کنید. همچنین، المنتور به شما امکان می‌دهد تا تصاویر را بهینه کنید و از فرمت‌های مدرن استفاده کنید.

23. رفع خطای Links are Not Crawlable

دلیل خطا: لینک‌هایی که قابل خزش نیستند (crawlable) می‌توانند تأثیر منفی بر سئو وبسایت داشته باشند. این مشکل ممکن است به دلیل استفاده از جاوااسکریپت برای ایجاد لینک ها یا عدم استفاده از تگ‌های HTML مناسب باشد. به همین دلیل سرچ کنسول ارور links are not crawlable را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از تگ‌های HTML مناسب: مطمئن شوید که تمامی لینک‌ها با استفاده از تگ <a> ایجاد شده‌اند و دارای ویژگی href هستند.

   html:

   <a href="page.html">Link Text</a>

2. اجتناب از جاوااسکریپت برای لینک‌ها: لینک‌ها را مستقیماً در HTML تعریف کنید و از استفاده از جاوااسکریپت برای ایجاد لینک‌ها اجتناب کنید.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا لینک‌ها را به راحتی ایجاد کنید. از ابزارک لینک در المنتور استفاده کنید و مطمئن شوید که تمامی لینک‌ها دارای ویژگی‌های مناسب برای خزش موتورهای جستجو هستند.

24. رفع خطای Links Do Not Have a Discernible Name

دلیل خطا: لینک‌هایی که نام قابل تشخیصی ندارند می‌توانند باعث سردرگمی کاربران و کاهش دسترسی‌پذیری وبسایت شوند. به همین دلیل سرچ کنسول ارور links do not have a discernible name را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن متن به لینک‌ها: مطمئن شوید که تمامی لینک‌ها دارای متن قابل تشخیص هستند.

   html:

   <a href="page.html">Link Text</a>

2. استفاده از ویژگی‌های ARIA: از ویژگی‌های ARIA مانند aria-label برای لینک‌هایی که متن ندارند استفاده کنید.

   html:

   <a href="page.html" aria-label="Description of the link">...</a>

3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی متن و ویژگی‌های دسترسی‌پذیری را به لینک‌ها اضافه کنید. از ابزارک لینک در المنتور استفاده کنید و مطمئن شوید که تمامی لینک‌ها دارای نام قابل تشخیص هستند.

25. رفع خطای Minify CSS and JS

دلیل خطا: فایل‌های CSS و جاوااسکریپت که مینیفای نشده‌اند، حجم بیشتری دارند و زمان بارگذاری صفحه را افزایش می‌دهند. مینیفای کردن این فایل‌ها می‌تواند به کاهش حجم و بهبود زمان بارگذاری کمک کند. به دلیل عدم فشرده سازی فایل های Css  و Js سرچ کنسول ارور minify css js را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از ابزارهای آنلاین: از ابزارهای آنلاین مانند “CSS Minifier” و “JS Minifier” برای مینیفای کردن فایل‌های CSS و جاوااسکریپت استفاده کنید.
2. استفاده از ابزارهای خط فرمان: از ابزارهای خط فرمان مانند UglifyJS و CleanCSS برای مینیفای کردن فایل‌ها استفاده کنید.

   bash:

   uglifyjs script.js -o script.min.js
cleancss -o style.min.css style.css

3. در وردپرس با المنتور: از افزونه‌هایی مانند “Autoptimize” یا “WP Rocket” برای مینیفای کردن فایل‌های CSS و جاوااسکریپت استفاده کنید.

26. رفع خطای Minimize Main-Thread Work

دلیل خطا: کار بیش از حد در ترد اصلی مرورگر می‌تواند باعث کاهش عملکرد و افزایش زمان بارگذاری صفحه شود. این مشکل ممکن است به دلیل اسکریپت های سنگین یا عدم بهینه سازی کدهای جاوااسکریپت باشدو سرچ کنسول ارور minimize main-thread work را نمایش میدهد.

روش‌های رفع خطا:

1. تقسیم وظایف به تردهای وب: از Web Workers برای اجرای وظایف سنگین در تردهای جداگانه استفاده کنید.

   javascript:

   const worker = new Worker('worker.js');
worker.postMessage('start');

2. بهینه‌سازی کدهای جاوااسکریپت: کدهای جاوااسکریپت را بهینه‌سازی کنید تا وظایف سنگین به صورت غیر همزمان اجرا شوند.
3. در وردپرس با المنتور: از افزونه‌هایی مانند “Async JavaScript” استفاده کنید تا اسکریپت‌های جاوااسکریپت به صورت غیر همزمان بارگذاری شوند.

27. رفع خطای Page is Blocked from Indexing

دلیل خطا: صفحه‌ای که از ایندکس شدن توسط موتورهای جستجو بلوکه شده است، نمی‌تواند در نتایج جستجو نمایش داده شود. این مشکل ممکن است به دلیل تنظیمات نادرست فایل robots.txt یا متا تگ‌های HTML باشد. این مشکل باعث نمایش ارور page is blocked from indexing در سرچ کنسول میشود.

روش‌های رفع خطا:

1. بررسی فایل robots.txt: مطمئن شوید که فایل robots.txt به درستی تنظیم شده و صفحات مورد نظر را بلوکه نمی‌کند.

   plaintext:

   User-agent: *
Allow: /

2. بررسی متا تگ‌های HTML: مطمئن شوید که متا تگ‌های robots به درستی تنظیم شده‌اند و صفحات مورد نظر را بلوکه نمی‌کنند.

   html:

   <meta name="robots" content="index, follow">

3. در وردپرس با المنتور: از تنظیمات سئو در وردپرس و افزونه‌هایی مانند “Yoast SEO” یا “Rank Math” استفاده کنید تا مطمئن شوید که صفحات شما از ایندکس شدن بلوکه نشده‌اند.

28. رفع خطای Page Lacks the HTML Doctype

دلیل خطا: عدم وجود داک تایپ (DOCTYPE) HTML می‌تواند باعث مشکلاتی در رندرینگ و نمایش صفحه در مرورگرها شود. داک‌تایپ مشخص می‌کند که مرورگر چگونه باید صفحه را رندر کند. به همین دلیل سرچ کنسول ارور page lacks the html doctype را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن داک‌تایپ HTML5: مطمئن شوید که داک‌تایپ HTML5 در ابتدای سند HTML شما وجود دارد.

   html:

   <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<!-- محتوای صفحه -->
</body>
</html>

2. بررسی قالب HTML: مطمئن شوید که قالب HTML شما به درستی ساختار یافته و داک‌تایپ در ابتدای سند قرار دارد.
3. در وردپرس با المنتور: المنتور به طور خودکار داک‌تایپ را در قالب‌های تولیدی خود اضافه می‌کند. اگر از قالب‌های سفارشی استفاده می‌کنید، مطمئن شوید که داک‌تایپ به درستی تعریف شده است.

29. رفع خطای Preload Largest Contentful Paint Image

دلیل خطا: عدم پیش‌بارگذاری (preload) تصاویر بزرگ که به عنوان Largest Contentful Paint (LCP) محسوب می‌شوند، می‌تواند زمان بارگذاری صفحه را افزایش دهد و تجربه کاربری را تحت تأثیر قرار دهد. به همین دلیل سرچ کنسول ارور preload largest contentful paint image را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از تگ <link rel="preload">: از این تگ برای پیش‌بارگذاری تصاویر بزرگ استفاده کنید.

   html:

   <link rel="preload" href="large-image.jpg" as="image">

2. بهینه‌سازی تصاویر: مطمئن شوید که تصاویر بهینه شده‌اند و از فرمت‌های مدرن مانند WebP استفاده کنید.
3. در وردپرس با المنتور: از افزونه‌هایی مانند “WP Rocket” استفاده کنید تا تصاویر بزرگ را بهینه‌سازی و پیش‌بارگذاری کنید. همچنین، المنتور به شما امکان می‌دهد تا تصاویر را بهینه کنید و از فرمت‌های مدرن استفاده کنید.

30. رفع خطای Properly Size Images

دلیل خطا: تصاویر با ابعاد نامناسب می‌توانند باعث افزایش زمان بارگذاری صفحه و کاهش تجربه کاربری شوند. تصاویر باید با اندازه مناسب برای نمایش در دستگاه‌های مختلف بهینه‌سازی شوند. به همین دلیل سرچ کنسول ارور properly size images را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از تصاویر با اندازه مناسب: مطمئن شوید که تصاویر به اندازه‌ای که در صفحه نمایش داده می‌شوند، بهینه شده‌اند.

   html:

   <img src="image.jpg" width="600" height="400" alt="Description">

2. استفاده از ویژگی‌های Responsive Images: از ویژگی‌های srcset و sizes برای تصاویر استفاده کنید تا تصاویر بهینه شده برای دستگاه‌های مختلف بارگذاری شوند.

   html:

   <img src="image.jpg" srcset="image-600.jpg 600w, image-1200.jpg 1200w" sizes="(max-width: 600px) 600px, 1200px" alt="Description">

3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی تصاویر را برای دستگاه‌های مختلف بهینه کنید. از ابزارک تصویر در المنتور استفاده کنید و مطمئن شوید که تصاویر با اندازه مناسب برای نمایش در دستگاه‌های مختلف تنظیم شده‌اند.

31. رفع خطای Remove Unused CSS

دلیل خطا: وجود CSS های بلااستفاده می‌تواند حجم فایل‌های CSS را افزایش داده و زمان بارگذاری صفحه را طولانی‌تر کند. حذف CSS های بلااستفاده به بهبود سرعت بارگذاری کمک می‌کند. به همین دلیل سرچ کنسول ارور remove unused css را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از ابزارهای آنلاین: ابزارهایی مانند “PurgeCSS” یا “UnCSS” می‌توانند CSS های بلااستفاده را شناسایی و حذف کنند.

   bash:

   npx purgcss --css styles.css --content index.html

2. استفاده از DevTools: مرورگرهای مانند Chrome دارای DevTools هستند که می‌توانند CSS های بلااستفاده را شناسایی کنند.
3. در وردپرس با المنتور: از افزونه‌هایی مانند “Asset CleanUp” یا “WP Rocket” استفاده کنید تا CSS های بلااستفاده را حذف کنید.

32. رفع خطای Select Element Must Have Name

دلیل خطا: عناصر <select> بدون ویژگی name نمی‌توانند داده‌های انتخاب شده را به سرور ارسال کنند که ممکن است باعث مشکلات در فرم های وبسایت شود. به همین دلیل سرچ کنسول ارور select element must have name را نمایش میدهد.

روش‌های رفع خطا:

1. افزودن ویژگی name: مطمئن شوید که تمامی عناصر <select> دارای ویژگی name هستند.

   html:

   <select name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

2. بررسی و اصلاح فرم‌ها: تمامی فرم‌ها را بررسی کنید و اطمینان حاصل کنید که تمامی عناصر <select> دارای ویژگی name هستند.
3. در وردپرس با المنتور: المنتور به شما امکان می‌دهد تا به راحتی ویژگی name را برای عناصر <select> تنظیم کنید. از ابزارک فرم در المنتور استفاده کنید و مطمئن شوید که تمامی عناصر فرم دارای ویژگی‌های مناسب هستند.

33. رفع خطای Serve Images in Next-Gen Formats

دلیل خطا: استفاده از فرمت‌های قدیمی تصویر مانند JPEG و PNG ممکن است باعث افزایش زمان بارگذاری شود. فرمت‌های جدیدتر مانند WebP و AVIF فشرده‌سازی بهتری دارند و می‌توانند سرعت بارگذاری را بهبود بخشند. در صورتی که از فرمت های جدیدتر مانند WebP و AVIF استفاده نکنید سرچ کنسول ارور serve images in next-gen formats را نمایش میدهد.

روش‌های رفع خطا:

1. تبدیل تصاویر به فرمت‌های جدید: از ابزارهایی مانند “Squoosh” یا “ImageMagick” برای تبدیل تصاویر به فرمت‌های WebP یا AVIF استفاده کنید.

   bash:

   convert image.jpg image.webp

2. استفاده از <picture>: از تگ <picture> برای نمایش تصاویر در فرمت‌های مختلف بر اساس پشتیبانی مرورگر استفاده کنید.

   html:

   <picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>

3. در وردپرس با المنتور: از افزونه‌هایی مانند “ShortPixel” یا “Imagify” برای تبدیل و بهینه‌سازی تصاویر به فرمت‌های جدید استفاده کنید.

34. رفع خطای Serve Images with Correct Dimensions

دلیل خطا: نمایش تصاویر بدون تنظیم ابعاد مناسب می‌تواند باعث مشکلات در چیدمان صفحه و افزایش زمان بارگذاری شود. تصاویر باید با ابعاد صحیح بارگذاری شوند. به همین دلیل سرچ کنسول ارور serve images with correct dimensions را نمایش میدهد.

روش‌های رفع خطا:

1. تنظیم ابعاد تصاویر: مطمئن شوید که تمامی تصاویر دارای ویژگی‌های width و height هستند.

   html:

   <img src="image.jpg" width="600" height="400" alt="Description">

2. استفاده از ویژگی‌های Responsive Images: از ویژگی‌های srcset و sizes برای بارگذاری تصاویر با ابعاد مناسب استفاده کنید.

   html:

   <img src="image.jpg" srcset="image-600.jpg 600w, image-1200.jpg 1200w" sizes="(max-width: 600px) 600px, 1200px" alt="Description">

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

35. رفع خطای Tap Targets Are Sized Appropriately

دلیل خطا: عناصر قابل کلیک (Tap Targets) که به اندازه کافی بزرگ نیستند، می‌توانند باعث تجربه کاربری نامطلوب، به ویژه در دستگاه‌های لمسی شوند. اندازه مناسب Tap Targets به کاربران کمک می‌کند تا راحت‌تر با عناصر تعامل داشته باشند. به همین دلیل سرچ کنسول ارور tap targets are sized appropriately را نمایش میدهد.

روش‌های رفع خطا:

1. افزایش اندازه Tap Targets: مطمئن شوید که اندازه تمامی Tap Targets حداقل 48×48 پیکسل است.

   css:

   .tap-target {
padding: 24px;
}

2. افزایش فاصله بین Tap Targets: فضای کافی بین عناصر قابل کلیک را فراهم کنید تا کاربران به راحتی بتوانند بر روی آن‌ها کلیک کنند.

   css:

   .tap-target {
margin: 10px;
}

3. در وردپرس با المنتور: از المنتور برای تنظیم اندازه و فاصله Tap Targets استفاده کنید. از ابزارک‌های دکمه و لینک در المنتور استفاده کنید و مطمئن شوید که اندازه و فاصله مناسب دارند.

36. رفع خطای Use HTTP/2

دلیل خطا: استفاده از پروتکل HTTP/1.1 ممکن است باعث کندی بارگذاری صفحه شود. HTTP/2 با ویژگی‌هایی مانند فشرده سازی سراینده ها و مولتی پلکسینگ می‌تواند زمان بارگذاری را بهبود بخشد. این دلیل نمایش ارور use http/2 در سرچ کنسول است.

روش‌های رفع خطا:

1. فعال‌سازی HTTP/2 در سرور: اگر سرور شما از HTTP/2 پشتیبانی می‌کند، آن را فعال کنید. برای سرور Apache، از دستور زیر در فایل پیکربندی استفاده کنید.

   apache:

   Protocols h2 http/1.1

2. استفاده از هاستینگ با پشتیبانی HTTP/2: مطمئن شوید که هاستینگ شما از HTTP/2 پشتیبانی می‌کند و در صورت نیاز هاستینگ خود را به هاستینگی که از این پروتکل پشتیبانی می‌کند تغییر دهید.
3. در وردپرس با المنتور: از هاستینگ‌های معتبر مانند “SiteGround” یا “Kinsta” استفاده کنید که به طور پیش‌فرض از HTTP/2 پشتیبانی می‌کنند.

37. رفع خطای Use Passive Listeners to Improve Scrolling Performance

دلیل خطا: استفاده از event listeners غیر passive برای رویدادهای scroll و touch می‌تواند باعث کاهش عملکرد پیمایش (scrolling) شود. Passive listeners به مرورگر اجازه می‌دهند تا پیمایش صفحه را بهینه تر انجام دهد. به همین دلیل سرچ کنسول ارور use passive listeners to improve scrolling performance را نمایش میدهد.

روش‌های رفع خطا:

1. تعریف event listeners به عنوان passive: مطمئن شوید که event listeners برای رویدادهای scroll و touch به عنوان passive تعریف شده‌اند.

   javascript:

   document.addEventListener('scroll', function(e) {
// handler code
}, { passive: true });

2. استفاده از پلی‌فیل‌ها: اگر مرورگرهای قدیمی‌تری را پشتیبانی می‌کنید، از پلی‌فیل‌هایی مانند “default-passive-events” استفاده کنید.
3. در وردپرس با المنتور: اگر از جاوااسکریپت سفارشی استفاده می‌کنید، مطمئن شوید که event listeners برای رویدادهای scroll و touch به عنوان passive تعریف شده‌اند.

38. رفع خطای Use Video Formats for Animated Content

دلیل خطا: استفاده از تصاویر GIF برای محتوای انیمیشنی می‌تواند باعث افزایش حجم فایل‌ها و کاهش سرعت بارگذاری صفحه شود. استفاده از فرمت‌های ویدئویی مانند MP4 یا WebM می‌تواند به بهینه سازی حجم فایل و بهبود عملکرد کمک کند در غیر این صورت سرچ کنسول ارور use video formats for animated content را نمایش میدهد.

روش‌های رفع خطا:

1. تبدیل GIF به فرمت‌های ویدئویی: از ابزارهایی مانند “HandBrake” یا “FFmpeg” برای تبدیل GIF به فرمت‌های ویدئویی استفاده کنید.

   bash:

   ffmpeg -i animation.gif -c:v libvpx -crf 10 -b:v 1M animation.webm

2. استفاده از تگ <video>: از تگ <video> برای نمایش محتوای انیمیشنی استفاده کنید.

   html:

   <video autoplay loop muted>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>

3. در وردپرس با المنتور: از ابزارک ویدئو در المنتور استفاده کنید تا محتوای انیمیشنی را به جای GIF به فرمت‌های ویدئویی نمایش دهید. افزونه‌های “MediaConvert” یا “Video Converter” نیز می‌توانند در این زمینه کمک کنند.

39. رفع خطای Preload Web Fonts

دلیل خطا: بارگذاری وب‌فونت‌ها می‌تواند زمان‌بر باشد و در نتیجه، متن‌های وب‌سایت با تأخیر ظاهر شوند یا به‌طور ناگهانی تغییر کنند (FOUT یا FOIT). این مشکلات می‌توانند تجربه کاربری را تحت تأثیر قرار دهند و به‌طور کلی عملکرد وب‌سایت را کاهش دهند. با استفاده از تکنیک “preload”، می‌توانید بارگذاری وب فونت ها را بهینه کنید و از این مشکلات جلوگیری کنید در غیر این صورت سرچ کنسول ارور preload web fonts را نمایش میدهد.

روش‌های رفع خطا:

1. استفاده از تگ <link rel="preload"> برای فونت‌ها: شما می‌توانید فونت‌های خود را با استفاده از تگ <link rel="preload"> بارگذاری کنید تا مرورگر از همان ابتدا بداند که باید این فونت‌ها را بارگذاری کند.

   html:

   <link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

2. بارگذاری فونت‌ها از سرویس‌های میزبانی فونت مانند Google Fonts: سرویس‌های میزبانی فونت معمولاً کدهای بهینه‌سازی شده‌ای را ارائه می‌دهند که شامل تگ‌های preload برای بهینه‌سازی بارگذاری فونت‌ها است.

   html:

   <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

3. در وردپرس با المنتور: اگر از المنتور استفاده می‌کنید، می‌توانید با افزونه‌هایی مانند “Asset CleanUp” یا “WP Rocket” فونت‌ها را بهینه‌سازی کنید. این افزونه‌ها به شما امکان می‌دهند تا فونت‌های وب‌سایت خود را preload کنید و از تأخیر در بارگذاری آن‌ها جلوگیری کنید.

40. رفع خطای Prevents Users from Pasting into Input Fields

دلیل خطا: ممانعت از چسباندن (paste) محتوا در فیلدهای ورودی (input fields) می‌تواند تجربه کاربری را کاهش دهد و کاربران را از انجام فعالیت‌های متداول و راحت بازدارد. این محدودیت‌ها ممکن است در فیلدهای رمز عبور یا سایر فیلدهای حساس اعمال شوند، اما در بسیاری از موارد این محدودیت‌ها غیرضروری هستند و باعث نارضایتی کاربران می‌شوند. به همین دلیل سرچ کنسول ارور prevents users from pasting into input fields را نمایش میدهد.

روش‌های رفع خطا:

1. حذف محدودیت‌های جاوااسکریپت: در صورتی که از کدهای جاوااسکریپت برای جلوگیری از paste در فیلدهای ورودی استفاده می‌کنید، این کدها را حذف کنید.

   javascript:

   // مثال کدی که باید حذف شود
document.querySelector('input').addEventListener('paste', function(event) {
event.preventDefault();
});

2. استفاده از ویژگی‌های HTML: در صورتی که با استفاده از ویژگی‌های HTML از paste جلوگیری می‌کنید، این ویژگی‌ها را حذف کنید.

   html:

   <!-- حذف onpaste="return false;" -->
<input type="text" id="example-input">

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

با پیروی از این روش‌ها، می‌توانید تجربه کاربری بهتری ارائه دهید و از محدودیت‌های غیرضروری که ممکن است کاربران را ناراضی کند، جلوگیری کنید.

نتیجه‌گیری

با توجه به اهمیت بالای بهینه‌سازی وب‌سایت‌ها برای موتورهای جستجو و بهبود تجربه کاربری، رفع خطاهای سرچ کنسول و رفع ارورهای سرچ کنسول گوگل از اهمیت ویژه‌ای برخوردار است. استفاده از ابزارهایی مانند لایت هاوس برای شناسایی مشکلات و حل مشکل لایت هاوس و رفع ارورهای lighthouse به شما کمک می‌کند تا عملکرد سایت خود را بهبود بخشید.

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