۱۰ راه افزایش سرعت وب‌سایت و افزایش ۷ درصدی نرخ تبدیل

کمی بیشتر فکر کنید

هر ۱ ثانیه تأخیر در زمان بارگذاری یک صفحه، تبعات زیر را به دنبال دارد:

• ۱۱ درصد بازدید کمتر از صفحه
• ۱۶ درصد کاهش رضایت مشتریان
• ۷ درصد کاهش نرخ تبدیل (منبع: گروه آبردینAberdeen Group)

سایت آمازون جزو سایت‌هایی است که ثابت کرده این مسئله واقعیت دارد. چرا که درازای هر صد هزارم ثانیه افزایش سرعت وب‌سایتش، ۱ درصد افزایش درآمد داشته است.

Walmart هم درازای هر ۱ ثانیه افزایش سرعت وب‌سایت شاهد ۲ درصد افزایش نرخ تبدیل خود بوده است.

اما ماجرا به اینجا ختم نمی‌شود. مطالعه‌ای که اکامای (Akamai) انجام داده، نشان می‌دهد:

• ۴۷ درصد مردم انتظار دارند که صفحه وب‌سایت ظرف دو ثانیه یا کمتر بارگذاری شود.
• ۴۰ درصد مردم در صورت عدم‌بارگذاری صفحه‌ای بعد از سه ثانیه، آن سایت را ترک می‌کنند.
• ۵۲ درصد خریداران آنلاین می‌گویند برای آنکه به سایتی وفادار بمانند، سرعت بارگذاری آن بسیار اهمیت دارد.

اما بر اساس گزارش رادور (Radware) میانگین سرعت بارگذاری وب‌سایت امسال ۲۲ درصد افزایش‌یافته است. به‌طوری‌که امروزه بارگذاری هر صفحه ۷۲/۷ ثانیه طول می‌کشد و این بسیار سریع‌تر از محدوده دوثانیه‌ای است که یک کاربر معمولی انتظار دارد.

بنابراین افزایش سرعت وب‌سایت، نه‌تنها برای داشتن رتبه بالا در گوگل، بلکه برای حفظ سودآوری مناسب، موضوعی حیاتی است. بنابراین امروز قصد دارم عمیق‌تر به این مسئله بپردازم و ۱۰ نکته را برایتان بازگو کنم که به افزایش سرعت سایت شما و درنتیجه افزایش درآمد و سودآوری آن کمک می‌کنند.

۱۰ ترفند افزایش سرعت سایت

۱ـ درخواست‌های HTTP را کاهش دهید

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

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

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

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

۲ـ زمان پاسخگویی سرور را کاهش دهید

هدف شما این است که زمان پاسخگویی سرور به کمتر از ۲۰۰ هزارم ثانیه برسد. اگر مراحل این مقاله را دنبال کنید به هدف خودخواهید رسید. گوگل استفاده از برنامه پایش اپلیکیشن های وب (web application monitoring solution) و بررسی نقاط ضعف عملکرد را توصیه می‌کند.

نکته طلایی: برای آنکه ۹ ترفند را برای حفظ عملکرد مناسب وب‌سایت خود بیاموزید، گزارش نیازهای حیاتی برای زیرساخت تجارت الکترونیک (Critical Ecommerce Infrastructure Needs) را که توسط Singlehop تهیه‌شده مطالعه نمایید.

از این منابع نیز می‌توانید استفاده کنید:

• Yslow به‌منظور ارزیابی سرعت وب‌سایت و یادگیری نکاتی درباره بهبود عملکرد.
• ابزارهای افزایش سرعت صفحات (PageSpeed Tools) گوگل برای یادگیری بیشتر درباره فعالیت‌های موفقیت‌آمیز جهت بهبود عملکرد، و اتوماسیون فرایند.

۳ـ امکان فشرده‌سازی را فراهم کنید

صفحات بزرگ (اگر محتوایتان کیفیت بالایی داشته باشد صفحات بزرگی خواهید داشت) اغلب ۱۰۰ کیلوبایت یا بیشتر حجم دارند. درنتیجه به‌کندی دانلود می‌شوند. بهترین راه برای افزایش سرعت لود شدن این صفحات، زیپ کردن آن‌ها یا به عبارت تکنیکی‌تر، فشرده کردن آن‌هاست.

فشرده‌سازی، پهنای باند صفحات شما را کاهش می‌دهد و درنتیجه باعث کاهش زمان پاسخگویی HTTP می‌گردد. برای این کار می‌توانید از ابزار Gzip استفاده کنید.

بیشتر سرورهای وب می‌توانند قبل از ارسال فایل‌ها برای دانلود، آن‌ها را در فرمت Gzip فشرده کنند. آن‌ها برای این کار گاهی از یک third-party module و گاهی از built-in routines استفاده می‌کنند. به نقل از یاهو، با این کار می‌توانید زمان دانلود را تا ۷۰ درصد کاهش دهید. ازآنجایی‌که امروزه ۹۰ درصد ترافیک اینترنت از طریق مرورگرهایی است که از Gzip پشتیبانی می‌کنند، این ابزار گزینه فوق‌العاده‌ای برای افزایش سرعت سایت محسوب می‌شود.

