آموزش جی تی متریکس | قسمت ۷ - چگونه RBT را بهبود دهیم؟

آموزش جی تی متریکس

چهارشنبه 01 بهمن 1399

 
 
 
 

سرفصل این مطلب

 
 

چگونه امتیاز جی تی متریکس را بهبود دهیم؟

تا این قسمت از آموزش ها با فاکتورهایی مانند FCP,CLS,RBT و... آشنا شدیم، حال می‌خواهیم ببینیم که چطور این موارد را بهینه کنیم. در مقاله قبلی با مفاهیمی مانند Render Blocking Time و Render Blocking Resource آشنا شدیم که منابعی بودند که جلوی Render کامل را می‌گرفتند درواقع با بهینه کردن RBT ما تمامی موارد دیگر ا نیز بهینه کرده‌ایم.
 
 
چگونه امتیاز جی تی متریکس را بهینه کنیم
 
همانطور که در این تصویر می‌بینید برای نمایش با کامپیوتر نیازی به فایل css نداریم ولی برای نمایش در موبایل به فایل mobile.css نیاز است. برای اینکه یکی از مهم ترین منابعی که باعث Render blocking می‌شود فایل های CSS هستند. برای رفع آنها این کارها را باید انجام دهیم
  • Don’t add css with the @import rule
درون یک فایل css یک فایل دیگر css را با @ فراخوانی نکنید زیرا باعث یک Request اضافه می‌شود. به طور مثال سایت emofid این مشکل را دارد. اگر در جی تی متریکس قسمت  Structure وارد شدید و گزینهAvoid chaning ciritical request را دیدید به معنی این است که احتمالا این مشکل را دارد. حتی فونت ها را در css فراخوانی نکنید.
 
  • Use the media attributefor conditional css
یکی از کارهایی که در گذشته انجام می‌شد این بود که تمام CSS ها تجمیع می‌شدند و آن یک فایل فراخوانی می‌شد.این یک اشتباه است زیرا حجم آن css به قدری بالا رفته است که Load شدن آن زمانبر است. برای اینکه ببینید چه قسمت‌هایی از یک CSS مفید و در حال استفاده است می‌توانید از ابزار Coverage مرورگر کروم استفاده کنید. دراین ابزار می‌توانید ببینید چند درصد از CSS ها استفاده نمی‌شوند. روی نام فایل که کلیلک کنید محتوای فایل را نمایش می‌دهد و قسمت های مفید و کاربردی را با رنگ آبی نمایش می‌دهد. قسمت های قرمز رنگ استفاده نشده اند. قسمت های آبی را Extract کنیم و دریک فایل جدا نگه داری کنیم در مورد اینکه با آنها چه کار کنیم، در ادامه توضیح داده می‌شود.
 
  • Defer non-critical Css
قسمت آبی را که در یک فایل نوشته بودیم کپی می‌کنیم و در تگ Style   در هدر همان صفحه قرار می‌دهیم. قسمت های قرمز رنگ فایل Css را هم در یک فایل دخیره و فراخوانی می‌کنیم. در واقع حجم آن فایل اصلی با این کار کم می‌شود. نکته مهم این است که باید به صورت preload فراخوانی شوند کاملا مطابق تصویر زیر فراخوانی انجام شود
 
درواقع با دستورات فوق شما آنچه را که برای کاربر در لحظه اول بارگزاری مفید است با Embeded کردن در تگ Style بارگزاری می‌کنید و در تگ لینک CSS هایی که بعدا مورد نیاز است را دانلود می‌کنید.
 
یک روش دیگر هم می‌توانیم استفاده کنیم همانطور که گفتیم قسمت های قرمز رنگ CSS هایی بودند که در بارگزاری یک صفحه در لحظه اول مورد نیاز نبودند می‌توانیم قسمت های قرمز رنگ را نیز به بخش‌های کوچکتر تقسیم کنیم و درفایل های جداگانه ذخیره کنیم و درمواقع نیاز با media فراخوانی کنیم مثلا اگر کاربر صفحه را با موبایل درخواست دهد یک سری CSS لازم است که وقتی صفحه را با کامپیوتر درخواست می‌دهد نیازی به آنها نیست می‌توانیم این CSS ها را جداگانه ذخیره کنیم. این باعث میشود هر CSS فقط در موقع نیاز دانلود شود.
 
مانند تصویر زیر
 
 
  • Use the defer and sync attributs to eliminate render blocking java scripts
  • Load custom Fonts Locally

