چگونه عملکرد سایت را بهبود دهیم؟

شرکت Fifty-Five که یک شرکت جمع‌آوری  داده و اطلاعات برای کمک به بهبود تجربه برند کسب‌وکارها در لندن است، یک مطالعه با نام Milliseconds Make Millions در سال 2019 انجام داد و آن را در وبلاگ رسمی Google منتشر کرد. در این مطالعه، چندین بینش جالب در مورد افزایش‌های کوچک در سرعت سایت‌ها پیدا کرد. در این مقاله به بررسی جزئیات این تحقیق و راهکارهایی که برای بهبود سرعت و عملکرد (Performance) سایت پیشنهاد شده‌اند، می‌پردازیم.

تحقیق Milliseconds Make Millions چگونه انجام شد؟

 پس از بررسی‌های کیفی که Fifty-five روی برندهای مختلف انجام داد، سرانجام 37 برند واجد شرایط برای انجام این تحقیق انتخاب شدند. برای انتخاب این برندها، داده‌های مربوط به سرعت سایت آنها از طریق ابزار Google Lighthouse (فانوس دریایی گوگل) اندازه ‌گیری شد و در مقابل اطلاعات جمع‌آوری شده از تجزیه و تحلیل وب هر برند قرار گرفت. این تحقیق، چهار معیار کلیدی سرعت سایت را هدف قرار داد. نتایج این تحقیق به مدل رگرسیون لگاریتمی وارد شدند تا معنای آنها استخراج شود.

خلاصه غیرجامع یافته‌ها فقط برای سایت‌های ریسپانسیو که عملکرد آنها 0.1 ثانیه سریع‌تر از سایر سایت‌ها می‌باشد (بدون در نظر گرفتن تأثیر تصمیمات نسخه دسک‌تاپ سایت)، به شرح زیر است:

•  8.4 درصد افزایش نرخ تبدیل (conversion) برای مشتریان خرده‌فروشی؛ 9.2 درصد افزایش میانگین تعداد سفارش.
•  10.1 درصد افزایش نرخ تبدیل برای مشتریان سفر. 1.9 درصد افزایش میانگین تعداد سفارش.
•  پیشرفت بیشتر قیف فروش (همبستگی مستقیم)؛ نرخ پرش (bounce rate) برای صفحه اصلی سفر، لیست محصولات خرده‌فروشی و سفر به ترتیب 6.5 درصد، 5.7 درصد و 5.4 درصد بهبود یافته‌اند.

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

•  بخش اول این مقاله به معرفی ابزارهایی اختصاص دارد که یک نمای کلی مفید برای مسیر توسعه مستمر سایت، به شما می‌دهد.
•  بخش دوم شامل ارائه راه‌حل‌های عملی برای مشکلاتی هستند که بر روی وب‌سایت‌ها تأثیر می‌گذارند.

راهکارهای پیشنهادی برای بهبود عملکرد سایت در ادامه شرح داده می‌شوند.

راهکار اول: دنبال کردن منابع در طول فرآیند توسعه

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

1-1  KPI های خود را از طریق مدل RAIL ایجاد کنید

شما نمی‌توانید چیزی که اندازه‌گیری نمی‌کنید را بهینه کنید؛ این موضوع شامل عملکرد وبسایت هم می‌شود. مدل RAIL (مخفف Response Animation Idle Load) یک مدل مفهومی کاربر محور است که برای تجزیه و تحلیل و طراحی عملکرد وبسایت استفاده می‌شود. در این مدل تجربیات کاربر به اقدامات کلیدی (مثلاً پیمایش، ضربه زدن، لود شدن) دسته‌بندی می‌شوند تا بهتر بتوانید KPI ای برای هر مورد ایجاد کنید. مدل RAIL، چهار مرحله کلیدی به شرح زیر را در چرخه حیات یک اپلیکیشن وب در نظر می‌گیرد:

