نحوه شناسایی و کاهش منابع مسدودکننده رندر

آیا منابع مسدود کننده رندر سرعت صفحه شما را کاهش می دهد و بر تجربه کاربر تأثیر می گذارد؟ نحوه شناسایی و عیب یابی این مشکلات را بیاموزید.
شناسایی و کاهش منابعی که مسئول مسدود کردن رندر صفحه وب شما هستند، یک نقطه بهینه سازی حیاتی است که می تواند سرعت صفحه شما را کاهش دهد یا کاهش دهد.
این می تواند آنقدر مهم باشد که در نتیجه می تواند به معیارهای تجربه صفحه سایت شما (و رضایت کاربر شما) سود ببخشد.
در سال 2021، متوسط زمان لازم برای ارائه کامل یک صفحه وب موبایل 22 ثانیه بود. در سال 2018، 15 ثانیه بود.
واضح است که این مقدار بسیار بالاتر از زمان توصیه شده گوگل 2-3 ثانیه است. همچنین به طور قابل توجهی بالاتر از قبل است.
چه چیزی می تواند باعث این مشکلات با منابع مسدود کننده رندر شود؟
چه چیزی باعث افزایش سرعت رندر کلی صفحه می شود؟
یک روند جالب توجه این است که اتکای فزاینده ای به فونت های شخص ثالث در مقایسه با فونت های سیستمی وجود دارد. استفاده از فونت‌های شخص ثالث به‌عنوان منبع، در پردازش و رندر صفحه اختلال ایجاد می‌کند.
با فونت های سیستمی، مرورگر نیازی به بارگذاری هیچ چیز اضافی ندارد، بنابراین در نتیجه آن مرحله پردازش اضافی را ندارد.
این اتکا در بین صنایع احتمالاً بر این زمان رندر تأثیر می گذارد. البته این تنها دلیل این مشکل با منابع مسدود کننده رندر نیست.
علاوه بر این، سرویس‌های خود گوگل، مانند Google Analytics یا استفاده از پیکسل فیس‌بوک شخص ثالث برای اهداف ردیابی، تأثیر قابل‌توجهی بر زمان رندر دارند.
تمایل به تکیه بر چنین فناوری هایی لزوماً از دیدگاه بازاریابی وحشتناک نیست.
اما، از منظر منابع مسدودکننده رندر، می تواند باعث افزایش قابل توجهی در زمان بارگذاری صفحه و نحوه درک گوگل (و کاربران) از صفحه شما شود.
راه حل ایده آل این است که مطمئن شوید صفحه شما برای تعامل با کاربر در سریع ترین زمان ممکن بارگذاری می شود.
همچنین این احتمال وجود دارد که شیوه‌های ضعیف توسعه وب که امروزه توسط توسعه‌دهندگان وب استفاده می‌شود، مقصر باشند.
در هر صورت، این چیزی در هر پروژه وب سایتی است که باید به عنوان بخشی از ممیزی های Core Web Vitals مورد توجه قرار گیرد.
با این حال، تجربه صفحه فقط به سرعت بارگیری کل صفحه نیست.
در عوض، بیشتر در مورد تجربه کلی صفحه است که با چارچوب تجربه صفحه Google یا Core Web Vitals اندازه گیری می شود.
به همین دلیل است که می خواهید روی بهبود و بهینه سازی سرعت صفحه خود برای مسیر رندر حیاتی در سراسر DOM یا مدل شیء سند کار کنید.
مسیر رندر بحرانی به تمام مراحلی که برای رندر کردن کل صفحه طی می‌کند، اشاره دارد، از زمانی که مرورگر برای اولین بار شروع به دریافت داده‌ها می‌کند تا زمانی که در نهایت صفحه را در رندر نهایی کامپایل می‌کند.
این فرآیندی است که اگر آن را به درستی بهینه کنید، تنها چند میلی ثانیه طول می کشد.
بهینه سازی برای مسیر رندر بحرانی به معنای اطمینان از بهینه سازی عملکرد رندر در بسیاری از دستگاه های مختلف است.
این کار با بهینه سازی مسیر رندر بحرانی برای رسیدن به اولین رنگ خود در سریع ترین زمان ممکن انجام می شود.
اساساً، شما مدت زمانی را که کاربران صرف تماشای یک صفحه سفید خالی برای نمایش محتوای بصری در اسرع وقت می کنند را کاهش می دهید (0.0s زیر را ببینید).
روند کاملی برای انجام این کار وجود دارد که در مستندات راهنمای توسعه‌دهنده Google توضیح داده شده است، اما من به طور خاص بر روی یک ضربه سنگین تمرکز خواهم کرد: کاهش منابع مسدودکننده رندر.
مسیر رندر بحرانی به مجموعه مراحلی اشاره دارد که مرورگر در سفر خود برای رندر کردن یک صفحه، با تبدیل HTML ، CSS و جاوا اسکریپت به پیکسل‌های واقعی روی صفحه انجام می‌دهد.
اساساً، مرورگر باید تمام فایل‌های HTML و CSS را درخواست، دریافت و تجزیه کند ( به‌علاوه چند کار اضافی ) قبل از اینکه شروع به ارائه محتوای بصری کند.
این فرآیند در کسری از ثانیه (در بیشتر موارد) اتفاق می افتد. تا زمانی که مرورگر این مراحل را کامل نکند، کاربران یک صفحه سفید خالی را مشاهده خواهند کرد.
در زیر نمونه ای از نحوه بارگیری یک صفحه با توجه به مراحل مختلف فرآیند بارگذاری صفحه توسط کاربران مشاهده می شود:
بنابراین، بهبود مسیر رندر حیاتی می‌تواند تجربه کلی صفحه را بهبود بخشد، که می‌تواند به بهبود عملکرد در معیارهای Core Web Vitals کمک کند.
برای بهبود مسیر رندر بحرانی، باید منابع مسدودکننده رندر خود را تجزیه و تحلیل کنید.
هر گونه منبع مسدود کننده رندر ممکن است در رندر اولیه صفحه مسدود شود و در نتیجه بر امتیازات Core Web Vitals شما تأثیر منفی بگذارد.
این شامل یک فرآیند بهینه سازی است:
با انجام این کار، این امکان وجود دارد که هم Core Web Vitals و هم نحوه نمایش فیزیکی صفحه شما برای کاربر بهبود یابد.
داده های رفتار کاربر گوگل گزارش می دهد که اکثر کاربران پس از حدود 3 ثانیه یک سایت کند را رها می کنند.
علاوه بر مطالعاتی که نشان می دهد کاهش زمان بارگذاری صفحه و بهبود تجربه صفحه منجر به رضایت بیشتر کاربر می شود، چندین به روز رسانی اصلی گوگل نیز در افق وجود دارد که می خواهید برای آن آماده شوید.
شناسایی و بهینه‌سازی منابع مسدودکننده رندر برای ماندن در صدر بازی در زمان انتشار این به‌روزرسانی‌ها بسیار مهم است.
Google در سال 2022 تجربه صفحه را بر روی دسکتاپ پیاده‌سازی می‌کند و عرضه تجربه صفحه دسکتاپ خود را در فوریه آغاز می‌کند و در مارس به پایان می‌رسد.
به گفته گوگل، همان سه معیار Core Web Vitals (LCP، FID و CLS) به همراه آستانه های مرتبط با آنها اکنون به رتبه بندی دسکتاپ مرتبط خواهند شد.
همچنین، Google در حال کار بر روی یک معیار کاملاً آزمایشی Core Web Vitals با در نظر گرفتن حداکثر مدت زمان رویداد و کل مدت زمان رویداد است.
توضیح آنها از این عواملی که در نظر دارند عبارتند از:
حداکثر مدت زمان رویداد: تأخیر تعامل برابر با بزرگترین مدت زمان رویداد واحد از هر رویداد در گروه تعامل است.
مدت زمان کل رویداد: تأخیر تعامل مجموع تمام مدت زمان رویداد است، بدون توجه به همپوشانی.
با مطالعات بسیاری که کاهش زمان بارگذاری صفحه را به بهبود KPIهای ارزشمند (تبدیل، نرخ پرش، زمان در سایت) مرتبط می‌کنند، بهبود تأخیر سایت به یک هدف تجاری مهم برای بسیاری از سازمان‌ها تبدیل شده است.
متخصصان سئو در موقعیت منحصر به فردی برای هدایت این تلاش هستند، زیرا نقش ما اغلب این است که شکاف بین اهداف تجاری و اولویت های توسعه دهندگان وب را پر کنیم.
داشتن توانایی ممیزی یک سایت، تجزیه و تحلیل نتایج و شناسایی زمینه های بهبود به ما کمک می کند تا با توسعه دهندگان برای بهبود عملکرد و ترجمه نتایج به سهامداران کلیدی کار کنیم.
یکی از اهداف اولیه بهینه‌سازی مسیر رندر بحرانی این است که اطمینان حاصل شود که منابعی که برای رندر کردن آن محتوای مهم و فوق‌العاده لازم است، با حداکثر سرعتی که ممکن است بارگذاری می‌شوند.
هر گونه منبع مسدود کننده رندر باید اولویت بندی شود و هر منبعی که مانع از رندر سریع صفحه می شود.
هر نقطه بهینه سازی به بهبود کلی سرعت صفحه، تجربه صفحه و امتیازات Core Web Vitals کمک می کند.
گوگل بارها گفته است که کدنویسی لزوما برای رتبه بندی مهم نیست .
اما، به همین ترتیب، به دست آوردن مزایای رتبه بندی از بهبود بهینه سازی سرعت صفحه، بسته به پرس و جو، به طور بالقوه می تواند کمک کننده باشد.
وقتی صحبت از فایل‌های CSS می‌شود، آنها به عنوان منابع مسدودکننده رندر در نظر گرفته می‌شوند.
چرا این هست؟
حتی اگر در میانه یک میلی‌ثانیه یا کمتر اتفاق بیفتد (در بیشتر موارد)، مرورگر شروع به ارائه محتوای صفحه نمی‌کند تا زمانی که نتواند تمام سبک‌های CSS را درخواست، دریافت و مدیریت کند.
اگر یک مرورگر محتوایی را ارائه کند که به درستی استایل‌بندی نشده است، تنها چیزی که به دست می‌آورید یک دسته از متن‌های معمولی و پیوندهایی است که حتی استایل‌بندی نشده‌اند.
این به این معنی است که صفحه شما اساساً به دلیل نداشتن عبارت بهتر "برهنه" خواهد بود.
حذف سبک های CSS منجر به صفحه ای می شود که به معنای واقعی کلمه غیر قابل استفاده است.
اکثر مطالب به رنگ آمیزی مجدد نیاز دارند تا کمترین خوشایند را برای کاربر به نظر برسانند.