بهتر است فونت ها را Locallyصدا بزنیم  واز CDN یا جاهای دیگر فراخوانی نکنیم. مهمترین قسمت فونت این است که آن را Preload و swap کنیم مانند دستور زیر

 

رفع RENDER BLOCKING TIME

تا اینجای مقاله با مفهوم RENDER BLOCKING TIME آشنا شدید و اکنون زمان آن رسیده است که با روش‌های رفع و بهبود آن آشنا شوید. برای بهبود RBT می‌خواهیم 5 راه کار اصولی که معمولاً آن را بهبود می‌بخشد، می‌پردازیم. البته پیش از آن که بخواهیم این روش ها را بررسی کنیم، بهتر است بگوییم که بهبود RBT نیازمند دانش و تجربه برنامه‌نویسی است تا سایت شما با مشکل مواجه نشود. این روش ها عبارتند از:

انتقال تگ به انتهای HTML

مهم ترین مسئله ای که باعث می‌شود با خطای RBT مواجه شوید، این است که هنگام رسیدن مرورگر به منابع اصلی و قصد دانلود و اجرا کردن آن ها مشکلی به وجود می‌آید که باعث مشکل render blocking می‌شود. شما به کمک انتقال سند HTML به انتهای صفحه وبسایت خود به راحتی می‌توانید این مشکل را برطرف کنید. البته توجه داشته باشید که این کار باید توسط یک متخصص کدنویسی انجام شود تا به خوبی از وضعیت کدهای شما اطلاع داشته باشد. از طرف دیگر، کدنویس باید اطلاعات خوبی از ساختار (Structure) داشته باشد تا به راحتی بتواند منابع شما را به پایان صفحه منتقل کند. برای آن که بتوانید این مشکل را رفع کنید، بهتر است از تگ‌های <script> و <link> در خطوط مربوط به منابع مهم استفاده کنید تا ابتدا منابع ضروری شما بارگذاری شده و سپس منابع بعدی بارگذاری شوند. این مسئله به First Paint و بهینه سازی تجربه کاربری سایت شما کمک زیادی می‌کند.

استفاده از ویژگی defer یا async

این ویژگی به شما کمک می‌کند تا هنگامی‌که منابع موردنظر شما توسط مرورگر در حال بررسی و اجرا هستند، منابع بعدی توسط مرورگر شما دانلود شوند. اگر بخواهیم این موضوع را ساده تر بیان کنیم، باید بگوییم زمانی که منابع شما در حال اجرا هستند، منابع دیگر شما render blocking نباشند! این مسئله باعث می‌شود تا اگر خطای Eliminate render-blocking resources وجود دارد، رفع شود. البته این موضوع خیلی هم ساده نیست و باید با اطلاعات کافی در مورد کدنویسی و آگاهی کامل از ساختار سایت، کدهای سایت را بازنویسی کنید. حتی گاهی اوقات شما نمی‌توانید به سادگی از تگ‌های <script> و <link> استفاده کنید که با اطلاعات کامل باید این موضوع را پوشش دهید.

استفاده از ویژگی media برای جدا کردن CSS

پیش از آن که بخواهیم به بررسی این موضوع بپردازیم، لازم است بگوییم که تقریباً تمام فایل‌های CSS از نوع render blocking هستند. به همین دلیل می‌تواند مشکلات زیادی برای سایت شما به وجود بیاورد و بهتر است با کمک روش‌های مناسب، کدهای CSS را حذف یا بهینه سازی کنیم. یکی از بهترین روش‌ها برای بهینه‌سازی آن، استفاده از ویژگی media است که با کمک آن می‌توان فایل‌های استایل‌دهی سایت را بر اساس نوع دستگاه موردنظر (موبایل یا دسکتاپ) دسته‌بندی کنیم. با کمک این ویژگی، مرورگر تنها بخشی را که برای کاربر مناسب است را بررسی می‌کند؛ مثلاً اگر کاربر با موبایل وارد سایت شده باشد، دیگر فایل‌های استایل‌دهی مربوط به دسکتاپ را بررسی نمی‌کند و این مسئله باعث رفع شدن خطای Eliminate render-blocking resources خواهد شد.

استفاده از روش‌های دیگر برای رفع این خطا

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

  • استفاده از متد inline برای فایل‌های CSS و JavaScript
  • فشرده کردن منابع نوشته محور با استفاده از قابلیت G-Zip
  • استفاده از افزونه‌های مختلف در این زمینه برای سایت‌های وردپرسی