• Response: این مرحله می‌گوید که کاربر نهایی با چه سرعتی پاسخ خود را دریافت می‌کند؟ توصیه می‌شود از لحظه‌ای که کاربر روی دکمه‌ای کلیک می‌کند یا روی آن ضربه می‌زند، باید در مدت زیر 100 میلی‌ثانیه پاسخش را دریافت کند. هر چیزی بیش از این مدت زمان، از نظر روانی به کاربر احساس سریع بودن سایت را منتقل نخواهد کرد.
• Animation: این مرحله شامل مواردی مانند سرعت Drag کردن و اسکرول انیمیشن‌ها و سایر جلوه‌های بصری در سایت شماست. حداکثر سرعت توصیه‌شده برای این مرحله 60 فریم در ثانیه (fps) یا یک فریم در هر 16 میلی‌ثانیه است.
• Idle: این مرحله در پس‌زمینه سایت انجام می‌شود؛ مثلاً ممکن است صفحه سایت لود شود اما سرور سایت در پشت صحنه در حال پردازش باشد. مرحله Idle باید در بخشی از زمان 100 میلی‌ثانیه‌ای مرحله Response اجرا شود.
• Load: این مرحله می‌گوید که هر صفحه سایت با چه سرعتی برای کاربر لود می‌شود. این مورد در واقع همان معیار FMP (مخفف First Meaningful Paint) در ابزار Google Lighthouse و یکی از 6 معیاری است که در گزارش Performance این ابزار در سایت دنبال می‌شود. زمان مورد انتظار این مرحله زیر یک ثانیه است و پس از انجام آن، تنها هدف شما باید حفظ سرعت پاسخگویی سایت برای کاربر باشد.

اهمیت تست عملکرد سایت را دست کم نگیرید. در واقع شما باید معیارهای عملکرد وب‌سایت خود را طبق معیارهای Web Vitals گوگل بسنجید. Web Vitals یا معیارهای ضروری برای سلامت سایت، معیارهایی هستند که توسط گوگل ایجاد شده‌اند و راهنمایی یکپارچه‌ای برای دریافت سیگنال‌های مربوط به کیفیت تجربه کاربر(UX) در سایت، به شما می‌دهند. ابزارStackify Retrace و ابزارهای مشابه، به توسعه‌دهندگان کمک می‌کند تا این سیگنال‌ها دریافت کنند و عملکرد وبسایت را بهینه‌تر کنند. کتابخانه web-vitals جاوا اسکریپت در سایت GitHub هم می‌تواند ساده‌ترین ابزار برای اندازه‌گیری معیارهای کیفیت UX و ایجاد KPI های موردنیاز شما باشد.

1-2 بودجه بندی سرعت را با ابزار Google Lighthouse انجام دهید

Lighthouse در چند سال گذشته به عنوان یک ابزار بازرسی عملکرد سایت محبوبیت زیادی پیدا کرده است و وظیفه اصلی آن امتیازدهی به صفحات وب از دیدگاه‌های دسترسی (accessibility)، عملکرد (performance)، SEO و بهترین شیوه‌ها (best practices) است. اما علاوه بر این‌ها می‌توانید از آن به عنوان یک ابزار بودجه بندی عملکرد نیز استفاده کنید که با استفاده از Lighthouse CLI امکان‌پذیر است.

Lighthouse CLI یک متد برای تخصیص بودجه در Lighthouse است. Lighthouse این متد را به عنوان یک افزونه موجود در insight های سرعت صفحه یا از طریق ابزار DevTools اجرا می‌کند. برای نصب Lighthouse CLI می‌توانید از دستورات npm (مخفف Node Package Manager) استفاده کنید. 

بودجه‌ها را به عنوان اشیائی تعریف کنید که داخل یک آرایه منبع (resource array) قرار گرفته‌اند. شما می‌توانید بودجه‌های مختلف را به یک سند، تصویر، فونت، رسانه، اسکریپت، stylesheet، شخص ثالث یا موارد دیگر اختصاص دهید. تخصیص بودجه‌های عملکردی متفاوت به ذخایر منفرد امکان‌پذیر است؛ مانند دادن بودجه عملکرد متفاوت به صفحه اصلی و پست‌های وبلاگ سایت.

هنگامی که تنظیم بودجه خود را کامل کردید، یک گزارش عادی با شاخص‌های عملکرد، به علاوه یک ستون اضافی که نتایج بودجه را نشان می‌دهد، دریافت خواهید کرد. بخش انواع منابع بودجه (budget resource types) در این گزارش هایلایت می‌شود. هنگامی که بودجه خود را تعیین کردید، باید آنها را مطابق با نتایج مد نظرتان زیر نظر بگیرید. این نقطه شروع شما برای بهینه سازی وبسایت است.

راهکار دوم: رفع کردن مهم‌ترین ناکارآمدی‌های موجود در عملکرد وبسایت

 طبق یک مطالعه تحقیقاتی که شرکت SEMrush در سال 2018 در مورد نحوه بهینه‌سازی عملکرد وب‌سایت انجام داد، پنج مورد زیر (به تریتیب اهمیت) تأثیرگذارترین موضوع‌ها در عملکرد سایت هستند که بسیار به آنها بی‌توجهی شده است:

• فایل‌های CSS و جاوا اسکریپت Minify نشده
• سرعت لود پایین صفحه (داخل کد HTML)
• فایل‌های CSS و جاوا اسکریپت Compress نشده
• فایلهای CSS و جاوا اسکریپت Cache نشده
• صفحات وب Compress نشده

توجه کردن به این موارد، معادل بازگشت سرمایه (ROI) بالا برای شما و مکانی برای شروع رفع ناکارآمدی‌های موجود در عملکرد وب سایت است. باید توجه کنید که سه راه‌حل به شرح زیر می‌تواند این مشکلات را برطرف کند:

2-1 صفحات سایت خود را بهینه کنید

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

برش فایل‌های تصویری سایت

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

برش کدهای CSS و JavaScript

تعداد زیادی از وب‌سایت‌ها از فایل‌های CSS و جاوااسکریپت Minify نشده استفاده می‌کنند. Minify یا کوچک کردن فایل‌های کدهای سایت به معنی پاک کردن خطوط غیر کاربردی، نظرات و فضای خالی از source code هاست که از طریق آن، زمان لود شدن صفحات سایت تا حد زیادی افزایش می‌یابد. برای این فرآیند،  چندین ابزار و روش مختلف وجود دارد. دو تا از محبوب‌ترین ابزارهای Minify کردن کدهای جاوا اسکریپت، JSMin و YUI compressor هستند (YUI compressor می‌تواند کدهای CSS را نیز Minify کند). پس تمام کدهای مرده را حذف کنید، کدهای باقیمانده را بازنویسی کنید و حجم آن را به حداقل برسانید. می توانید از تکنیک Obfuscation که ساختاری برای مبهم سازی Source Code یک برنامه و یک روش جایگزین برای فشرده‌سازی کدهاست نیز استفاده کنید، اما ریسک آن به دلیل ایجاد باگ در برنامه کمی بیشتر است. همچنین فراموش نکنید که Script ها و Style های خود را هم فشرده کنید. از طرح‌هایی مانند deflate یا gzip برای انجام این کار در جاوا اسکریپت، CSS و HTML استفاده کنید که اندازه آنها را 50 درصد یا بیشتر کاهش می‌دهد.

2-2 عملکرد سرور خود را بهینه کنید

 یکی دیگر از عواملی که باعث کاهش سرعت بارگذاری صفحات سایت می‌شود (که همچنین دومین مشکل مهمی است که وب‌سایت‌های دارای عملکرد ضعیف با آن مواجه می‌شوند)، هاستینگ و سرور ضعیف وبسایت است.  در واقع در بین عوامل کندی وبسایت، این عامل دلیل رایج‌تری نسبت به حجم بالای کد HTML صفحه است (که می‌تواند تنها 1 درصد تاثیرگذار باشد). پس حتماً سرویس ارائه دهنده هاست و دامین خود را مجدد ارزیابی کنید. اگر به نتایج غیراستانداردی رسیدید، ارائه دهنده هاست و سرور خود را تغییر دهید یا به فکر پرداخت هزینه برای خرید سرور اختصاصی یا ابری باشید. برای آشنایی با وب سرور و نحوه‌ی عملکرد آن به این بخش رایگان آموزشی مراجعه کنید.

حل بیشتر مشکلات سرور

ماشین حساب گوگل به نام Think with Google به شما کمک می‌کند تا تخمین بزنید که بهبود سرعت سایت تا چه حد بر درآمد شما تأثیر می‌گذارد. عوامل کلیدی دیگری که می‌توانند بر پاسخ‌دهی سرور (server response) شما تأثیر بگذارند عبارتند از:

• کندی در کوئری‌ها، مسیریابی و منطق برنامه پایگاه داده
• کمبود در کتابخانه‌ها، فریمورک‌ها، CPU منابع یا حافظه. 

علاوه بر استفاده از این ابزار گوگل، می‌توانید از ابزارهای دیگری که برای مدیریت عملکرد اپلیکیشن وجود دارند استفاده کنید. برای مثال ابزار Retrace در عیب‌یابی سریع و حل مشکلات مربوط به سرور به شما کمک زیادی می‌کند. صرف زمان کمتر برای جستجوی راه‌حل‌ها می‌تواند بر درآمد شما تأثیر بگذارد.

