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

 

 

 

 

 

 

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

تا این قسمت از آموزش ها با فاکتورهایی مانند FCP,CLS,RBT و... آشنا شدیم، حال می‌خواهیم ببینیم که چطور این موارد را بهینه کنیم. در مقاله قبلی با مفاهیمی مانند Render Blocking Time و Render Blocking Resource آشنا شدیم که منابعی بودند که جلوی Render کامل را می‌گرفتند درواقع با بهینه کردن RBT ما تمامی موارد دیگر ا نیز بهینه کرده‌ایم.

 

آموزش ابزار جی تی متریکس (GTmetrix)

 

 

همانطور که در این تصویر می‌بینید برای نمایش با کامپیوتر نیازی به فایل css نداریم ولی برای نمایش در موبایل به فایل mobile.css نیاز است. برای اینکه یکی از مهم ترین منابعی که باعث Render blocking می‌شود فایل های CSS هستند. برای رفع آنها این کارها را باید انجام دهیم

درون یک فایل css یک فایل دیگر css را با @ فراخوانی نکنید زیرا باعث یک Request اضافه می‌شود. به طور مثال سایت emofid این مشکل را دارد. اگر در جی تی متریکس قسمت  Structure وارد شدید و گزینهAvoid chaning ciritical request را دیدید به معنی این است که احتمالا این مشکل را دارد. حتی فونت ها را در css فراخوانی نکنید.

 

یکی از کارهایی که در گذشته انجام می‌شد این بود که تمام CSS ها تجمیع می‌شدند و آن یک فایل فراخوانی می‌شد.این یک اشتباه است زیرا حجم آن css به قدری بالا رفته است که Load شدن آن زمانبر است. برای اینکه ببینید چه قسمت‌هایی از یک CSS مفید و در حال استفاده است می‌توانید از ابزار Coverage مرورگر کروم استفاده کنید. دراین ابزار می‌توانید ببینید چند درصد از CSS ها استفاده نمی‌شوند. روی نام فایل که کلیلک کنید محتوای فایل را نمایش می‌دهد و قسمت های مفید و کاربردی را با رنگ آبی نمایش می‌دهد. قسمت های قرمز رنگ استفاده نشده اند. قسمت های آبی را Extract کنیم و دریک فایل جدا نگه داری کنیم در مورد اینکه با آنها چه کار کنیم، در ادامه توضیح داده می‌شود.

 

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

 

درواقع با دستورات فوق شما آنچه را که برای کاربر در لحظه اول بارگزاری مفید است با Embeded کردن در تگ Style بارگزاری می‌کنید و در تگ لینک CSS هایی که بعدا مورد نیاز است را دانلود می‌کنید.

 

 

مانند تصویر زیر

 

 

 

رفع 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 پرداختیم تا اگر سایت شما چنین مشکلی دارد، سریع آن را رفع کنید. اگر سوالی در مورد این مقاله دارید یا در هنگام رفع خطاها با مشکلی مواجه شدید، کافی است در بخش نظرات سوال یا مشکل خود را مطرح کنید تا تیم سئولب شما را در این زمینه یاری کند.