نکته طلایی: برای کسب اطلاعات بیشتر درباره فشرده‌سازی از طریق Gzip به این مقاله مراجعه کنید. سپس سرور خود را تنظیم کنید تا امکان فشرده‌سازی وجود داشته باشد:

• Apache: از mod_deflate استفاده کنید.
• Nginx: از HttpGzipModule استفاده کنید.
• IIS: از Configure HTTP Compression استفاده کنید.

۴ـ حافظه موقت مرورگر را فعال کنید

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

Tenni Theurer، که قبلاً در یاهو فعالیت داشت این مسئله را این‌گونه توضیح می‌دهد: اولین باری که کسی به وب‌سایت شما سر می‌زند، باید سند HTML ، استایل شیت ها، فایل‌های جاوا، اسکریپت و تصاویر را دانلود کند تا بتواند از صفحه شما استفاده کند. این‌ها روی‌هم ممکن است به ۳۰ مورد برسند که لود شدن آن‌ها ۴/۲ ثانیه طول می‌کشد.

بعدازآنکه صفحه لود می‌شود و بخش‌های مختلف در فایل کش کاربر ذخیره می‌شوند، به هنگام بازدید مجدد از صفحه، تنها چند جز نیاز به دانلود مجدد دارند. در آزمایشی که تیورر انجام داد، فقط سه جزء وجود داشت که لود شدن آن‌ها ۹/۰ ثانیه طول کشید. به‌این‌ترتیب تقریباً ۲ ثانیه از زمان لود شدن کاسته شد.

Theurer می‌گوید که ۴۰ تا ۶۰ درصد از بازدیدکنندگان سایت شما در هرروز با یک فایل کش خالی به سراغ شما می‌آیند، بنابراین ضروری است صفحه وب شما سریع لود شود تا این بازدیدکنندگان را که اولین بار است به شما سر می‌زنند، جذب کند. از طرفی لازم است امکان ذخیره در کش را فعال کنید تا زمان لود شدن را برای بازدیدهای آتی کاهش دهید.

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

برای تمامی منابع قابل کش (مانند فایل‌های JS و CSS، فایل‌های تصاویر، فایل‌های مدیا، PDF ها و …) تاریخ انقضا را حداقل یک هفته و حداکثر ترجیحاً یک سال تنظیم کنید. بیشتر از یک سال فراتر از استاندارد RFC است.

 ۵ـ منابع را کوچک کنید

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

• برای کوچک کردن HTML می‌توانید از PageSpeed Insights Chrome Extension  استفاده کنید تا نسخه‌ای بهینه از کد HTML خود ایجاد نمایید. صفحه HTML خود را تجزیه‌وتحلیل کنید و دستور Minify HTML را اجرا کنید. روی See optimized content کلیک کنید تا کد بهینه HTML را دریافت نمایید.
• برای کوچک کردن CSS می‌توانید YUI Compressor  و  cssmin.js را امتحان کنید.
• برای کوچک کردن جاوا اسکریپ، Closure Compiler, JSMin یا YUI Compressor را امتحان کنید. می‌توانید فرایندی را ایجاد کنید که از این ابزارها برای مینی فای کردن و تغییر نام فایل‌های توسعه استفاده کند و آن‌ها را در یک دایرکتوری تولید ذخیره نماید.

۶ـ تصاویر را بهینه‌سازی کنید

هنگام استفاده از تصاویر، باید روی سه چیز تمرکز کنید: اندازه، فرمت و ویژگی src.

اندازه تصویر

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

• تصاویر را کراپ کرده و اندازه آن‌ها را تنظیم کنید. برای مثال اگر عرض صفحه شما ۵۷۰px  است، اندازه تصویر را با آن تنظیم کنید. نباید یک تصویر به عرض ۲۰۰۰px آپلود کنید و سپس پارامتر عرض را ۵۷۰ تنظیم کنید. با این کار زمان لود صفحه کند شده و باعث نارضایتی کاربر می‌گردد.
• عمق رنگ را تا حداقل سطح موردقبول کاهش دهید.
• کامنت های تصویر را حذف کنید.

فرمت تصویر

• JPEG بهترین گزینه است.
• PNG هم خوب است، هرچند که ممکن است مرورگرهای قدیمی‌تر از آن به‌طور کامل پشتیبانی نکنند.
• از گیف ها فقط برای گرافیک‌های کوچک یا ساده (کمتر از ۱۰×۱۰ پیکسل، یا پلات رنگ با ۳ رنگ یا کمتر) و تصاویر متحرک استفاده کنید.
• از BMP یا TIFF استفاده نکنید.

ویژگی Src