با کمک این 3 روش هم می‌توانید خطاهای خود را رفع کنید که البته دو مورد اول آن نیازمند دانش کدنویسی است.

از یک متخصص سئوی مسلط به کدنویسی کمک بگیرید!

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

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

خطای RENDER BLOCKING TIME یکی از مهم‌ترین ایراداتی است که هنگام گزارش‌گیری سایت GTmetrix با آن روبرو می‌شوید! این خطا باعث می‌شود تا فایل‌های سایت شما به صورت کامل بارگذاری نشود و در نهایت تجربه کاربری سایت شما به خطر می‌افتد. بنابراین اگر هنگام گزارش گرفتن برای سایت خود متوجه شدید که این خطا وجود دارد، باید هر چه سریع‌تر آن را رفع کنید. در این مقاله به بررسی چند راه‌کار مهم پرداختیم تا اگر خودتان کدنویسی بلد هستید، این کار را انجام دهید. البته در سیستم‌های مدیریت محتوای عمومی‌نظیر وردپرس، با کمک پلاگین‌ها می‌توانید بسیاری از این خطاها را رفع کنید اما در سیستم‌های دیگر باید حتماً دانش کدنویسی داشته باشید.

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

 

تیم تحریریه سئولب

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

بانس ریت (Bounce Rate) چیست؟ و چطور به سرعت آن را بهبود دهید

آموزش جی تی متریکس | قسمت ۱ - معیارهای سنجش جی تی متریکس

آموزش جی تی متریکس | قسمت ۲ - TTFB چیست؟

نظرات کاربران

zahra
چهارشنبه, 26 خرداد 0

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

 

سئولب در پاسخ به zahra
یکشنبه, 30 خرداد 0
نظر :سلام زهرا بله حتما یادمون میمونه که به این مباحث توی فصل جدید آموزش های جی تی متریکس بپردازیم. ممنونیم که ما رو دنبال می‌کنید.
مهسا راست کردار
یکشنبه, 22 فروردین 0
با سلام خدمت جناب آقای حسینی از آموزش های شما برای کاهش و بهبود سرعت سایت ممنونم. در این ویدئو نکات خیلی مهم و کلیدی رو آموزش دادید. توی ویدئو گفتید که حتما این آموزش ها رو روی سایت های مد نظرمون تست کنیم و بعد تاثیری که روی سرعت سایت داره و اعلام کنیم. من قصد دارم همین کار ها رو یعنی جدا کردن css های کاربردی صفحه و فراخوانی آن توی فایل جداگانه با فرمتی که خودتون توی ویدئو فرمودید رو انجام بدم. CSS های صفحه رو هم جدا کردم . سایتی من با وردپرس طراحی شده. الان نمی دونم کد های هد صفحه رو به چه صورت باید ویرایش کنم و آدرس فایل css جدیدم رو در صفحه به صورتی که گفتید؛ قرار بدم. میشه در این مورد من رو راهنمایی کنید. که تغییراتی که آموزش می دید برای اعمال کردن توی سایت های وردپرسی به چه صورت باید انجام بشه. پیشاپیش ممنون از زمانی که میگذارید.
سئولب در پاسخ به مهسا راست کردار
دوشنبه, 30 فروردین 0
نظر :با سلام مهسای عزیز همونطور که فرمودید کروم یه افزونه برای CSS داره. برای این کار کافیه توی افزونه UCSS اون ۳ موردی که نام بردید لازم هست رو بردارید و در قسمت هد اون قالبی که در وردپرس استفاده می کنید قرار بدید. در قسمت آخر هدتون UCCSS رو قرار می دید اما به شرطی که زیر ۶۰ یا ۷۰ کیلوبایت باشه خوبه که اونجا قرار بگیره. ولی ما بقی CSSهایی هستن که باید دیفر بشن که در ویدیوهای جی تی متریکس ما به طور کامل آموزش داده شدن میتونید ویدیوهای مارو مشاهده کنید. برای راحتی کار هم می تونید افزونه لایت اسپید رو در وردپرس نصب کنید ممکن است خیلی برای شما کارآمد نباشه اما افزونه مفیدی هست. امیدوارم به خوبی تونسته باشیم پاسخ سوالتون رو بدیم.

نظر تازه ای ثبت کنید

در حالتی که وارد سایت شده باشید درج کامنت منجر به کسب امتیاز در کلاب می شود

ثبت نام
ورود