کش مرورگر (Browser caching)

فایل‌های CSS و جاوا اسکریپت کش‌نشده هم یکی دیگر از مشکلات اصلی موجود در سرور است. شما باید کش مرورگر را در قسمت هدر پاسخ (response header) مشخص کنید؛ چراکه فعال نکردن آن می‌تواند باعث شود کاربران در هر بازدید از صفحه وب شما، فایل‌های آن را دوباره دانلود کنند. با فعال کردن کش مرورگر برای فایل‌های CSS و جاوا اسکریپت، مرورگرها می‌توانند منابع صفحات شما را به طور مجدد استفاده و ذخیره کنند؛  بدون اینکه نیاز داشته باشند تا آن منابع را طی هر بار بازدید کاربر از صفحات سایت شما، دوباره دانلود کنند. این موضوع یک معامله دو سر برد است، زیرا مرورگرها از داده‌های کمتری استفاده می‌کنند و این باعث می‌شود که سرعت بارگذاری صفحات و در نتیجه سرعت سایت شما هم بالا برود. برای شناسایی چنین مسائلی که به راحتی نادیده گرفته می‌شود، همیشه می‌توانید از ابزارهای پروفایل کد که به بهبود عملکرد سایت کمک می‌کنند (مانند Prefix by Stackify) استفاده کنید.

2-3 ریدایرکت‌ها را مرتب کنید

لوپ‌ها و زنجیره‌های ریدایرکت (Redirect)، یک مشکل قدیمی رایج در عملکرد وبسایت هستند. رفع این مشکل می‌تواند تاخیرهای موجود بین لحظه‌ای که کاربران برای مشاهده صفحه سایت شما روی آن کلیک می‌کنند تا لحظه‌ای که این صفحه واقعاً روی سیستم آنها ظاهر می‌شود را از بین ببرد. این موضوع سردرگمی روبات‌های خزنده گوگل را هم کاهش می‌دهد. هرچه ریدایرکت‌های بیشتری در سایت شما وجود داشته باشد، ربات‌های گوگل ممکن است رتبه شما را کاهش دهند و تاثیر منفی روی سئوی سایتتان بگذارند. توجه داشته باشید که هر چه وبسایت شما قدیمی‌تر باشد و تعداد ریدایرکت‌های بیشتری در آن انباشته شده باشند، مرتب نگه داشتن اسکیمای سایت شما دشوارتر خواهد بود.

نحوه پاک کردن ریدایرکت‌های وبسایت

ریدایرکت‌های کد 301 دائمی هستند و زمانی نشان داده می‌شوند که صفحه‌ای منتقل یا حذف شده است و به بازدیدکنندگان سایت پیام ERROR 404 را نمایش می‌دهد. ریدایرکت‌های کد 302 موقتی هستند و به این معنی هستند که شما برای مدتی ترافیک صفحه وبسایت را به صفحه دیگری هدایت کرده‌اید. این ریدایرکت‌ها مشکل رایجی نیستند و می‌توانید با استفاده از ابزارهای رایگانی مانند Redirect Mapper، Broken Requests، Redirect Detective و Screaming Frog Bulk Redirect Redirect Checker بررسی کنید که آیا مشکلات ریدایرکت در سایت شما وجود دارند یا خیر.

کلام آخر

با توجه به نکاتی که مطرح کردیم، می‌توان گفت که شما باید بهینه سازی عملکرد سایت را به عنوان یک فرآیند دوگانه در نظر بگیرید:

1. اندازه‌گیری نقاط شروع یا در حال انجام پروژه تنها نیمی از معادله مدیریت پروژه است. در این مقاله به بودجه‌بندی از طریق مدل RAIL و ابزار Lighthouse اشاره کردیم، اما Google PageSpeed Insights یکی دیگر از ابزارهای مناسب برای شروع کار است؛ چراکه ابزاری رایگان و پر از امکانات است و گزارش‌های مربوط به کاربرانی که از طریق موبایل و دسکتاپ از سایت شما بازدید می‌کنند را برایتان تولید می‌کند. همچنین تمرکز آن بر معیارهایی است که گوگل به طور جدی با آنها برخورد می‌کند.
2. نیمه دوم مدیریت پروژه شما، از بین بردن ناکارآمدی‌هایی است که بر عملکرد وب سایت شما تأثیر می‌گذارند.

بنابراین با این دو راهکار، شما یک برنامه دقیق برای بهینه‌سازی عملکرد وب سایت خود خواهید داشت.