سرعت صفحهٔ فرود با مثال واقعی؛ از تئوری تا اجرا

صفحهٔ فرود، ویترین کمپین است: کاربری که از تبلیغ یا شبکهٔ اجتماعی می‌رسد، صبورترین کاربر نیست و صفحه را با توقّع بالا ورود می‌کند. برای همین ساختار صفحه فرود سئو؛ شش قدم تبدیل‌محور ساختار و پیام صفحهٔ فرود را می‌سازد و این متن لایهٔ دیگر همان صفحه است — سرعت. دو لایه مکمل‌اند: ساختار بی‌سرعت، بازدیدکنندهٔ خسته می‌سازد؛ سرعت بی‌ساختار، بازدیدکنندهٔ سریع بی‌تصمیم.

مرز بحث را روشن کنیم: هاب سرعت و کارایی وردپرس نقشهٔ کامل سرعت وردپرس است و ابزارها و اعداد را پوشش می‌دهد؛ این‌جا فقط صفحهٔ فرود را می‌بینیم، با یک نمونهٔ کارگاهی که از همین حالت‌های آشنا ساخته شده. عمق تصاویر را بهینه‌سازی تصاویر وردپرس از آپلود تا انتشار و عمق اسکریپت‌ها را حذف اسکریپت‌های غیرضروری؛ از ممیزی تا تعویق جدا دارند؛ این‌جا نوبت و اولویتِ آن‌ها در فرود است.

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

میانگین سرعت سایت، میانگینِ صفحاتی است که کاربرهای متفاوت با انتظارهای متفاوت باز می‌کنند؛ صفحهٔ فرود آن گوشهٔ خاصی از این توزیع است که ترافیک پرداختی و کمپین رویش می‌نشیند. هزینهٔ کندی هم آن‌جا که توقع بالاست، بیشتر است: کاربری که با کلیک پولی آمده، هر ثانیهٔ انتظار را با سؤال «آیا جای درستی آمدم؟» کنار می‌گذارد. به تجربهٔ ما دو دامنه با میانگین برابر، اگر فرودهایشان فرق کند، نتیجهٔ کمپین‌شان فرق می‌کند.

دلیل دوم فنی است: فرود معمولاً سنگین‌ترین صفحهٔ سایت است، چون در کنار هیروی تمام‌عرض، بنر شبکه‌ها، ویدیو و فرم نشسته است؛ اجزایی که در صفحهٔ مقاله نیستند. برای همین خط پایهٔ فرود را جدا ثبت کنید — تست جدا، تاریخچه جدا، تصمیم جدا. مقایسهٔ فرود با میانگین سایت، همان اشتباه مقایسهٔ عدد بی‌مرجع است که در هر سنجش دیگری هم می‌پرد ازش.

و یک مرز صادقانه: سرعت جایگزین پیام نیست؛ فرود سریعِ بی‌قول کاربر را نگه نمی‌دارد و فرود کند، کاربر را پیش از دیدن پیام از دست می‌دهد. هر دو لایه لازم‌اند و در ادامه، هر جا از اثر سرعت حرف می‌زنیم فقط روی لایهٔ قابل‌اندازه‌گیری می‌مانیم: زمان ورود محتوای اصلی، نه تصمیم کاربر.

نمونهٔ کارگاهی؛ آناتومی یک صفحهٔ فرود سنگین

نمونهٔ زیر را کارگاهی می‌سازیم؛ عددهایش نمونه است، نه آمار بازار. فرض کنید صفحهٔ فرود یک خدمت: هیروی تمام‌عرض با یک عکس گرفته‌شده از دوربین، سه بنر دایره‌ای اعتماد زیر هیرو، یک ویدیوی معرفی، فرم مشاوره و هفت ابزارک صفحه‌ساز. قالب، صفحه‌ساز و چهار افزونه روی آن نشسته. این ترکیب، ترکیبِ اکثر فرودهایی است که در ممیزی‌ها می‌بینیم؛ نه چون بی‌دقت ساخته شده، چون هر جزء را کسی به‌خاطر یک هدف مشخص اضافه کرده و هیچ‌کس مجموع را وزن نکرده.

زنجیرهٔ بارگذاری این صفحه به‌ترتیب می‌شود: سند HTML، استایل قالب و صفحه‌ساز، چند اسکریپت مسدودکننده، دانلود فونت‌ها، و در آخر تصویر هیرو که دیرتر از همه می‌رسد؛ همان چیزی که کاربر واقعاً منتظرش است. نتیجهٔ این ترتیب، صفحه‌ای است که اجزای فرعی‌اش اول می‌آیند و جزء اصلی دیر. اصلاح سرعت فرود، یعنی وارونه‌کردن همین ترتیب: مهم‌ترین چیز اول برسد و بقیه صبر کنند. و این کار با نمرهٔ کل شروع نمی‌شود؛ با شناسایی همین زنجیره شروع می‌شود.

گرهٔ اول؛ تصویر هیرو و اجزای بالای صفحه

تصویر هیرو معمولاً بزرگ‌ترین فایل صفحه است و از نظر کاربر، تعریف «صفحه باز شد» با رسیدن همین تصویر است. سه اصلاح با بازده مشخص دارد: فشرده‌سازی و فرمت مدرن به‌جای عکس خام دوربین؛ اندازهٔ واقعی نمایش، نه تصویری چهار برابر بزرگ‌تر از جایگاهش؛ و بارگذاری فوری برای تصویر هیرو — نکتهٔ ظریف این است که قاعدهٔ معروف «همهٔ تصاویر را به‌تأخیر بیندازید» برای هیرو برعکس است؛ بارگذاری تنبلِ تصویر اصلی، همان جزئی را که کاربر منتظرش است عقب می‌اندازد.