اگر فرآیند رندر صفحه را بررسی کنیم، کادر خاکستری زیر نشان دهنده زمان مورد نیاز مرورگر برای دریافت تمام منابع CSS است. به این ترتیب، می تواند شروع به ساخت DOM CSS (یا درخت CCSOM) کند.
بسته به کاری که سرور شما برای بارگیری این منابع باید انجام دهد، ممکن است از یک میلی ثانیه تا چند ثانیه طول بکشد.
همچنین می تواند متفاوت باشد، که می تواند به اندازه، همراه با مقدار این فایل های CSS بستگی داشته باشد.
درخت رندر زیر نمونه‌ای از مرورگر را نشان می‌دهد که تمام فایل‌ها را همراه با CSS درون DOM ارائه می‌کند:
علاوه بر این، موارد زیر نمونه‌ای از دنباله رندر یک صفحه را نشان می‌دهد که در آن همه فایل‌ها در یک فرآیند بارگیری می‌شوند، از ساخت DOM تا نقاشی و ترکیب نهایی صفحه که به عنوان مسیر رندر بحرانی شناخته می‌شود. .
از آنجایی که CSS به طور پیش‌فرض یک منبع مسدودکننده رندر است، بهبود CSS تا حدی منطقی است که به هیچ وجه تأثیر منفی بر روند رندر صفحه نداشته باشد.
توصیه رسمی گوگل موارد زیر را بیان می کند :
CSS یک منبع مسدودکننده رندر است. برای بهینه سازی زمان اولین رندر، آن را در اسرع وقت و در اسرع وقت به مشتری تحویل دهید.
HTML باید به چیزی تبدیل شود که مرورگر بتواند با آن کار کند: DOM. فایل های CSS نیز به همین صورت هستند. این باید به CSSOM تبدیل شود.
با بهینه‌سازی فایل‌های CSS در DOM و CSSOM، می‌توانید به کاهش زمان لازم برای رندر کردن همه چیز توسط مرورگر کمک کنید، که تا حد زیادی به بهبود تجربه صفحه کمک می‌کند.
آیا می دانستید که بارگیری جاوا اسکریپت همیشه مورد نیاز نیست؟
با جاوا اسکریپت، دانلود و تجزیه تمام منابع جاوا اسکریپت یک مرحله ضروری برای ارائه کامل یک صفحه نیست.
بنابراین، این واقعاً بخش فنی مورد نیاز رندر صفحه نیست.
اما، نکته ای که در این مورد وجود دارد این است: اکثر سایت های مدرن به گونه ای کدگذاری شده اند که جاوا اسکریپت (مثلاً چارچوب JS Bootstrap) برای ارائه تجربه فوق العاده مورد نیاز است.
اما، اگر مرورگر فایل‌های جاوا اسکریپت را قبل از اولین رندر صفحه پیدا کند، فرآیند رندر را می‌توان تا زمان بعدی و پس از اجرای کامل فایل‌های جاوا اسکریپت متوقف کرد.
این را می توان با به تعویق انداختن فایل های جاوا اسکریپت برای استفاده بعدی مشخص کرد.
یک نمونه از این موارد این است که توابع JS مانند هشدار وجود داشته باشد که در HTML تعبیه شده باشد. این می تواند رندر صفحه را تا پس از اجرای این کد جاوا اسکریپت متوقف کند.
جاوا اسکریپت تنها قدرت تغییر هر دو سبک HTML و CSS را دارد، بنابراین منطقی است.
تجزیه و اجرای جاوا اسکریپت ممکن است به تاخیر بیفتد زیرا جاوا اسکریپت می تواند به طور بالقوه کل محتوای صفحه را تغییر دهد. این تاخیر به طور پیش‌فرض در مرورگر تعبیه شده است – فقط برای چنین سناریویی "فقط در مورد".
توصیه رسمی گوگل :
"جاوا اسکریپت همچنین می تواند ساخت DOM را مسدود کند و هنگام رندر شدن صفحه به تاخیر بیاندازد. برای ارائه عملکرد بهینه … هر جاوا اسکریپت غیر ضروری را از مسیر رندر بحرانی حذف کنید.
برای شناسایی مسیر رندر بحرانی و تجزیه و تحلیل منابع حیاتی:
نمای آبشار خود را تجزیه و تحلیل کنید. به دنبال فایل‌های CSS یا جاوا اسکریپت بگردید که قبل از خط سبز «شروع رندر» درخواست شده‌اند، اما برای بارگذاری محتوای بالای صفحه حیاتی نیستند.
پس از شناسایی یک منبع مسدودکننده رندر (به طور بالقوه)، حذف آن را آزمایش کنید تا ببینید آیا محتوای بالای صفحه تحت تأثیر قرار گرفته است یا خیر.
در مثال خود، متوجه برخی از درخواست‌های جاوا اسکریپت شدم که ممکن است حیاتی باشند.
حتی اگر آنها حیاتی هستند، گاهی اوقات ایده خوبی است که حذف این اسکریپت ها را آزمایش کنید تا بررسی کنید چگونه تغییر عناصر در سایت بر تجربه تأثیر می گذارد.
همچنین راه های دیگری برای بهبود چنین منابعی وجود دارد.
برای فایل‌های جاوا اسکریپت غیر بحرانی، ممکن است بخواهید به دنبال ترکیب فایل‌ها و به تعویق انداختن آنها با قرار دادن این فایل‌ها در پایین صفحه خود باشید.
برای فایل‌های CSS غیر بحرانی، می‌توانید تعداد فایل‌های CSS خود را با ترکیب آنها در یک فایل و فشرده‌سازی آنها کاهش دهید.
بهبود تکنیک‌های کدنویسی می‌تواند منجر به دانلود سریع‌تر فایل شود و تأثیر کمتری بر سرعت رندر صفحه شما داشته باشد.
هنگامی که تشخیص دادید که یک منبع مسدودکننده رندر برای رندر کردن محتوا در بالای صفحه حیاتی نیست، می‌خواهید روش‌های بی‌شماری را که برای بهبود رندر صفحه‌تان و به تعویق انداختن منابع غیر حیاتی در دسترس هستند، بررسی کنید.
راه حل های زیادی برای این مشکل وجود دارد، از به تعویق انداختن فایل های جاوا اسکریپت و CSS گرفته تا کاهش تاثیری که CSS می تواند داشته باشد.
یک راه حل ممکن این است که CSS را با استفاده از قانون import @ اضافه نکنید.
از منظر عملکرد، حتی اگر @import به نظر می‌رسد فایل HTML شما را تمیزتر نگه می‌دارد، در واقع می‌تواند مشکلاتی را با عملکرد ایجاد کند.
اعلان @import در واقع باعث می شود که مرورگر یک فایل CSS را کندتر پردازش کند. چرا؟ زیرا تمام فایل های وارد شده را نیز دانلود می کند.
تا زمانی که فرآیند کامل شود، رندر به طور کامل مسدود خواهد شد.
در واقع، بهترین راه حل استفاده از روش استاندارد گنجاندن یک شیوه نامه CSS با استفاده از اعلان <link rel=”stylesheet”> در HTML است.
اگر از وردپرس استفاده می کنید، استفاده از یک افزونه برای کوچک کردن فایل های CSS و جاوا اسکریپت می تواند تاثیر فوق العاده ای داشته باشد.
فرآیند کوچک‌سازی تمام فضاهای غیرضروری یک فایل را می‌گیرد و آن را حتی بیشتر فشرده می‌کند، بنابراین می‌توانید عملکرد خوبی را افزایش دهید.
همچنین، حتی اگر در وردپرس نیستید، می‌توانید از خدمات یک توسعه‌دهنده مجرب برای تکمیل فرآیند به صورت دستی استفاده کنید.
این کار زمان بیشتری می برد اما می تواند ارزشش را داشته باشد.
فایل‌های Minified معمولاً بسیار سبک‌تر از نمونه‌های قبلی خود هستند و این بدان معناست که رندر اولیه بسیار سریع‌تر تکمیل می‌شود.
علاوه بر این، پس از فرآیند کوچک سازی، می توانید انتظار داشته باشید که روند دانلود سریعتر انجام شود، زیرا زمان کمتری برای دانلود منابع مسدود کننده غیر رندر نیاز است.
در حالی که به نظر می رسد فونت های شخص ثالث سایت را "زیباتر" می کنند، این دقیقاً چنین نیست.
اگرچه ممکن است در ظاهر شگفت‌انگیز به نظر برسد، اما این فایل‌های فونت شخص ثالث اغلب زمان بیشتری برای بارگیری می‌برند و می‌توانند به مشکل منابع مسدود کردن رندر کمک کنند.
به دلیل وجود فایل‌های خارجی، مرورگر مجبور است برای دانلود این فایل‌ها برای رندر صفحه شما درخواست‌های خارجی ارائه دهد، که ممکن است منجر به افزایش زمان دانلود شود.
اگر در تیمی هستید که بهترین روش‌های توسعه کمتر از ایده‌آل را دارد، ممکن است دلیل این باشد که فایل‌های فونت شخص ثالث زیادی دارید که برای رندر کردن سایت شما ضروری نیستند.
در این صورت، حذف همه این فایل‌های غیرضروری می‌تواند منابع مسدودکننده رندر شما را به میزان قابل توجهی بهبود بخشد و به بهبود کلی شما در Core Web Vitals کمک کند.
از طرف دیگر، استفاده از فونت های سیستمی، فقط پردازش را در مرورگر بدون درخواست خارجی حفظ می کند.
همچنین، احتمالاً فونت‌های سیستمی وجود دارند که ممکن است بسیار شبیه به فونت‌های شخص ثالثی باشند که استفاده می‌کنید.
اگر خودتان با کد کار می کنید، ممکن است (یا نه… هیچ کس در اینجا قضاوت نمی کند) متوجه شوید که تکنیک ها کمتر از حد مطلوب هستند.
یک مثال: شما در همه جا از CSS درون خطی استفاده می کنید، و این باعث ایجاد اشکال در پردازش و رندر در مرورگر می شود.
راه حل آسان این است که مطمئن شوید همه CSS های درون خطی را گرفته اید و آنها را به درستی در فایل شیوه نامه CSS کدنویسی می کنید.
اگر کد توسعه‌دهنده دیگری همتراز نباشد، این می‌تواند مشکلات عمده‌ای در رندر صفحه ایجاد کند.
به عنوان مثال: بگویید که صفحه‌ای دارید که با استفاده از تکنیک‌های قدیمی‌تر به جای تکنیک‌های مدرن و کم‌تر کدگذاری شده است.
تکنیک‌های قدیمی‌تر می‌توانند شامل نفخ قابل توجهی از کد باشند و در نتیجه منجر به رندر کردن کندتر صفحه شوند.
برای از بین بردن این موضوع، می‌توانید تکنیک‌های کدنویسی خود را با ایجاد کدهای نازک‌تر و کم‌تر بهبود ببخشید، و در نتیجه تجربه رندر صفحه بسیار بهتری خواهید داشت.
ترکیب فایل ها نیز می تواند وضعیت را بهبود بخشد.
به عنوان مثال: اگر هشت یا 10 فایل جاوا اسکریپت دارید که همگی به یک کار کمک می کنند، می توانید خدمات یک توسعه دهنده را استخدام کنید که می تواند همه این فایل ها را برای شما ترکیب کند.
و اگر فایل‌های جاوا اسکریپت با اهمیت کمتری هستند، برای کاهش بیشتر مشکلات رندر صفحه، می‌توان این فایل‌ها را با اضافه کردن آنها به انتهای کد HTML در صفحه به تعویق انداخت.
با ترکیب فایل‌ها و بهبود تکنیک‌های کدنویسی، می‌توانید کمک قابل توجهی به تجارب بهتر ارائه صفحه کنید.
یافتن راه‌حل‌هایی برای کاهش منابع مسدودکننده رندر برای مدتی یکی از اصلی‌ترین موارد ممیزی SEO بوده است. به چند دلیل مهم است:
با کاهش منابع مسدود کننده رندر، سایت خود را سریعتر می کنید. همچنین می‌توانید سایت خود را مهندسی معکوس کنید تا از عناصری استفاده کنید که در به‌روزرسانی کلی تجربه صفحه Google نقش دارند.
شما همچنین خود را در موقعیتی قرار می‌دهید که از مزایایی که از معیارهای Core Web Vitals Google دریافت می‌کنید بهره ببرید.
Core Web Vitals از بین نمی روند. آنها به یک نقطه بهینه‌سازی حیاتی تبدیل شده‌اند تا سریع‌ترین زمان‌های رندر بالقوه را در چارچوب فعلی شما تسهیل کنند.
با معرفی معیارهای Core Web Vitals جدید در آینده، اطمینان از به روز بودن معیارهای موجود همیشه ایده خوبی است.
یافتن و تعمیر منابع مسدودکننده رندر همچنین تضمین می‌کند که همچنان بازدیدکنندگان وب‌سایت خود را راضی نگه دارید و همیشه در بهترین حالت برای زمان اصلی قرار دارد.
منابع بیشتر:
تصویر ویژه: Naumova Marina/Shutterstock
خبرنامه روزانه ما را از لورن بیکر بنیانگذار SEJ در مورد آخرین اخبار در صنعت دریافت کنید!
برایان از زمانی که سئو نامیده می شد، در سال 1998، سئو را انجام می داد. در آن زمان، سئو … [بیو کامل را بخوانید]
برای دریافت آخرین اخبار صنعت در خبرنامه روزانه ما مشترک شوید.
برای دریافت آخرین اخبار صنعت در خبرنامه روزانه ما مشترک شوید.

source
سئو سایت