وارد یک صفحه مقاله می‌شوید. صفحه سنگین است و دیر لود می‌شود. وقتی کدهای سایت را در مرورگر بررسی می‌کنیم، متوجه یک اتفاق عجیب می‌شویم: کدهای جاوا اسکریپت مربوط به اسلایدر صفحه اصلی، کدهای پخش‌کننده ویدیو و فایل‌های استایل بخش محصولات، همگی در این صفحه مقاله در حال بارگذاری هستند؛ در حالی که هیچ‌کدام در این صفحه کاربردی ندارند!

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

برای حل این مشکل، نمی‌توانیم فقط به افزونه‌های کش و فشرده‌سازی کدها تکیه کنیم. ما به یک معماری درست برای بارگذاری فایل‌های CSS و JS نیاز داریم. این مسیر در سه قدم کلیدی تعریف می‌شود که ساختار فنی سایت را دگرگون می‌کند:

  1. تفکیک منابع
  2. لود جزیره‌ای یا شرطی
  3. تصمیم‌گیری برای تاخیر در بارگذاری (Defer)

لود جزیره‌ای چیست و چرا در سرعت سایت معجزه می‌کند؟

قدم اول این است که فایل‌های حجیم و یکپارچه سایت را به بخش‌های کوچکتر تقسیم کنیم. اما قدم دوم که جذاب‌ترین بخش ماجراست، «لود جزیره‌ای» نام دارد. در این روش، ما به مرورگر می‌گوییم: فقط چیزی را لود کن که در همین صفحه به آن نیاز داری!

بیایید این موضوع را با چند سناریوی واقعی بررسی کنیم:

  • پخش‌کننده ویدیو: فرض کنید یک فایل استایل با نام player.css به حجم ۵۶ کیلوبایت دارید. منطق حکم می‌کند این فایل فقط و فقط در صفحاتی بارگذاری شود که واقعا یک ویدیو در آن‌ها قرار دارد. لود شدن این فایل در یک صفحه متنی ساده، اتلاف محض منابع است.
  • اسلایدرها و المان‌های تعاملی: اگر از کتابخانه‌هایی مثل Swiper برای ساخت اسلایدرها استفاده می‌کنید، کدهای جاوا اسکریپت و استایل‌های آن باید تنها در صورت وجود اسلایدر در صفحه فراخوانی شوند.
  • تفاوت موبایل و دسکتاپ: گاهی اوقات یک المان (مثل سایدبار چسبان یا Sticky Sidebar) فقط در نسخه دسکتاپ نمایش داده می‌شود. در این شرایط، اجرای کدهای مربوط به آن در موبایل هیچ توجیهی ندارد. ما می‌توانیم با تعریف شروط ساده، این فایل را فقط برای کاربرانی که با دسکتاپ وارد سایت شده‌اند بارگذاری کنیم.

مدیریت هوشمندانه کدها در پس‌زمینه سایت

برای اجرای این معماری، باید از طریق کدهای قالب شروطی را تعیین کنیم. ما می‌توانیم فایل‌های پیش‌فرض و اضافی که توسط افزونه‌ها یا خود قالب در تمام صفحات پخش شده‌اند را متوقف (Dequeue) کنیم. سپس بر اساس نیاز و ساختار هر صفحه، صرفاً فایل‌های ضروری را فراخوانی کنیم. به این ترتیب، مرورگر کاربر درگیر پردازش صدها خط کد بی‌استفاده نمی‌شود و صفحه با سرعت بسیار بالاتری رندر می‌شود.

دیفر کردن (Defer): چه چیزی را به تاخیر بیندازیم؟

بعد از اینکه کدهای هر صفحه را ایزوله و جزیره‌ای کردیم، به گام سوم می‌رسیم. حالا باید تصمیم بگیریم کدام فایل‌ها باید در همان لحظه اول بارگذاری شوند و کدام‌یک می‌توانند با کمی تاخیر (Defer) اجرا شوند.

یک قانون مهم در اینجا وجود دارد: هر چیزی که ظاهر اولیه سایت را می‌سازد، نباید به تاخیر بیفتد.

به عنوان مثال، فایلی مثل header.css که رنگ‌ها، دکمه‌های اصلی و ساختار بالای سایت را شکل می‌دهد، باید در سریع‌ترین زمان ممکن خوانده شود. اگر این فایل را دیفر کنید، کاربر برای چند ثانیه یک سایت به هم ریخته و بدون استایل می‌بیند که تجربه کاربری بسیار بدی است.

اما در مقابل، فایل‌های جاوا اسکریپت مربوط به پخش‌کننده ویدیو که در میانه صفحه قرار دارد، یا استایل‌های مربوط به بخش سوالات متداول در انتهای مقاله، کاندیداهای بسیار خوبی برای دیفر شدن هستند.

نکته جالب اینجاست که وقتی منابع سایت به درستی تفکیک و جزیره‌ای شده باشند، حجم فایل‌های اولیه به قدری کم می‌شود که شاید حتی برای برخی از آن‌ها نیازی به دیفر کردن هم نداشته باشید؛ زیرا فایل‌ها به خودی خود سبک هستند و در کسری از ثانیه بارگذاری می‌شوند.

مسیر پیاده‌سازی این معماری

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

بررسی دقیق این فرآیند روی یک پروژه عملی، دیدن نحوه نوشتن شروط در کدهای قالب برای حذف فایل‌های اضافی، و همچنین تحلیل رفتار مرورگر در تب Network، به هر کارشناس سئو کمک می‌کند تا با دیدی مهندسی‌تر به معماری سایت نگاه کند و راهکارهای پایداری برای بهبود پرفورمنس ارائه دهد.