10 روش برای افزایش سرعت سایت و
تقویت نرخ
تبدیل بازدیدکنندگان به
مشتریان اگر فکر می کنید سرعت وب سایت پارامتر مهم و تاثیرگذاری برای یک وبسایت نیست باید تجدیدنظر کنید.
آمار نشان داده است که هر یک لحظه تاخیر در زمان بارگذاری یک صفحه موجب میشود که :
بازدید سایت 11% کاهش میابد. میزان رضایت کاربران 16% کاهش یابد. نرخ تبدیل کاربران به مشتریان 7% کاهش یابد.
وبسایت
Amazon اعلام کرده است که به ازای هر 100 میلیثانیه افزایش سرعت بارگذاری
وبسایت، فروش آنها 1% افزایش پیداکرده است.
همچنین وبسایت
Walmart اعلام کرده است که به ازای هر 1 ثانیه افزایش در سرعت
وبسایت، نرخ تبدیل بازدیدکننده به مشتریان وبسایت آنها 2% افزایش مییابد.
علاوه بر اینها، دریکی از بررسیهای انجامشده توسط Akamai نتایج زیر حاصلشده است:
47% از افراد انتظار دارند که یک وبسایت در زمانی کمتر از 2 ثانیه بارگذاری شود. 40% از افراد اگر زمان بارگذاری یک صفحه بیش از 3 ثانیه به طول بکشد آن صفحه را ترک میکنند. 52% از افرادی که خریدهای خود را بهصورت آنلاین انجام میدهند، به صفحاتی که سریعتر بارگذاری میشوند بیشتر اعتماد میکنند و همچنین ترجیح میدهند که مشتری دائمی این صفحات باشند.
اما با تمامی این تفاسیر بر اساس آمارها میانگین زمان بارگذاری طراحی سایت ها در سال جاری افزایش داشته است با این حال میانگین زمان بارگذاری صفحات وب هنوز از 2 ثانیهای مدنظر کاربران بسیار فاصله دارد. این مساله که افزایش سرعت یک وب سایت مساله ای بسیار ضروری است امری واضح است، بهبود سرعت یک وب سایت نهتنها برای بهبود رتبهبندی وبسایت در نتایج جستجوهای گوگل بلکه برای جذب کاربران نیز بسیار ضروری است. این مقاله 10 نکته بسیار مهم برای بهبود سرعت یک وبسایت به اطلاع شما میرساند.
مزایای داشتن وبسایتی با سرعت بارگذاری بالا
1 کاهش درخواستهای HTTP یا HTTP Request
بر اساس آمارهای ارائهشده توسط یاهو، 80% زمان بارگذاری صفحات وب صرف دانلود بخشهای مختلف صفحه مثل تصاویر، استایل شیت ها (stylesheets)، اسکریپت ها، فلشها و … میشود. برای هریک از این المانها یک درخواست HTTP ارسال میگردد، بنابراین هرچقدر که المانهای درون صفحه بیشتر باشند زمان بارگذاری یک صفحه بیشتر خواهد شد.پس سریعترین و راحتترین راه برای سرعت بخشیدن به وبسایت ساده کردن طراحی آن است.
تعداد المانهای درون صفحه خود را تا حد ممکن کم کرده و صفحات خود را ساده و بیآلایش ایجاد کنید.
هرکجا که ممکن است بهجای تصاویر از CSS استفاده نمایید.
استایل شیت های چندگانه را ترکیب کرده و یک استایل شیت واحد ایجاد نمایید.
تعداد اسکریپتها را کاهش دهید و آنها را در انتهای صفحه قرار دهید.
نکته
یک کمپین برای کاهش تعداد المانهای درون صفحه، برای هر صفحه ایجاد کنید. با این کار شما تعداد درخواستهای HTTP خود را به حداقل تعداد ممکن کاهش خواهید داد تا بارگذاری صفحات شما با سرعت بیشتری انجام شود و کارایی وبسایت شما حداکثر شود.
2 کاهش زمان پاسخگویی سرور
هدف شما باید رسیدن به زمان پاسخگویی سرور کمتر از 200 میلیثانیه باشد. اگر شما نکات موجود در این مقاله را مورداستفاده قرار دهید در مسیر رسیدن به این هدف عملکرد بسیار خوبی خواهید داشت.پیشنهاد گوگل در این زمینه استفاده از یک ابزار برای مانیتور کردن وب اپلیکیشن برای بررسی عوامل محدودکننده سرعت و کارایی وبسایت است.
به منابع زیر مراجعه نمایید:
Yslow: برای ارزیابی سرعت سایت و یافتن نکاتی برای بهبود کارایی یک وبسایت. ابزارهای ارزیابی سرعت صفحات گوگل Google’s Page Speed Tools این ابزارها به شما کمک میکنند تا اطلاعات خوبی از عملکرد و کارایی وبسایت خود کسب کنید و همچنین بهترین راهکارها برای بهینه سازی عملکرد وبسایت را به شما پیشنهاد میکنند علاوه بر این با استفاده از این ابزارها میتوان پروسه ارزیابی عملکرد را اتوماتیک نمود.
3فشردهسازی مطالب
حجم صفحات بزرگ که مطالب آنها زیاد است (اگر شما سعی کنید که محتواهای باکیفیت و جامعی تولید کنید، چنین صفحاتی در وبسایت شما بهوفور دیده میشود) معمولا بیش از 100 کیلوبایت است. به همین دلیل حجم این صفحات بسیار زیاد بوده و سرعت دانلود آنها کم است و لذا سرعت بارگذاری آنها بسیار کم است. یکی از روشهای مناسب برای افزایش سرعت بارگذاری این صفحات zip کردن آنها است، این فن اصطلاحا فشردهسازی یا Compression نام دارد.فشردهسازی پهنای باند یک صفحه را کاهش میدهد و بدین طریق پاسخ HTTP را نیز کاهش میدهد.
شما میتوانید این کار را با ابزاری به نام Gzip انجام دهید.بیشتر سرورهای وب قادرند فایلها را پیش از آنکه برای دانلود ارسال نمایند به فرمت Gzip فشردهسازی نمایند. بر اساس آمارهای ارائهشده توسط یاهو این کار میتواند موجب شود زمان دانلود بیش از 70% کاهش یابد.ازآنجاکه امروزه 90% ترافیک اینترنت از طریق مرورگرهایی که Gzip را پشتیبانی مینمایند مورداستفاده قرار میگیرد، این راهکار میتواند گزینه بسیار مناسبی برای افزایش سرعت وبسایت شما باشد.
4 فعال سازی حافظه کش مرورگر
زمانی که کاربر از یک وبسایت بازدید مینمایید، المانهای صفحهای که کاربر از آن بازدید نموده درون حافظه کش یا نهان (Catch) در هارد سیستم شما و یا در یک حافظه موقتی ذخیره میشوند؛ بنابراین دفعه بعدی که کاربر از آن صفحه بازدید میکند، مرورگر قادر است بدون آنکه درخواست HTTP به سرور ارسال نماید،صفحه را بارگذاری کند.
دفعه اولی که یک کاربر به وبسایت شما مراجعه مینماید، پیش از آنکه قادر به مشاهده صفحه شما باشد باید مستندات HTML مربوط به وبسایت شمارا دانلود نماید، استایل شیت ها، فایل های جاوا اسکریپت و تصاویر و … تعداد این اجزا ممکن است بیش از 30 نمونه باشد و دانلود کردن آنها ممکن است بیش از 2.4 ثانیه به طول بیانجامد.زمانی که یک صفحه یکبار بارگذاری میشود و اجزای مختلف آن در حافظه کش ذخیره میگردد. در بازدیدهای بعدی تعداد اجزایی که باید دانلود شوند بسیار محدود هستند.
بسیار ضروری است که شما بتوانید سرعت بارگذاری وبسایت خود را برای کاربرانی که اولین بار است به وبسایت شما مراجعه مینمایند و بهعبارتدیگر در حافظه کش آنها هیچ اطلاعاتی از صفحه شما ذخیره نشده مراجعه میکنند افزایش دهید. علاوه بر این شما باید با استفاده از حافظه کش را نیز فعالسازی نمایید تا زمان بارگذاری وبسایت شما برای کاربرانی که به وبسایت شما مراجعه مجدد داشتهاند نیز کاهش یابد.
نکته
برای منابع استاتیک باید طول عمر ماندگاری آنها در حافظه کش حداقل یک هفته باشد. برای منابع شخص ثالث یا Third Party مثل Ads یا widgets باید حداقل طول عمر کش آنها یک روز باشد.شما باید در تنظیمات خود برای تمامی منابعی که قابل ذخیرهسازی در حافظه کش هستند (مثل جاوا اسکریپتها، فایل تصاویر، فایلهای چندرسانهای، PDF ها و …) زمان Expire شدن و یا منقضی شدن آنها را حداقل یک هفته انتخاب نمایید و حتی در آینده میتوانید این زمان را به یک سال افزایش دهید؛ اما هیچگاه این زمان را بیش از یک سال تنظیم نکنید زیرا این کار با قوانین RFC در تضاد میباشد.
5 استفاده کمتر از ریسورسها
ریسورس های WYSIWYG کار شما را برای ایجاد یک صفحه وب آسان میکنند اما در برخی مواقع این ریسورس ها کدهای آشفتهای ایجاد مینمایند؛ بنابراین استفاده از این ریسورس ها میتواند موجب کاهش سرعت وبسایت شما گردد.ازآنجاییکه هر کد غیرضروری موجب افزایش سایز صفحات شما میگردد و لذا موجب کاهش سرعت بارگذاری صفحات میشود، پس ضروری است که شما کدهای اضافه را حذف نمایید تا صفحه خود را تا جای ممکن کمحجمتر کنید.
گوگل برای انجام این کار پیشنهادهایی دارد که به شرح زیر میباشند:
برای کوچکتر کردن کدهای HTML شما میتواند از افزونه کروم PageSpeed Insights استفاده نمایید تا یک ورژن عالی و بهینه از کدهای HTML شما ایجاد شود. برای کوچکتر کردن CSS ها شما میتوانید از YUI Compressor و cssmin.js استفاده نمایید. برای کوچکتر کردن جاوا اسکریپتها از Closure Compiler، JSMin و یا YUI Compressor استفاده نمایید.
6 بهینه سازی تصاویر
در رابطه با تصاویر شما باید سه چیز را در نظر بگیرید: سایز تصاویر، فرمت تصاویر و تخصیصهای SRC.
سایز تصویر :
تصاویری که سایز آنها از حد مجاز بزرگتر باشد، زمان بیشتری برای بارگذاری نیاز دارند؛ بنابراین اینکه شما تصاویر خود را تا حد ممکن کوچک کنید بسیار مهم و ضروری است. شما میتوانید از ابزارهای ویرایش تصویر بدین منظور استفاده نمایید تا بتوانید موارد زیر را بهخوبی انجام دهید:
crop: برای مثال اگر عرض صفحه شما 570px است، سایز تصاویر نیز باید همین اندازه باشد. شما نباید یک تصویر با عرض بیشتر یا کمتر را آپلود کنید و پارامتر width را بهصورت width=”570” تنظیم نمایید. این کار موجب میشود زمان بارگذاری صفحات شما بهشدت افزایش بیابد و کاربران تجربه بدی را از مراجعه به وبسایت شما کسب کنند. عمق رنگ یا Color Depth را به کمترین مقدار ممکن کاهش دهید. تصاویر کامنت ها را حذف نمایید.
فرمت تصاویر :
JPEG بهترین گزینه برای شماست. PNG نیز فرمت خوبی است اما ممکن است مرورگرهای قدیمی آن را بهخوبی پشتیبانی ننمایند. GIF ها تنها باید در گرافیکهای کوچک و ساده مورداستفاده قرار بگیرند (کمتر از 10*10 پیکسل و تعداد رنگ آنها باید کمتر از 3 رنگ باشد). از BMP ها و TIFF ها بههیچوجه استفاده نکنید.
تخصیصهای SCR :
زمانی که شما سایز و فرمت تصاویر خود را درست تعیین نمودید، باید بررسی کنید که کدهای مربوط به آنها نیز درست نوشتهشده باشند. هیچ کد تخصیص SRC تصاویر را خالی نگذارید.
در HTML کد یک تصویر شامل خط کد زیر هست:
<img src=””>
زمانی که در بین دو دابل کوتیشن هیچ منبعی ذکر نشده باشد، مرورگر یک درخواست به دایرکتوری صفحه و یا صفحه اصلی ارسال میکند، این کار میتواند موجب بالا بردن بازدید غیرضروری به وبسایت شما گردد و همچنین موجب مخدوش شدن دادههای کاربران گردد.
نکته
پیش از آپلود کردن تصاویر اندکی زمان صرف کنید تا آنها را به سایز و فرمت مناسبی تبدیل نمایید. برای تصاویر خود همیشه یک تخصیص SRC صحیح به یک URL معتبر ایجاد نمایید.برای آنکه اطمینان حاصل نمایید که تصاویر شما بهسرعت بارگذاری میگردند یک پلاگین WP Smush.it به وبسایت خود اضافه نمایید.
7 بهینه سازی CSS
CSS یا Cascade Style Sheets زبان برنامهنویسی میباشد که کنسرسیوم بینالمللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML به وجود آمده است پیشنهاد داده است. عملا این زبان برنامهنویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.CSS زبانی است که توسط آن قادر خواهید بود تا استایل طراحی صفحات وب سایتتان را یکبار تعریف و به صفحات موردنیازتان اعمال نمایید.CSS ها به دو صورت External و Inline میباشند. CSS های External یا خارجی در یک فایل خارجی قرار دارند و پیش از بارگذاری صفحه لود میشوند. CSS های Inline یا درون خطی یا CSS اینلاین مستقیماً به تگ html اعمال میشود.
CSS خارجی یا External CSS در بالای HTML شما بارگذاری خواهد شد و چیزی شبیه به کد زیر خواهد بود:
<!—Your styles –>
<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />
اما CSS اینلاین درون کدهای HTML صفحه شما قرار میگیرد.در حالت کلی یک استایل شیت خارجی یا Extenal بهتر است، زیرا باعث میشود که سایز کدهای شما کاهش بیابد.
نکته
زمانی که استایل صفحه خود را تنظیم میکنید، تنها از یک استایل شیت CSS خارجی استفاده نمایید زیرا استایل شیت های اضافی باعث افزایش درخواست های HTTP میگردند.
دو ابزاری که میتوانند به شما در این زمینه کمک کنند:
CSS Delivery Tool: به شما میگوید که وب سایت شما از چه تعداد استایل شیت های خارجی استفاده مینماید. دستوراتی که برای ترکیب فایلهای CSS خارجی مورد استفاده قرار میگیرند.
8 اولویت بیشتری برای مطالب موجود در بالای صفحه قائل شوید
شما میتوانید با استفاده از این ایده خلاقانه کاری کنید که کاربران رضایت بیشتری از مراجعه به وبسایت شما داشته باشند. برای این منظور شما میتوانید مطالب موجود در بالای صفحات خود را به سایر مطالب صفحه اولویت بدهید بدینصورت که مطالب بالای صفحه بهگونهای طراحی و تنظیم شوند که زودتر از سایر المانهای صفحه بارگذاری گردند در این صورت کاربران با دیدن اینکه بخش از مطالب موردنظرشان بارگذاری شده است سرگرم مطالعه آن خواهند شد و شما برای خود چند ثانیه دیگر زمان می خرید تا سایر موارد موجود در صفحه بارگذاری شوند.
نکته
CSSخود را به دو بخش تقسیم کنید، یک بخش کوچک Inline که برای تنظیم مطالب موجود در ابتدای صفحه مورداستفاده قرار بگیرد و یک بخش External که میتواند اندکی با تاخیر کار کند.
9 تعداد پلاگین هایی که در وب سایت خود استفاده میکنید را کاهش دهید
زیاد بودن تعداد پلاگین ها موجب کاهش سرعت وب سایت شما میگردد و علاوه بر این ممکن است پلاگین های زیاد برای وب سایت شما مشکلات امنیتی ایجاد نمایند.
نکته
پلاگین های غیر ضروری را در وب سایت خود را غیرفعال نموده و حذف نمایید، سپس پلاگین هایی که موجب کاهش سرعت وب سایت شما میشوند را حذف نمایید.
برای تشخیص آنکه کدامیک از پلاگین ها موجب کاهش سرعت وب سایت شما میگردند میتوانید برای مثال یکی از آنها را انتخاب نموده و آن را غیرفعال نمایید، سپس عملکرد سرور خود را ارزیابی نمایید تا ببنید که آیا حضور و یا عدم حضور آن پلاگین مورد نظر میتواند تاثیری در کارایی و عملکرد وبسایت شما داشته باشد. با استفاده از این روش شما میتوانید پلاگین هایی که وبسایت شما را کند می کنند را حذف نمایید.
10 کاهش ریدایرکت ها
ریدایرکت ها موجب افزایش درخواستهای HTTP میگردند و لذا موجب افزایش زمان بارگذاری میشوند؛ بنابراین بهتر است تعداد آنها را تا حد ممکن کاهش دهید.اگر وب سایت شما، یک وب سایت ریسپانسیو است، بیش از سایر وب سایت ها شما به استفاده از ریدایرکت ها نیاز دارید تا بتوانید کاربرانی را که با استفاده از تلفنهای همراه به وبسایت شما مراجعه مینمایند از ورژن اصلی وبسایت به ورژن ریسپانسیو آن هدایت نمایید.
نکته
گوگل این دو اقدام را برای حصول اطمینان از آنکه یک ریدایرکت ریسپانسیو موجب کاهش سرعت وب سایت شما نمیشود پیشنهاد می نماید:
استفاده از یک ریدایرکت HTTP که کاربرانی را که با استفاده از تلفن همراه به وبسایت مراجعه مینمایند مستقیما به URL مربوط به موبایل هدایت کند و هیچ ریدایرکت واسطهای در این میان قرار نگیرد.
سخن پایانی
پیادهسازی بعضی از نکات ذکرشده ساده است، اما بعضی از آنها به نظر اندکی مشکل میآیند مخصوصا برای افراد مبتدی بنابراین ممکن است شما برای انجام این مراحل نیاز به کمک داشته باشید. در زیر منابعی وجود دارد که شما در صورت نیاز میتوانید به آنها مراجعه نمایید:
اگر شما می خواهید خودتان تمامی مراحل را انجام دهید میتوانید در Google Developers اطلاعات مفیدی بیابید که شمارا در افزایش کارایی وب سایتتان یاری کند. اگر می خواهید مراحل را بهصورت خودکار برای شما انجام دهد میتوانید از یک سرور کاملا مدیریتشده مثل SingleHop استفاده نمایید.
سیمور ایرانی...