یادگرفتن برطرف کردن ۳۹ خطای گزارش Structure در جی تی متریکس تازه
به دنبال به رسیدگی نحوه برطرف کردن معیارها و ایرادهای گزارش Structure میپردازیم. برچسب Impact یا این که همون اثر هر غلط براساس حالت برگه شما ممکنه مشترک باشه. همینطور با کلیک روی هر کدوم از این مشکلات، گزارش بدون نقصترش براتون گشوده میشه. تو این نصیب براساس نوع میزان، گزارش ایحاد گردیده و پارامترهاش متفاوته که در پی سئو در مشهد نظارتشون می کنیم.
Avoid an excessive DOM size : عبارت DOM که مخفف Document Object Model است، به زبون خیلی بی آلایش نمودار درختی عنصرها مو جود در گواهی HTML میباشد. یک تارنما از موادسازنده مختلفی مثل تصاویر، هیبتها، جدولها و…تشکیلشده و برای اینکه این موادسازنده بارگذاری بشن، یک ساختار درختی دارا هستند و از شرایط DOM به کارگیری میشه. درحال حاضر هرچقدر که تعداد عنصرها DOM بیشتر باشند، وسعت DOM ارتقا پیدا میکنه و ساختار تارنما از وضعیت با صرفه دورتر میشه. درنتیجه اجرای ورقه کندتر خواهد بود.
خطای Avoid an excessive DOM size شبیه خطای Reduce the number of DOM elements در ورژن پیشین GTmetrix میباشد. این واحد سنجش از گزارش Structure جی تی متریکس میگه تعداد ارکان DOM رو تا حد ممکن کاهش بدیم. هرچند به طور تقریب میشه بیان کرد کهاین نادرست قابل برطرف کردن وجود ندارد. چراکه از معیارهای خیلی مشقت بار GTmetrix محسوب میشه و برای سئو تعداد ارکان DOM نیاز به نرم افزار نویس متخخص و حرفه ای داریم. با این حالا آقای آریافر در نوشته ی علمی خطای Avoid an excessive DOM size بیشتر درباره این ارور در گزارش Structure جی تی متریکس سخن کردند.
Avoid chaining critical requests : این واحد سنجش GTmetrix درباره خودداری از ساخت و ساز درخواستهای زنجیرهای بحرانی در کاغذ ست. خواسته از درخواستهای زنجیرهای بحرانی یا این که chaining critical requests ، درخواستهای پی در پی است که به همدیگه متعلق میباشند و از طرف دیگه برای Render شدن کاغذ ضروری محسوب میشن و قطعا بایستی جواب داده بشن تا ورقه Render بشه (برای همینه که بهشون بحرانی گفته میشه). درخواستهای زنجیرهای وقت گیر سبب توقف در Render شدن کاغذ میشن و در سود به شدت موجب کاهش سرعت بارگذاری ورقه خواهند شد. بدین ترتیب کاهش این نوع درخواستها منجر کاهش تعقل در بار گذاری ورقه میشه. برای تدبیر از التفات این ایراد و شیوه برطرف کردنش، نوشته ی علمی رفع خطای Avoid chaining critical requests رو بخونید.
Avoid CSS @import : ترازو Avoid CSS @import جزء مواردیه که تو ورژن پیشین GTmetrix هم وجود داشت و یکیاز ۴ واحد سنجش Structure در GTmetrix تازه است که وابسته به خویش ابزار جی تی متریکس میباشند و به Google Lighthouse تخصیص ندارند. مشی import@ یک پوشه css رو داخل یک فولدر css دیگه فراخوانی میکنه. ولی GTmetrix با این روال مخالفه و میگه نباید ازش به کار گیری بشه. داده ها بیشتر رو میتونید
()Avoid document.write : استعمال از ()document.write میتونه سبب بروز مشکلاتی برای مثال ارتقا Blocking Time و ارتقا مجال بار گذاری کاغذ بشه. این ایراد برای کاربرانی که اینترنتشون کندتره، شدیدتر خواهد بود. استعمال از ()document.write میتونه فرصت اکران محتوای کاغذ رو حتی تا بیش تر از ۱۰ ثانیه به تعویق بندازه. به این ترتیب نباید ازش به کارگیری کنیم. به همین برهان ورژن نو مرورگرهایی مثل کروم در موقعیت خاصی ()document.write رو جاری ساختن نمیکنند. برای پرهیز از بروز این نادرست در Structure جی تی متریکس نباید از ()document.write در صفحاتمون به کارگیری کنیم. جهت کسب اطلاعات بیشتر درباره التفات این ارور، نوشتهی علمی خطای ()Avoid document.write رو بازرسی بفرمایید.
Avoid enormous network payloads : این واحد سنجش از محرمانه خطاهای Structure اشاره به وسعت کلی صفحه های ما داره. تک تک منابع جانور در شیت مثل عکسها، CSS ها، JavaScripts ها و… انتخاب کننده وسعت شیت ست که GTmetrix ازش با تیتر Network payload حافظه میکنه. طبیعیه که هرچقدر وسعت کاغذ کمتر باشه، سرعت بار گذاری خوب خواهد بود. به دلیل آن که دراینصورت منابع سریعخیس دانلود میشن.
چندتا راهحل بهتر برای کاهش وسعت کاغذ دربرگیرنده سئو تصاویر کاغذ و کاهش وسعت CSS ، کاهش وسعت JacaScript و به کارگیری از کش مطلوب میباشد. اما در گردهمایی ۱۷ یادگرفتن جی تی متریکس بهطور کامل درباره ارور Avoid enormous network payloads حرف کردیم.
Avoid large layout shifts : بیشتر ما تجارب مشاهده صفحاتی رو داشتیم که موقع بار گذاری شدن ورقه، ارکان شیت بهطور ناگهانی جابجا میشن. به عنوان مثال بار گذاری ناگهانی یه عکس در بالای کاغذ، سبب ساز انتقال متن و عکسهای پایینی میشه. مراد از layout shifts هم انتقال دکوراسیون کاغذ ست. برای پرهیز از تجارب کاربری بد، نباید بذاریم layout shift ها در صفحه ها وبسایت ما رخداد بیافته.
خطای Avoid large layout shift به نظارت همین قضیه میپردازه و تاثیر بدون واسطه روی امتیاز CLS در گزارش Performance جی تی متریکس داره. CLS معیاری برای اندازه گیری ثبات بصری در حین بار گذاری یک برگه است. ما در نوشتهعلمی CLS چیست واحد سنجش Cumulative Layout Shift رو با یکسری نمونه توضیح دادیم و طرز seo CLS رو هم ذکر کردیم. پس برای حل نقص Avoid large layout shift بایستی این نوشتهعلمی رو تحقیق فرمایید.
Avoid long main-thread tasks : این خطای Structure اشاره بهاین مورد داره که رویدادهایی مثل تجزیه فولدرهای HTML و CSS و یا این که اجرای فولدرهای JavaScripts نباید بیش تر از حد استاندارد (۵۰ میلی ثانیه) ارتفاع بکشه. چراکه سبب سبب به تعویق افتادن First Paint و Time to Interactive (مجال تعامل) برگه گردد. به ذکر معمولیخیس، اگه تجزیه یا این که اجرای این پوشهها وقت گیر بشه، سبب میشه مرورگر نتونه به بقیه درخواستهای ضروری برای بارگذاری ورقه برسه؛ و این یعنی کاهش سرعت بار گذاری و تجربیات کاربری بد. داده ها جامع رو در نوشته ی علمی رفع خطای Avoid long main-thread tasks نوشتیم.
Avoid multiple page redirects : اگرچه بعضی اوقات به کارگیری از ریدایرکت در شغل ما ضروری به لحاظ میرسه، ولی لازمه بدونیم ریدایرکتها تا حدی منجر تانی در بارگذاری برگه میشن. پس می بایست تا جایی که میشه از ریدایرکت مازاد و غیرضروری دوری کنیم. همینطور میشه با به کارگیری از قابل انعطاف افزارهایی مثل Screaming Frog مجموع ریدایرکتهای وب سایت رو نظارت کنیم و لینک و پیوندهای ورودی (Inlinks) رو به کاغذ مقصد تغییر و تحول بدیم. اینجوری تعداد ریدایرکتهایی که یوزرها تجربیات مینمایند کمتر میشه. این خطای Structure در GTmetrix نو شبیه خطاهای Avoid landing page redirects و Avoid URL redirects در ورژن گذشته می باشد.
Avoid non-composited animations : برای ادراک این خطای Structure بایستی اولیه الگوریتم Render شدن شیت رو رسیدگی کنیم. مبنی بر تصویر تحت، برای Render شدن کاغذ اجرای این پروسه لازمه. نکته خیلی اصلی اینه که اجرای هر کدوم از این فرایند، متعلق به مرحله پیشین می باشد. یعنی برای اجرای هر مرحله، مرورگر از حاصل کوشش مرحله قبلی به کار گیری میکنه.
شیوه Render شدن شیت بوسیله مرورگر
از جمله اگه کدهای شما سبب ساز فعال سازی Layout بشه، Paint و Composite هم مجدد می بایست انجام بشن. هم اکنون مراد از non-composited animations هر نوع انیمیشنی است که سبب ساز راهاندازی هر مورد از پروسه پیشین بشه. دراینصورت مرورگر بایستی شغل بیشتری جاری ساختن بده و در سود بار گذاری شیت کندتر شکل میگیره و مخاطب می بایست فرصت بیشتری رو چشم به راه بمونه. به همین استدلال GTmetrix دراین نصیب از گزارش Structure پیشنهاد میکنه نباید از non-composited animations به کارگیری کنیم. ولی برطرف کردن این خطای Structure نیاز به مهارت بسیار بالا در نرمافزار نویسی داره و بی آلایش وجود ندارد.
عدم به کارگیری از non-composited animations در کاهش انتقالهای ورقه (layout shifts) هم اثر داره و ممکنه سبب بهبود این غلط هم بشه. برعکس، هرچقدر از برنامه خردسالانهای non-composited بیشتر به کار گیری بشه، انتقال ارکان کاغذ ما بیشتر خواهد بود. هرچقدر هم انتقال موادتشکیل دهنده بیشتر باشه، کارایی (Performance) ورقه و تجربیات کاربری (UX) برگهمون ضعیفخیس محسوب میشه. ولی تو نوشتهعلمی برطرف کردن خطای Avoid non-composited animations تمامی این موردها رو بدون نقصخیس توضیح دادیم.
Avoid serving legacy JavaScript to modern browsers : این خطای نو Structure به ذکر بی آلایش میگه از کدهای جاوا اسکریپت نسخه کهن (ES5) در مرورگرهای تازه به کار گیری نکنید. بهجاش از واپسین استاندارد جاوا اسکریپت یعنی ES6 به کارگیری فرمائید. به همین آسانی. ولی معنی بی آلایش ست؛ ولی برطرف کردن این اشتباه نیاز به وجود اپ نویس مسلط به JavaScript داره. اگه وبسایت شما این نقص رو داره، نوشتهی علمی خطای Avoid serving legacy JavaScript to modern browsers رو بازرسی بفرمایید.
Combine images using CSS sprites : این نادرست هم دومین آیتم از ۴ خطایی میباشد که جزء معیارهای خویش GTmetrix محسوب میشه و در ورژن قبل GTmetrix هم وجود داشت. به این ترتیب جزء معیارهای منحصر Lighthouse محسوب نمیشه. با این درحال حاضر مداقه خودش رو داره و نمیشه خاطرنشان کرد اصلی وجود ندارد.
اساسا برای اینکه مرورگر بتونه عکسهای ورقه ما رو به استفاده کننده اکران بده، درخواستهایی رو به سرور ارسال میکنه. هرچی تعداد عکسهای ورقه بیشتر باشه، تعداد درخواستها هم بیشتر خواهد بود و مخاطب می بایست فرصت بیشتری رو در انتظار بارگذاری شدن شیت بمونه. ولی به یاری طرز CSS sprites میتونیم تصاویر رو ترکیب کنیم و با ادغام و یکی از کردن عکسهای کاغذ، این اشتباه رو برطرف کنیم و سبب ساز بهبود سرعت وبسایت بشیم.
Defer offscreen images : وقتی که وارد کاغذای میشیم و موادسازنده برگه در درحال حاضر بارگذاری شدن میباشند، ما در نگاه نخستین صرفا نصیب بالایی ورقه رو می بینیم و بخشهای زیرخیس تو مشاهده کرد ما قرار ندارند. پس منطقی به لحاظ میرسه که بارگذاری عکسهای این نصیب رو به ژرف اندیشی بندازیم تا نخستین منابع ضروریخیس دانلود و بارگذاری بشن. بهاین تکنیک Lazy Load یا این که بار گذاری تنبل گفته میشه. برطرف کردن این اشتباه اساسی و ولی به طور تقریب بی آلایش است. برای یادگیری طرز استعمال از بارگذاری تنبل نوشتهعلمی ارور Defer offscreen images رو تفحص فرمایید.
پیوند دوفالو «do follow» در مقابل پیوند نوفالو «no follow»