Menu
- دسته‌بندی: سئو بهینه سازی ، طراحی سایت
- زمان مطالعه: 13 دقیقه
RBR چیست؟ چگونه برای بهینه سازی آن اقدام کنیم؟
تمام وب‌سایت‌های امروزی که توسط کاربران باز می‌شوند ، همواره باید از سرعت لود خوبی برخوردار باشند. این سرعت لود هم ازنظر اینکه روی نتایج خوب سرچ گوگل نمایش داده شود و از طرفی نسبت به هدف وبمستر ، افزایش ورودی از گوگل داشته باشد بایستی به‌خوبی رعایت شود تا در سریع‌ترین تایم ممکن تمام پروسه لود برای کاربر انجام شود.
با خود می‌گویید که RBR چیست و در سرعت لود سایت چه تأثیری دارد. اگر یک وبمستر و یا دنبال کننده این مباحث هستید ، می‌دانید که لود سایت از چند بخش تقسیم‌شده و باید برای اینکه نسبت به این تقسیم‌بندی یک رفتار کلی در طراحی سایت داشته باشیم.
RBR در واقع معیاری برای اندازه گیری است که در آن ریسورس ها و منابع اجرایی مانند کدهای js و css چقدر زمان می‌برد تا توسط مرورگر برای کاربر به نمایش گذاشته شود. این منابع همواره به طور کلی حجم بسیار زیادی از لود سایت را به خود اختصاص می‌دهند. که باید بدانید نسبت به مشکلات و ارور های پیش‌آمده اپتیمایز RBR چیست و چگونه باید آن را انجام دهیم.
در واقع مواردی که در طول بارگذاری و مرحله رندرینگ اطلاعات در مرورگر کاربر شکل گرفته و باعث ایجاد کند شدن مرحله رندرینگ شود را ارور RBR می‌گویند. در ادامه این مقاله که RBR چیست نام دارد می‌خواهیم به کل مباحث معیار های مهم لود سایت و خود این معیار و همچنین اپتیمایز RBR بپردازیم. پس تا انتهای این مقاله با ما همراه باشید.
پادکست :
RBR چیست؟ آشنایی با معیارهای Gt metrix
برای اینکه بدانید ار بی ار چیست ، بهتر است با برخی از معیارهای لود سایت و جی تی متریک آشنا شوید تا بتوانید این موضوع را بهتر درک کنید. در قسمت زیر به مهم‌تر و اصلی‌ترین معیارهای جی تی متریکس و لود سایت اشاره و آن‌ها نام‌برده‌ایم که هرکدام را توضیح مختصری داده‌ایم.
- Speed Index : SI
- first contentful paint : FCP
- Largest Contentful Paint : LCP
- Time to Interactive : TTI
- Total Blocking Time : TBT
- Cumulative Layout Shift : CLS
البته این را در نظر داشته باشید که معیارهای دیگری ممکن است وجود داشته باشد که در این مقاله گنجایش گفتن آن نیست و می‌توانید درباره آن‌ها به‌طور کامل در مقالات دیگِ پویا وب مطالعه کنید.
مورد اول Speed Index و SI : به شاخص سرعت بارگذاری یک سایت اشاره دارد. سرعت بارگذاری و لود اطلاعات در هر سایتی را نسبت به آیتم‌های موجود در آن را با این معیار نشان می‌دهند.
مورد دوم first contentful paint و fcp : همان موضوع این مقاله است ، یعنی اف سی پی چیست؟ اینجا یکی از ریز معیارها ملزم به گفتن است. قبل از خود FCP معیاری به نام FP وجود دارد که قبلاً معیار اندازه‌گیری با آن بوده و الآن دیگر جواب‌گو نیست. برای همین از معیار first contentful paint استفاده می‌شود. این معیار به معنی اولین محتوای لود شده که می‌تواند نوشته‌ها ، عکس‌ها و آیتم‌های موجود دیگر در اول صفحه باشد ، است.
مورد سوم Largest Contentful Paint و LCP : به معیاری گفته می‌شود که آیتم‌های موجود در صفحه کاملاً بارگذاری شده است و برای کاربر قابل‌درک و رؤیت است. این معیار از سال 2020 برای تجربه کاربری بهتر کاربران در لایت هاوس (lighthouse) ایجاد و تائید شده.
مورد چهارم Time to Interactive و TTI : که به میزان و معیاری گفته می‌شود یک site قابلیت تعامل با کاربر را دارد و مرورگر ما نیز قابل انجام دستورات مربوطه را داشته باشد.
مورد پنجم Total Blocking Time و TBT : به‌طورکلی زمان بین دو معیار FCP و TTI را اندازه‌گیری می‌کند. این مقدار ، به زمانی گفته می‌شود که کاربر کلاً هیچ دسترسی و قابلیت کار کردن با آیتم‌های درون سایت ، از لحظه ظاهر شدن تا بندر شدن کامل را ندارد.
مورد ششم Cumulative Layout Shift و CLS : به معیار و امتیاز عملکردی گفته می‌شود که از ثبات بصری در حین رندر های آخر وب site درخواست شده ، توسط مرورگر است. این معیار و متریک اندازه‌گیری ، جابجایی‌های غیرمنتظره و یهویی عناصر و المان‌های موجود در سایت را اندازه‌گیری می‌کند و به آن امتیاز می‌دهد.
معیارهای حائز اهمیت و نکات مهمی در جهت آشنایی کامل با gtmetrix وجود دارد ، که برای سئو کردن یک site بسیار مهم است.
در نظر داشته باشید که تمام معیارهای بالا برحسب زمان و کیفیت در آن مربوط است که بایستی طبق تمامی این الگوها ، طراحی و سئو site صورت بگیرد.
در صورت اینکه می‌خواهید بدانید هرکدام از این معیارها و شاخص‌ها به چه شکل مراحل و الگوریتم‌های مربوط به خود را مسنجد و به لود سایت امتیاز می‌دهند ، می‌توانید به سایر مقالات ما که در این زمینه است مراجعه کنید.
در ادامه به خود ماجرا RBR چیست می‌پردازیم که ارتباط آن با برخی از معیارهای جی تی متریکس را شناخته و آن را بهتر درک می‌کنید.
دلیل بروز ارور RBR چیست؟
این ارور که در واقع مخفف واژه render blocking resources است ، به معنی بلاک‌ها و موانعی است که باعث کند شدن رندر و بارگذاری منابع مربوطه است. اگر بخواهیم نام دیگر این معیار را به شما بگوییم می‌شود ، RBT یا همان render blocking time است که به‌منظور مدت‌زمان بلاک بودن عناصر مربوطه در این پروسه است.
به‌طورکلی می‌خواهیم بدانیم که دلیل بروز این ارور ار بی ار چیست.
در نظر داشته باشید که این هم یک ارور و هم بک معیار و شاخص اندازه‌گیری به‌حساب می‌آید.
به‌طورکلی وظیفه مرورگر کاربر این است که تمام اطلاعات درخواست شده از وب‌سایت و سرور مدنظر ، را دانلود ، تحلیل و پردازش ، و در آخر هم محتوا مدنظر را به پیکسل‌های قابل‌درک رندر کند. این پروسه به‌طورکلی از شاخص‌ها متفاوتی تشکیل‌شده باید تمام آن‌ها به‌صورت ترتیبی و بهینه‌شده صورت گیرند.
حال هر چیزی که در طول این پروسه رندر شدن محتوا در مرورگر شود که از سمت سرور و سیستم وب‌سایت مذکور باشد ، می گویند که رندر بلاکینگ صورت گرفته.
برای اینکه بهتر بتوانید درک کنید RBR چیست به این صورت می‌توان گفت که ، در حین بارگیری منابع توسط مرورگر کاربر ، سیستم اول در حال دانلود آن‌ها است و کدها اطلاعاتی که باید در آن اولین علائم یا همان first paint صورت بگیرد به تعویق می‌افتد و باعث کند شدن پروسه رندرینگ می‌شود.
این فایل‌های منابع معمولا از کدهای js و css هستند که باعث می‌شود بدون در نظر گرفتن اصول کد نویسی به مشکلات Eliminate render-blocking resources بر می‌خوریم. از خود می‌پرسید که بهترین حرکت برای جلوگیری از این ارور ار بی ار چیست؟ خب مسلماً بهینه‌سازی RBR از مهم‌ترین حرکت‌های جلوگیری از این اتفاق است.
یکی از مواردی که در کدهای صفحات سایتتان باعث بروز این ارور میشه ، شکل کد نویسی شما است. در قسمت زیر به شما این موارد رو کامل توضیح دادیم :
تگ‌های <script> که تو <head> باشند اما ویژگی‌های defer یا async رو نداشته باشند.
تگ‌های <“link rel=”stylesheet> که ویژگی‌های disabled یا media نداشته باشند.
تگ‌های <“link rel=”import> که ویژگی async نداشته باشند.
دلیل بهینه‌سازی RBR چیست؟
ببینید به‌طورکلی برای اینکه وب‌سایت ما از بابت لود آن و اینکه در صورت ورود کاربر به آن کندی و معطلی ایجاد نشود ، بایستی تمام مراحلی که در صدد لود سایت است را بشناسیم و آن‌ها را بهینه کنیم. اما در مورد اینکه دلیل بهینه‌سازی RBR چیست باید به شما بگویم . این بهینه‌سازی برای اینکه بین سایر معیارها و شاخص‌ها نسبت به هم و ترتیب لود ، ارتباط خوبی داشته باشند ، بایستی بهینه‌سازی شود.
مهم ترین دلیل اپتیمایز RBR ، تأثیر در سئو سایت و ورودی‌های گوگل دارد. به طور کلی نسبت به فعالیت و رفتارهایی که کاربر در صورت مواجه‌شدن در سایت‌هایی با RBR و RBT بالا دارد، رشد سایت پایین بوده و ورودی‌های گوگل پایین آمده. همچنین از مهم‌ترین دلایل این است که خود سرور و پردازش آن نیز بهینه شود تا در سریع‌ترین زمان اطلاعات و منابع موردنیاز render شوند.
در قسمت بعد تأثیر RBR روی سئو سایت را خواهیم پرداخت.
تأثیر بهینه‌سازی RBR روی سئو سایت
همان‌طور که می‌دانید سئو ، مجموعه فعالیت‌هایی است که در جهت بهینه‌سازی موتورهای جست‌وجوگر نسبت به کیورد هایی که سرچ می‌شود است. جدای اینکه شما باید نسبت به کیورد مورد نظر ، تولید محتوا انجام دهید ، باید راه رسیدن و زمان رسیدن به این محتوا را ، از اصول سئو و رفتارهای مناسب آن بدانید.
همان طور که می‌دانید راه رسیدن همان لینک‌هایی که به نمایش گذاشته می شود که با کلیک بر روی آن‌ها می‌توان به سایت و اطلاعات مورد نظر رسید. اما اینکه در چه مدت زمان و با چه روش و کیفیت به این محتوا رسیدن مقوله‌ای جدا در سئو و بهینه‌سازی است.
همان‌طور که قبلاً هم چندین بار گفته شد ، لود سایت از چند مرحله تشکیل شده و این مراحل باید به ترتیب و بهینه شده صورت گیرد. به عنوان مثال وب سایتی را داریم که فقط چند دقیقه طول می‌کشد تا سرور مذکور آن درخواست ما را اجرا کند ، چه برسد به اینک محتوا را رندر کند.
اما وب‌سایتی داریم که با کلیک بر روی لینک آن با سرعت بسیار بالا و عجیب و غریبی به صفحه مورد نظر هدایت می‌شویم و اطلاعات های ما در کسری از ثانیه رندر و به نمایش گذاشته می‌شود.
الگوریتم موتورهای جست‌وجوگر به خصوص گوگل که خود آن یکی از بنیان‌گذاران gtmetrix است ، به این شکل است که همواره نسبت به امتیاز و تحلیلی که ربات‌ها و کراولر های گوگل می‌دهد و از طریق رفتار کاربران در حین بازدید از یک سایت ، یک معدل‌گیری دارد.
این تحلیل از کاربران و کراولر ها می‌توان به صورت رفتارهای کاربر ، سرعت لود سایت ، محتوای درون سایت ، تعداد کلیک در سایت و … که همگی دسته الگوریتم ها و فاکتور های مهم موتور های جست‌وجوگر را می‌سازد.
در مجموع این معدل‌گیری به یک امتیاز کلی تبدیل می‌شود که به سئو سایت شما امتیاز و رتبه در نتایج جست‌وجو می‌دهد. حال تأثیر RBR چیست؟ ببینید دوستان همان‌طور که گفتیم سرعت لود سایت یک بخشی از امتیازهای موتور جست‌وجوگر در سئو محسوب میشه و خب این امتیاز را می‌توان در ابزارهای مختلفی که معروف‌ترین آن gtmetrix است دید.
مهم‌ترین حرکتی که می‌توان از طریق این ابزار دید این است ، سرعت و مراحل لود سایت و معیارها مهم را بسنجید ، ارور ها را مشاهده کنید و از طریق waterfall خوانی در این ابزار هر کدام از قسمت‌های مربوط از RBR که به performance امتیاز منفی داده را شناسایی کنید.
در این قسمت نسبت به رنگ‌های تعیین‌شده در بارگیری ، بارگذاری ، رندرینگ و بلاکینگ ، می‌توانید تمام منابعی که باعث بروز long task ها شده را ببینید. از طرفی این ابزار فقط یک ابزار سنجش و شناسایی است و نه ابزار برطرف کردن.
اما حرکت بعدی در شناخت این مسائل از ار بی ار چیست؟ اپتیمایز RBR !
پس این‌رو میدانیم که برای برطرف کردن این مشکلات نسبت به cms و سایتی که داریم باید شروع به بهینه‌سازی دستی و یا خودکار کنیم.
شروع به بهینه‌سازی RBR
در قسمت قبل آموختیم که تأثیر RBR چیست و چگونه باید آن را بسنجیم و شناسایی کنیم. اما در این قسمت می‌خواهیم بدانیم که بهینه‌سازی آن به چه شکل است. و اصلاً اینکه بهینه‌سازی ار بی ار چیست؟
اول از همه این که در تمامی وب سایت ها به خصوص cms و وردپرس ها ، همواره راه‌هایی برای کوتاه کردن مسیر بهینه‌سازی دارند ، اما کامل و یا دقیق نیستند ولی تا حد قابل توجهی این مشکلات به وسیله آن ها برطرف میشه. با استفاده از برخی پلاگین های مربوطه به بهینه سازی می‌توانید اقدام به اپتیمایز RBR کنید.
اما بهترین روش و جامع‌ترین روش ، روش دستی است. روش دستی RBR چیست؟ در ادامه به تمام کار های بهینه سازی RBR خواهیم پرداخت.
- انتقال تگ‌ها به انتهای کدهای html
- استفاده از ویژگی defer یا async
- جدا کردن منابع css با استفاده از media
- استفاده از روش‌های مرسوم و معمول
هرکدام از موارد بالا را که در جهت این سؤال است که اپتیمایز ار بی ار چیست ، به صورت مختصر و مفید ، هر کدام را به ترتیب توضیح داده‌ایم.
- حین اجرا و پردازش مرورگر و سرور ، به این شکل است که از اولین خط برنامه و الگوریتم شروع به پردازش می‌کند. از طرفی این حین پردازش به منابعی که باعث بلاک شدن رندرینگ میشه ، کل پروسه رندرینگ را متوقف می کند تا منابع کامل دانلود شوند و سپس بقیه رندر و بارگذاری را شروع می‌کند. حال اگر این منابع ، در صورتی که منابع اول صفحه و غیر ضروری هستند ، با رفتن به انتهای تگ html ، برنامه به‌طور پیش‌فرض آن‌ها در آخرین قسمت دانلود و رندر می‌کند. همین باعث می‌شود که first paint سرعت صورت بگیرد و کاربر به امید اینکه اطلاعات و جنبش‌هایی در سایت در حال رخ دادن است ، در آن منتظر لود شدن سایر محتوا و آیتم‌ها می‌ماند. که این به طور کلی روی مبحث تجربه کاربری یا همان UX سایت تأثیرگذار است.
ادامه بهینه‌سازی RBR چیست ؟
- تمامی آیتم‌های موجود در وب‌سایت‌ها که attribute نام دارند ، با ایجاد کردن ویژگی defer و async ، هر نوع فایل و منابعی که در حین پردازش html وجود دارد ، یا هم زمان با آن دانلود می شود و یا همچنین به تعویق انداخته می شود. با این کار برخی از ارور های Eliminate render-blocking resources از بین می‌برد. البته باید میزان ضرورت فایل‌ها و ترتیب آن‌ها را بدانید و بشناسید که چگونه آن‌ها را ایجاد کنید تا در لود وب‌سایت مشکلی ایجاد نشود.
- جدا کردن کدهای css با استفاده از روش media که یکی از مرسوم‌ترین روش‌ها است. از آنجایی که هم فهمیدیم تأثیر کدهای css در RBR چیست ، میدانیم که بسیار در بلاک کردن رندر تأثیرگذار بوده که باید بسیاری از آن‌ها را حذف و یا بهینه کنید تا در کاهش RBT داشته باشیم. شما با استفاده از attribute مربوطه یا همان media می توانید نسبت به هر دستگاهی که وب‌سایت و صفحه‌ای را ایندکس کرده ، css و استایل های آن را بهینه کرده تا سیستم مورد استفاده مجبور به تحلیل و پردازش کدهای اضافی نباشد.
- استفاده از روش inline در CSS ، فشرده سازی منابع نوشته محور (text-based resources) با استفاده از تابع gzip ، استفاده از افزونه‌ها برای سایت‌های وردپرسی استفاده کنید و …
نکات مهم در بهینه‌سازی RBR
برای پاسخ به این که مهم‌ترین نکات در RBR چیست ، باید به شما بگوییم که این معیار سنجش خود را از طریق برخی معیارهای دیگر به دست می آورد مانند معیار TBT در جی تی متریکس که به معنی total blocking time است. حال میدانیم که این معیار مجموع تایم‌هایی است که سرور از رندرگیری دست برداشته. با رفتن به قسمت‌های waterfall و structure می‌توان تمام موارد و تایم‌هایی که در آن بلاک تایم بوده را شناسایی کنید و اقدام به بهینه‌سازی کنید.
به طور کلی معیار tbt می‌خواهد که طبق زمان های زیر ، سایت ما بهینه باشد تا ریسورس هایی که باعث بلاک شده است را شناسایی و آن‌ها را بهینه کنیم.
- ۱۵۰ میلی‌ثانیه یا کمتر : خوب
- بین ۱۵۰ تا ۲۲۴ میلی ثانیه : قابل قبول، اما نیازمند بهینه‌سازی
- بین ۲۲۴ تا ۳۵۰ میلی ثانیه : کمی طولانی تر از حد استاندارد
- بیشتر از ۳۵۰ میلی‌ثانیه : خیلی طولانی تر از حد استاندارد
با شناختن کامل این معیار می‌توانیم به سراغ RBR ها رفته و آن‌ها را بهینه‌سازی کنیم. تا بتوانیم یک وب‌سایت کاملاً ایده عال از بابت سرعت لود خوب در سئوی آن داشته باشیم.
همین‌الان بهینه‌سازی RBR سایتتان را شروع کنید!
دوستان گلم تا الآن در رابطه با شاخص RBR چیست و چرا باید آن را بهینه کنیم ، تأثیر آن روی سئو و انواع روش های اپتیمایز RBR صحبت کردیم و از استاندارد های این شاخص نیز ذکر شد.
اما چیزی که در این قسمت می‌خواهیم بگوییم این است که ، همین‌الان شروع به بهینه‌سازی این شاخص کنید. اگر وبمستر هستید و یا وب‌سایتی دارید که نسبت به اهداف آن کسب درآمد دارید و می‌خواهید آن را افزایش دهید. یا می‌خواهید که ورودی های گوگل را به سایت خود افزایش دهید. بایستی که حتماً به آپتیمایز کردن منابعی و ریسورس هایی که باعث بلاک شدن رندرگیری می‌شوند بپردازید.
الگوریتم موتورهای جست‌وجوگر همواره روز به روز در حال پیشرفت هستند و معیار سرعت لود بالا یکی از معیار های مهم این الگوریتم ها است. اگر می خواهید که وب‌سایتی پر بازدید و با سرعت لود بالا داشته باشید ، بایستی برای اصول پروسه آپتیمایز ، اطلاعات خود را نسبت به منابع ، کدهای JS و CSS ، برنامه نویسی ، واترفال خوانی و … افزایش دهید تا بتوانید به‌طور حرفه‌ای این کار را انجام دهید.
شما در صورت تمایل می‌توانید تمام پروسه بهینه‌سازی سرعت لود سایت و این موارد را به ما بسپارید. در نظر داشته باشید که گروه پویا وب ، همواره با داشتن دانش بروز در حوزه دیجیتال مارکتینگ و کد نویسی ، به دنبال این است که برای شما دارنده وب‌سایت زمان بخرد و در کوتاه‌ترین وقت ممکن بیشترین نتیجه را از آن وب‌سایت مذکور کند.
در صورت تمایل می‌توانید با ما در ارتباط باشید. از همراهی شما تا انتهای این مقاله سپاس گذاریم.
تماس با پویا وب
Share on whatsapp
Share on telegram
Share on facebook
آژانس طراحی سایت پویا وب با طراحی وب سايت حرفه‌ای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره می‌کوشد خدمات خود را با بالاترين کيفيت ممکن و با بهره‌گيری از جدیدترین متدها به شما ارائه دهد.
- © 1399 | تمام حقوق مادی و معنوی سایت متعلق به آژانس طراحی سایت پویا وب است.