بعدازآنکه فرمت و اندازه مناسب را تنظیم کردید، باید مطمئن شوید که کد هم درست است. به‌طور خاص از کدهای خالی scr برای تصاویر اجتناب کنید. در HTML کد تصاویر شامل <img src=””> است.

وقتی در بین این گیومه‌ها منبعی نباشد، مرورگر درخواستی را برای دایرکتوری صفحه یا خود صفحه می‌فرستد. بدین ترتیب ترافیک غیرضروری برای سرور ایجاد می‌شود و حتی داده‌های کاربر مخدوش می‌شوند.

نکته طلایی: وقت بگذارید و قبل از آپلود کردن تصاویر، اندازه آن‌ها را تنظیم کنید. همیشه ویژگی src را با یک URL معتبر لحاظ کنید.

برای اطمینان از سرعت لود شدت تصاویر می‌توانید پلاگین WP Smush.it را به وب‌سایت اضافه کنید.

۷ـ تحویل CSS را بهینه‌سازید

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

CSS اکسترنال قبل از HTML، با کدی که بسیار شبیه به این کد است، بارگذاری می‌شود:

<!—Your styles –>

<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />

CSS این‌لاین در HTML سایت شما جای می‌گیرد و شبیه این است:

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

نکته طلایی: هنگام تنظیم استایل‌ها فقط از یک استایل شیت CSS اکسترنال استفاده کنید، چرا که داشتن استایل شیت‌های بیشتر باعث می‌شود که درخواست‌های HTTP بیشتر شوند. در اینجا دو منبع را مشاهده می‌کنید که می‌توانند مفید باشند:

• ابزار تحویل CSS: این ابزار به شما می‌گوید سایت شما از چند استایل شیت اکسترنال استفاده می‌کند.
• دستورالعمل‌هایی برای ترکیب فایل‌های CSS اکسترنال.

از CSS در کد HTML (مانند div ها در تیترها (درست مثل CSS این لاین در تصویر بالا)) استفاده نکنید. اگر تمامی CSS ها را در استایل شیت اکسترنال قرار دهید، کدینگ شما شکل تمیزتری به خود خواهد گرفت.

۸ـ محتوای بالای صفحه را در اولویت قرار دهید

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

نکته طلایی: می‌توانید CSS خود را به دو بخش تقسیم کنید: یک بخش این‌لاین کوتاه که استایل بالای صفحه را شکل می‌دهد و یک بخش اکسترنال که می‌تواند کمی تأخیر داشته باشد.

۹ـ تعداد پلاگین‌های روی سایت خود را کاهش دهید

بالا بودن تعداد پلاگین‌ها باعث مشکلات امنیتی می‌شود و اغلب مشکلات فنی و اشکالاتی را نیز به دنبال دارد.

نکته طلایی: پلاگین‌های غیرضروری را غیرفعال یا حذف کنید. سپس هر پلاگینی را که باعث کند شدن سرعت سایت می‌شود، پاک‌کنید.

پلاگین‌ها را به شکل منتخب غیرفعال و یکی‌یکی آن‌ها را امتحان کنید و سپس عملکرد سرور را اندازه بگیرید. بدین ترتیب می‌توانید پلاگین هایی را که روی سرعت سایت شما تأثیر منفی دارند، شناسایی نمایید.

۱۰ـ انتقال صفحات (redirect) را کاهش دهید

انتقال صفحه باعث ایجاد درخواست‌های HTTP اضافی می‌شود و زمان لود شدن را افزایش می‌دهد. ازاین‌رو باید این کار را به حداقل برسانید.

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

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

• از انتقال صفحه HTTP استفاده کنید تا کاربران موبایلی مستقیماً به URL معادل موبایل منتقل شوند، بدون آنکه نیازی به انتقال صفحه واسطه وجود داشته باشد، و
• در صفحات دسکتاپ خود یک <link rel=”alternate”> markup قرار دهید تا URL معادل موبایل را شناسایی نمایید و Googlebot بتواند صفحات موبایل شما را کشف کند.

بحث خیلی فنی به نظر می‌رسد؟ نگران نباشید. این پست که

وسط VerveSearch تهیه‌شده به شما کمک می‌کند انتقال به وب‌سایت موبایلی را بدون کند شدن سرعت انجام دهید.

نکته نهایی

اجرای برخی از این نکات ساده است اما برخی از آن‌ها جزو تکنیک‌های پیشرفته بوده و اگر شما در زمینه فنی مهارت نداشته باشید، ممکن است به زیان شما تمام شوند.

در این صورت بهتر است کمک بگیرید. منابع پیشنهادی من عبارتند از:

• اگر می‌خواهید خودتان عمیق‌تر شده و کارها را به‌تنهایی انجام دهید، Google Developers اطلاعات مفیدی دارد که می‌تواند به شما در بهبود عملکرد سایت کمک کند.
• برای داشتن یک‌راه حل منحصربه‌فرد می‌توانید از سرورهایی که به‌طور کامل مدیریت و سازمان‌دهی شده‌اند مثل SingleHop استفاده کنید.