فهرست مطالب
سرعت بارگذاری صفحات وب و اهمیت آن در تجربه کاربری و سئو
سرعت بارگذاری صفحات وب نقش بسیار مهمی در تجربه کاربری و بهینه‌سازی برای موتورهای جستجو (SEO) دارد. سرعت بارگذاری یکی از عوامل کلیدی در الگوریتم گوگل برای رتبه‌بندی صفحات وب است.
یک توسعه‌دهنده وب فرانت‌اند باید بهترین روش رندرینگ را برای وب‌سایت انتخاب کند تا هم تجربه کاربری سریع و هم محتوای داینامیک را ارائه دهد.
دو روش محبوب برای رندرینگ وب‌سایت وجود دارد: رندرینگ سمت کلاینت (CSR) و رندرینگ سمت سرور (SSR).
تمام وب‌سایت‌ها نیازها و اهداف مختلفی دارند، بنابراین درک تفاوت رندر Client-Side با Server-Side به شما کمک می‌کند تا وب‌سایت خود را بر اساس اهداف کسب‌وکارتان بهینه کنید.
گوگل و جاوااسکریپت
گوگل به طور گسترده مستنداتی در مورد نحوه پردازش جاوااسکریپت ارائه داده و کارمندان گوگل به طور منظم از طریق فرمت‌های رسمی و غیررسمی به سوالات و ابهامات درباره جاوااسکریپت پاسخ می‌دهند.
برای مثال، در پادکست “Search Off The Record“، بحث شد که گوگل تمام صفحات وب، حتی صفحات سنگین از نظر جاوااسکریپت، را برای جستجو رندر می‌کند.
این بحث منجر به گفتگوی بزرگی در لینکدین شد و چند نکته کلیدی دیگر از این پادکست و بحث‌های پس از آن به شرح زیر است:
- گوگل پیگیری نمی‌کند که رندر کردن صفحات چقدر از نظر منابع پردازشی هزینه‌بر است.
- گوگل تمام صفحات را رندر می‌کند تا محتوای آن‌ها را ببیند، فارغ از اینکه از جاوااسکریپت استفاده شده باشد یا خیر.
این گفتگو به رفع بسیاری از افسانه‌ها و تصورات غلط درباره نحوه برخورد گوگل با جاوااسکریپت و تخصیص منابع کمک کرد.
در یک کامنت کامل از مارتین اسپلایت در لینکدین، او توضیح داد:
“ما پیگیری نمی‌کنیم که ‘این صفحه برای ما چقدر هزینه داشت؟’ یا چیزی شبیه به آن. می‌دانیم که بخش قابل توجهی از وب از جاوااسکریپت برای افزودن، حذف یا تغییر محتوا در صفحات وب استفاده می‌کند. ما فقط باید صفحه را رندر کنیم تا همه محتوا را ببینیم. مهم نیست که صفحه‌ای از جاوااسکریپت استفاده می‌کند یا خیر، زیرا فقط زمانی می‌توانیم مطمئن شویم که همه محتوا را دیده‌ایم که صفحه رندر شده باشد.”
مارتین همچنین تایید کرد که بین خزیدن (crawling) و ایندکس کردن (indexing) صفحات صف و تأخیری وجود دارد، اما این موضوع فقط به خاطر وجود جاوااسکریپت نیست و جاوااسکریپت دلیل اصلی برای عدم ایندکس شدن URLها نیست.
بهترین شیوه‌های کلی جاوا اسکریپت
قبل از اینکه به مقایسه رندرینگ سمت کلاینت و سمت سرور بپردازیم، ضروری است که ابتدا بهترین شیوه‌های کلی برای استفاده از جاوااسکریپت را رعایت کنیم تا هر یک از این روش‌ها به درستی عمل کنند:
- مسدود نکردن منابع جاوااسکریپت از طریق Robots.txt یا قوانین سرور:
مطمئن شوید که فایل‌های جاوااسکریپت حیاتی توسط موتورهای جستجو قابل دسترسی هستند. اگر این منابع توسط Robots.txt یا تنظیمات سرور مسدود شوند، موتورهای جستجو نمی‌توانند به درستی صفحات شما را رندر کنند و ممکن است بخش‌هایی از محتوا نادیده گرفته شود. - اجتناب از رندر بلاکینگ (Render Blocking):
از بارگذاری فایل‌های جاوااسکریپت که باعث توقف بارگذاری صفحه می‌شوند، خودداری کنید. این کار می‌تواند زمان بارگذاری اولیه صفحه را افزایش دهد و تجربه کاربری و سئو را تحت تأثیر قرار دهد. استفاده از تکنیک‌هایی مثل “async” یا “defer” می‌تواند به کاهش این مشکل کمک کند. - پرهیز از تزریق جاوااسکریپت در DOM:
تزریق مستقیم جاوااسکریپت به DOM می‌تواند موجب ناسازگاری و کاهش عملکرد شود. به جای این کار، سعی کنید از روش‌های استاندارد برای دستکاری DOM استفاده کنید تا کد شما تمیزتر، قابل‌پیش‌بینی‌تر و موثرتر باشد.
رندرینگ سمت کلاینت چیست و چگونه کار می‌کند؟
رندرینگ سمت کلاینت (Client-Side Rendering – CSR) یک روش نسبتاً جدید برای رندر کردن وب‌سایت‌ها است. این رویکرد با ظهور کتابخانه‌های جاوااسکریپت به محبوبیت رسید؛ Angular و React.js از برجسته‌ترین نمونه‌های این کتابخانه‌ها هستند که از این نوع رندرینگ استفاده می‌کنند.
در رندرینگ سمت کلاینت، جاوااسکریپت وب‌سایت در مرورگر کاربر رندر می‌شود، نه روی سرور. در این فرآیند، سرور به جای ارسال یک سند HTML کامل با تمام محتوای صفحه، یک فایل HTML ساده به همراه فایل‌های جاوااسکریپت را به مرورگر ارسال می‌کند.
مزایا و نحوه عملکرد
هرچند زمان بارگذاری اولیه ممکن است کمی کندتر باشد، اما پس از آن، بارگذاری صفحات بعدی سریع‌تر انجام می‌شود، زیرا دیگر نیازی به بارگذاری یک صفحه HTML جداگانه برای هر مسیر نیست. در سایت‌های مبتنی بر CSR، تمام منطق برنامه و درخواست‌های API به صورت “مستقل” در سمت کلاینت مدیریت می‌شوند. صفحات و URLهای مربوط به آن‌ها به صورت داینامیک در مرورگر کاربر ایجاد می‌شوند.
فرآیند رندرینگ سمت کلاینت
- کاربر آدرس URL مورد نظر خود را در نوار آدرس مرورگر وارد می‌کند.
- یک درخواست داده به سرور در URL مشخص‌شده ارسال می‌شود.
- در اولین درخواست کاربر به سایت، سرور فایل‌های استاتیک (مانند CSS و HTML ساده) را به مرورگر ارسال می‌کند.
- مرورگر ابتدا محتوای HTML را دانلود کرده و سپس فایل‌های جاوااسکریپت را دانلود می‌کند. این فایل‌های HTML به جاوااسکریپت متصل شده و فرآیند بارگذاری را با نمایش نمادهای بارگذاری (که توسط توسعه‌دهنده تعریف شده است) به کاربر آغاز می‌کنند. در این مرحله، وب‌سایت هنوز برای کاربر قابل مشاهده نیست.
- پس از دانلود جاوااسکریپت، محتوا به صورت داینامیک در مرورگر کاربر تولید می‌شود.
- با پیشروی کاربر در سایت و تعامل با آن، محتوای وب به طور کامل قابل مشاهده می‌شود و کاربر تجربه‌ای سریع و داینامیک خواهد داشت.
رندرینگ سمت سرور چیست و چگونه کار می‌کند؟
رندرینگ سمت سرور (Server-Side Rendering – SSR) یکی از رایج‌ترین روش‌ها برای نمایش اطلاعات روی صفحه وب است. در این روش، مرورگر وب درخواست اطلاعات را به سرور ارسال می‌کند، سرور داده‌های مربوط به کاربر را پردازش کرده و یک صفحه HTML کامل و رندر شده به مرورگر ارسال می‌کند.
در هر بار بازدید کاربر از یک صفحه جدید در وب‌سایت، سرور این فرآیند را تکرار می‌کند و صفحه HTML جدیدی را ارائه می‌دهد.
فرآیند رندرینگ سمت سرور به صورت گام‌به‌گام:
- ورود URL توسط کاربر:
کاربر آدرس URL مورد نظر خود را در نوار آدرس مرورگر وارد می‌کند. - ارسال پاسخ از سرور:
سرور یک صفحه HTML آماده رندر را به مرورگر کاربر ارسال می‌کند. این صفحه از پیش رندر شده و شامل تمام محتوای لازم است. - رندر شدن صفحه در مرورگر:
مرورگر صفحه HTML را رندر کرده و محتوا برای کاربر قابل مشاهده می‌شود. - دانلود جاوااسکریپت توسط مرورگر:
پس از نمایش صفحه، مرورگر فایل‌های جاوااسکریپت را دانلود می‌کند. - اجرای جاوااسکریپت (مانند React):
جاوااسکریپت توسط مرورگر اجرا می‌شود، که تعاملات صفحه (مانند کلیک‌ها و فرم‌ها) را امکان‌پذیر می‌سازد و صفحه به طور کامل برای تعامل کاربر آماده می‌شود.
مزایا و معایب رندرینگ سمت سرور:
مزایا:
- SEO بهتر: چون صفحه HTML کامل توسط سرور رندر شده و سریعاً به مرورگر ارسال می‌شود، موتورهای جستجو به راحتی می‌توانند آن را ایندکس کنند.
- بارگذاری سریع‌تر محتوا: محتوای صفحه سریع‌تر برای کاربر قابل مشاهده است، چرا که HTML از قبل توسط سرور آماده شده است.
معایب:
- بار سرور: هر بار که کاربر به صفحه‌ای جدید مراجعه می‌کند، سرور باید صفحه جدیدی تولید و ارسال کند، که می‌تواند بار زیادی روی سرور ایجاد کند.
- تعاملات کمتر: در مقایسه با رندرینگ سمت کلاینت، SSR ممکن است در مدیریت تعاملات پیچیده زمان‌برتر باشد، زیرا برای هر درخواست جدید باید یک صفحه جدید از سرور دریافت شود.
نتیجه‌گیری
رندرینگ سمت سرور یک روش موثر برای وب‌سایت‌هایی است که نیاز به SEO بهینه‌تر و بارگذاری سریع‌تر محتوا دارند، به ویژه در وب‌سایت‌های سنتی یا آن‌هایی که محتوای استاتیک بیشتری دارند. از سوی دیگر، برای وب‌سایت‌هایی که تعاملات پیچیده و به‌روز‌رسانی‌های مکرر محتوا دارند، ترکیب این روش با رندرینگ سمت کلاینت (یا استفاده از راهکارهای هیبریدی) می‌تواند کارایی بیشتری داشته باشد.