بعد از هیرو، بنرها و آیکون‌های اعتماد هستند: معمولاً چند فایل PNG سنگین که جای خودشان فشرده‌سازی ندارد. قاعدهٔ کارگاهی ساده است: هر تصویری که در نیمهٔ بالایی صفحه است، بار فوری و بهینه؛ هر چه پایین‌تر است، بار تنبل. اگر می‌خواهید این قاعده را در کل گردش تصویر سایت — از آپلود تا انتشار — نهادینه کنید، بهینه‌سازی تصاویر وردپرس از آپلود تا انتشار همان فرایند را گام‌به‌گام دارد. در نمونهٔ ما، اصلاح هیرو و بنرها اولین قدم است، چون هم بار را کم می‌کند و هم زمان رسیدنِ چیزی که کاربر انتظارش را دارد.

گرهٔ دوم؛ اسکریپت‌های صفحه‌ساز و ابزارک‌های اضافه

گرهٔ دوم پنهان‌تر است: اسکریپت‌ها. صفحه‌ساز هر ابزارک را با کتابخانهٔ خودش همراه می‌کند؛ انیمیشن‌ها، اسلایدرها و ویجت‌های شبکهٔ اجتماعی هر کدام چند فایل می‌آورند و بخشی از آن‌ها قبل از نمایش محتوا اجرا می‌شوند. مشکل اصلی حجم نیست؛ مسدودکننده‌بودن است — اسکریپتی که قبل از رندر باید اجرا شود، صفحه را نگه می‌دارد. ممیزی این بخش فهرستی می‌سازد: کدام اسکریپت‌ها مسدودکننده‌اند، کدام را می‌توان به آخر صف تعویق کرد و کدام اصلاً در این صفحه کاربرد ندارند.

قاعدهٔ ابزارک هم به همان اندازه مهم است: هر ابزارک تازه، هزینهٔ دائمی دارد، حتی وقتی دیده نمی‌شود. ویدیوی معرفی را به‌صورت تعاملی بارگذاری کنید تا تا زمان کلیک، فایلش نیاید؛ ویجت‌های زندهٔ شبکه را در فرود بازبینی کنید که واقعاً نقشی در تصمیم کاربر دارند یا فقط عادت‌اند. اگر فهرست ممیزی اسکریپت‌هایتان شلوغ است، حذف اسکریپت‌های غیرضروری؛ از ممیزی تا تعویق مسیر ممیزی تا تعویق را جدا دارد. در نمونهٔ کارگاهی، همین دو کار — تعویق اسکریپت‌ها و سبک‌سازی ابزارک‌ها — بیشترین تغییر در ترتیب بارگذاری را می‌سازد.

ترتیب اصلاح؛ از تصویر هیرو شروع کنید، نه از نمرهٔ کل

ترتیب پیشنهادی اصلاح، پنج قدم دارد و قدم اول اندازه‌گیری است: تست فرود در ابزار آزمایشگاهی، ثبت خط پایه و همین زنجیرهٔ بارگذاری. قدم دوم، تصاویر بالای صفحه؛ قدم سوم، اسکریپت‌های مسدودکننده؛ قدم چهارم، فونت‌ها — تعداد کمتر و نمایش جایگزین تا متن پیش از رسیدن فونت دیده شود؛ قدم پنجم، کش و CDN که اجزای تکراری را برای بازدید دوم ارزان می‌کند. چرا فونت چهارم است؟ چون در نمونهٔ ما سهمش از تصویر و اسکریپت کمتر است؛ ترتیب، از سهم واقعی گره‌ها می‌آید، نه از فهرست عمومی توصیه‌ها.

قاعدهٔ اجرای قدم‌ها: بعد از هر قدم، یک تست و یک ثبت. اگر پنج قدم را با هم اعمال کنید، نمی‌دانید کدام مؤثر بود و — مهم‌تر — اگر چیزی خراب شد، نمی‌دانید کدام. به تجربهٔ ما همین «یک قدم، یک تست» تفاوت تیم‌هایی است که سرعت‌شان پایدار می‌ماند با تیم‌هایی که هر به‌روزرسانی، نمرهٔ صفحه را به قرعه می‌سپارد. و نمرهٔ کل را در هیچ قدمی هدف نگذارید؛ هدف، زمان رسیدن محتوای اصلی و پایداری چیدمان است، همان دو چیزی که کاربر واقعاً حس می‌کند.

بعد از اصلاح؛ سنجش بدون قضاوت زودهنگام

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

قضاوت زودهنگام، رایج‌ترین خطای این مرحله است: دو روز بعد از اصلاح، ترافیک نوسان دارد و جمع‌بندی می‌شود. سرعت، شرط ورود است نه قول نتیجه؛ اصلاح فرود کندِ خوب، می‌تواند نرخ خروج را بهتر کند اما تصمیم خرید را ساختار صفحه می‌گیرد — همان لایه‌ای که ساختار صفحه فرود سئو؛ شش قدم تبدیل‌محور آن را می‌سازد. و برای این که این چرخه یک‌بار اجرا نشود، پایش مستمر سرعت سایت؛ دادهٔ میدانی و آزمایشگاه پایش مستمر را می‌چیند تا افت‌های تازه، دوباره زنجیرهٔ امروز را بازسازند.

جمع‌بندی؛ سه تصمیمی که سرعت فرود را نگه می‌دارد

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

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

رصد ما، رشد شما.