افزایش سرعت سایت و 27 راهکار فنی

افزایش سرعت سایت، یکی از مهم‌ترین مواردی است که در هنگام مدیریت یک سایت باید به آن توجه کنیم. اگر سرعت سایت ما کم باشد، کاربران از آن ناراضی خواهند بود. این نارضایتی به صورت مستقیم موجب کاهش مخاطبان و فروش ما می‌شود. تأثیر غیرمستقیم آن، کاهش رتبه در نتایج موتورهای جستجو است. پس اگر سایت ما سرعت مطلوبی نداشته باشد، تلاش‌های جانبی کسب و کارمان، نظیر بازاریابی و تبلیغات، نیز نتیجه مطلوبی نخواهند داد! در این مقاله به بررسی و آموزش جامع افزایش سرعت سایت خواهیم پرداخت.

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

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

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

چرا افزایش سرعت سایت مهم است ؟

ابتدایی‌ترین دلیل، همان دلیلی است که پیش‌تر به آن اشاره کردیم؛ یعنی بهبود رضایت کاربران. اما بگذارید از دید دیگری هم به این قضیه نگاه کنیم.

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

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

به طول کلی، هر ثانیه تأخیر در بارگذاری سایت، می‌تواند موجب موارد زیر شود:

• کاهش حدود 10% تا 15 درصدی تعداد بازدیدکنندگان
• کاهش 15 الی 20 درصدی رضایت کاربران در استفاده از سایت
• حدود 5 الی 10 درصد کاهش نرخ تبدیل در هنگام خرید یا اقدام به عمل در سایت

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

از آن جا که هدف موتورهای جستجو، رسیدن به بهترین نتیجه است و نتیجه نیز ارتباط مستقیمی با رضایت کاربران از سایت دارد، سرعت بارگذاری سایت به یکی از مهم‌ترین فاکتورهای بهینه‌سازی در موتورهای جستجو (یا همان سئو SEO) تبدیل شده است.

زمان بهینه لود سایت چقدر است ؟

هر چه سرعت سایت شما بیشتر باشد، برایتان بهتر است! عدد دقیقی برای بهترین بودن سرعت سایت نمی‌تواند گفت! اما برخی متخصصین، سه رنج زمانی زیر را برای دسته بندی سرعت سایت در نظر می‌گیرند.

• کمتر از 1 ثانیه: عالی
• بین 1 تا 3 ثانیه: خوب
• 3 تا 7 ثانیه: متوسط
• بیشتر از 7 ثانیه: ضعیف

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

بهترین زمان بارگذاری سایت در ایران

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

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

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

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

 

راهکارهای فنی و برنامه‌نویسی افزایش سرعت سایت

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

 

1. کاهش تعداد درخواست‌های HTTP

طبق گزارش تحلیلی یاهو درباره سرعت سایت، حدود 80% از زمان بارگذاری سایت، صرف دانلود فایل‌های مختلف تشکیل دهنده سایت می‌شود؛ فایل‌هایی نظیر تصاویر، فایل‌های CSS و جاوا اسکریپت، فونت‌ها و …

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

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

بنابراین سعی کنید با ترکیب کردن فایل‌های CSS و جاوا اسکریپت، تعداد درخواست‌های HTTP را به حداقل ممکن برسانید.

2. کاهش تعداد پردازش‌ها

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

3. بهینه کردن پردازش‌های سایت

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

4. ترکیب فایل‌ها برای افزایش سرعت سایت

همان‌طور که گفته شد، بهتر است تعداد درخواست‌های HTTP را به حداقل برسانیم. فایل‌های ظاهر سایت (CSS) و جاوا اسکریپت (JS) بیشترین فایل‌هایی هستند که در یک سایت بارگذاری می‌شوند. خبر خوب اینکه می‌توان این فایل‌ها را با یکدیگر ترکیب کرد و به جای بارگذاری چند فایل، یک فایل را به صورت یکجا برای کاربر فرستاد. یکی از ساده‌ترین گام‌ها برای افزایش سرعت سایت همین مسئله است.

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

فایل‌های جاوا اسکریپت را نیز می‌توان به همین شکل با هم ترکیب کرد.

پیشنهاد: از import در CSS استفاده نکنید!

گاهی اوقات برای بارگذاری فایل استایل در یک استایل دیگر، از @import استفاده می‌شود. این مورد خود باعث بارگذاری فایلی دیگر شده  و نیز در برخی مرورگرهای قدیمی به درستی اجرا نمی‌شود. سعی کنید به جای استفاده از کلیدواژه @import در فایل CSS، استایل مورد نظر را قرار دهید. به این صورت، علاوه بر جلوگیری از بروز مشکل، فایل‌های متفاوت را نیز ترکیب کرده‌اید.

 

5. فشرده سازی فایل‌های سایت (CSS و JS)

ساده‌ترین راه افزایش سرعت سایت، فشرده سازی فایل‌های CSS و JS است. اگر این فایل‌ها را باز کرده باشید، با ظاهری آراسته و مرتب مواجه خواهید شد. این ساختار و نوع نوشتن، باعث درک بهتر انسان و افزایش توانایی او در ویرایش آن‌ها می‌شود. اما در هنگام بارگذاری یک سایت، نیازی به خوانا بودن این‌گونه فایل‌ها نداریم!

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

گاهی با انجام این کار، یک فایل CSS بیش از 50% کاهش حجم خواهد داشت. به کمک این روش، حجم کل صفحه سایت شما کاهش پیدا کرده و در مجموع موجب افزایش سرعت سایت شما خواهد شد.

دو سایت مناسب که من اکثراً از آن‌ها استفاده می‌کنم:

• سایت Minifier
• سایت Minify Code با پشتیبانی فرمت HTML

6. فشرده سازی کد HTML ارسالی به کاربر

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

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

پس همواره سعی کنید پس از ایجاد صفحه HTML (در سایت‌های پویا و داینامیک) اول آن را فشرده کرده و سپس برای کاربر ارسال نمایید.

7. استفاده از متد Keep-Alive برای افزایش سرعت سایت

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

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

متد Keep-Alive به همین منظور در فضای وب ایجاد شده است. به کمک این قابلیت دیگر نیازی به برقراری ارتباط برای تک تک فایل‌ها نخواهد بود. به کمک این متد، سرور در پیام اول درخواست مرورگر را دریافت کرده و تمام اطلاعات را به صورت هم‌زمان برای کاربر ارسال می‌کند. با پیاده‌سازی این فرآیند، سرعت انتقال اطلاعات بهبود زیادی پیدا خواهد کرد.

فعال کردن Keep-Alive در سایت

برای فعال‌سازی این قابلیت، دو روش وجود دارد. یکی به کمک تنظیمات وب سرور سایت (که در هاست‌های اشتراکی به آن دسترسی نداریم) و دیگری قرار دادن کد زیر در فایل .htaccess در ریشه هاست.

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

8. فعالسازی کش فایل در مرورگر (ذخیره‌سازی فایل)

قابلیت کش یا Caching به فرآیند ذخیره‌سازی فایل‌های مختلف از جمله اسناد CSS و JavaScript و تصاویر و فونت‌ها در مرورگر کاربر گفته می‌شود. فرض کنید شما برای اولین بار سایت سبز دانش را در مرورگر خود باز کرده‌اید. این سایت حاوی فایل‌های مختلفی است. فرض کنید طبق تنظیمات، اجازه کش کردن فونت و تصاویر این سایت به مرورگر شما داده شده است.

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

چرا از کش فایل در سایت استفاده کنیم ؟

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

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

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

 

9. قابلیت Expire Headers

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

مرورگر کاربر تا ده روز پس از اولین دانلود آن فایل، آن را نگه داشته و هر بار که به آن نیاز پیدا می‌کند، آن فایل از داخل کامپیوتر خوانده شده و نمایش داده می‌شود. پس از 10 روز، اگر دوباره به فایل نیاز داشته باشیم، مرورگر مجبور است فایل را مجدداً دانلود کرده و مطابق با دستور کش و Expire Header با آن برخورد کند.

برای فعالسازی قابلیت Expire Header در سیستم‌های مدیریت محتوای مختلف، افزونه‌هایی وجود دارد. اما اگر نمی‌خواهید از افزونه استفاده کنید، با قرار دادن کد زیر در فایل .htaccess این قابلیت را برای انواع فرمت‌های فایل تعریف کنید.

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

10. کاهش فراخوانی از دیتابیس

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

تأثیر بهینه‌سازی دیتابیس سایت در سرعت لود سایت

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

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

11. قرار دادن فایل جاوا اسکریپت در فوتر

همان‌طور که می‌دانید، فرآیند بارگذاری سایت به صورت ترتیبی صورت می‌گیرد. هنگام فراخوانی فایل‌های موجود در یک صفحه (به کمک درخواست HTTP)، باید منتظر دانلود تک تک فایل‌ها بمانیم. معمولاً فایل‌های JavaScript نسبت به فایل‌های استایل (CSS) حجم بیشتری داشته و اکثراً برای نمایش محتوای صفحه ضروری نیستند.

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

برعکس، فایل‌های جاوا اسکریپت اغلب برای زیباسازی یا انجام کارهایی خاص استفاده می‌شوند که شاید در ظاهر اولیه سایت هیچ نقشی نداشته باشند. بنابراین اگر فایل‌های JS پس از نمایش محتوای صفحه (محتوای موجود در تگ body صفحه html) بارگذاری شوند؛ در اکثر مواقع هیچ مشکلی به وجود نخواهد آورد.

سعی کنید فایل‌های جاوا اسکریپت را در انتهای صفحه قرار دهید. بهترین مکان برای قرار دادن این فایل‌ها، قبل از تگ </body> در صفحه html است.

12. بارگذاری تنبل (Lazy Load) و افزایش سرعت سایت

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

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

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

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

اگر در حال برنامه نویسی یک قالب یا سایت هستید هم می‌توانید از کتابخانه‌های جاوا اسکریپت که به این منظور و با اسم Lazy Load وجود دارند استفاده کنید.

13. اهمیت کد نویسی بهینه در افزایش سرعت سایت

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

14. ابعاد تصویر در صفحه را مشخص کنید

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

بهتر است به جای اینکه بررسی اندازه تصویر را به مرورگر واگذار کنیم، خودمان از قبل و به وسیله کدهای HTML آن را مشخص کنیم.

قطعه کد زیر، یک تصویر را با مشخص کردن ابعاد آن نمایش خواهد داد.

<img src="https://sabzdanesh.com/Uploads/2020/05/How-Crawlers-Work.png"
                                    alt="نحوه کار ربات های موتورهای جستجو"
                                    width="400" height="272">

15. استفاده از آخرین نسخه زبان برنامه نویسی

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

چه سایت شما با زبان برنامه نویسی PHP نوشته شده باشد، چه به ASP یا پایتون، در هر صورت سعی کنید آخرین نسخه کامپایلر آن را برای اجرای سایت خود به کار ببرید.

16. ارسال فایل‌ها به صورت فشرده (به کمک فناوری gzip)

همه ما با فرایند فشرده سازی فایل‌ها (نظیر zip یا rar) آشنایی داریم. به کمک این فناوری‌ها خواهیم نوانست در هنگام جابجایی فایل‌ها حجم کمتری را منتقل کرده و سرعت بیشتری را تجربه کنیم. این فناوری در فضای وب نیز به کمک ما آماده تا به کمک فشرده سازی gzip باعث افزایش سرعت سایت شود.

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

به وسیله کد زیر نیز خواهید توانست این ویژگی را بر روی سایت خود فعال کنید. این کد را درون فایل .htaccess قرار داده و از قابلیت فشرده سازی gzip لذت ببرید.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

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

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

17. استفاده از تکنیک CSS Sprite

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

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

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

18. تنظیم CHARSET در صفحه سایت

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

مجموعه‌های کاراکتر (Character Set) مشخص می‌کنند از چه زبان و چه یونی‌کدی برای محتوای صفحه استفاده می‌کنید. با قرار دادن کد زیر در ابتدای تگ head سایت خود، به راحتی آن را تعریف کنید.

<meta charset="UTF-8">

همان‌طور که می‌دانید UTF-8 یونیکد مربوط به زبان فارسی و یکی از جامع‌ترین یونیکدهای تعریف شده در جهان است. تمام سایت‌های فارسی از این یونیکد پیروی می‌کنند. برای سایت انگلیسی هم می‌توانید همین را تعریف کنید.

19. کاهش زمان پاسخ سرور

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

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

20. کاهش زمان دریافت بایت اولیه (First Byte)

یک اصطلاح در بحث افزایش سرعت سایت داریم که به آن زمان دریافت بایت اولیه یا Time to First Byte نیز گفته می‌شود. این زمان به زمانی گفته می‌شود که مروگر درخواست خود را به سایت فرستاده و منتظر دریافت داده‌هاست. یعنی از هنگام ارسال درخواست تا زمانی که اولین بایت از کل اطلاعات را دریافت کند.

این زمان شامل سه مرحله اصلی است.

• جستجوی DNS
• پردازش سرور
• ارسال پاسخ

مجموع تمام این زمان‌ها در سیستم‌های مختلف معمولاً با TTFB یا Waiting شناخته می‌شود. هر چه مدت زمان این پردازش‌ها کاهش پیدا کند، انتظار اولیه مروگر کاهش پیدا کرده و موجب افزایش سرعت سایت می‌شود.

21. تأثیر استفاده از هاست با کیفیت در افزایش سرعت سایت

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

همواره سعی کنید هاست سایت خود را از شرکت‌های معتبر خریداری کنید. برخی شرکت‌ها کانفیگ مناسبی ندارند و یا از یک سرور بیش از ظرفیتش استفاده می‌کنند که در نتیجه منجر به کاهش کیفیت کلی هاست خواهد شد.

 

راهکارهای عملی افزایش سرعت سایت

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

22. استفاده از تصاویر بهینه

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

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

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

بهینه سازی تصاویر چگونه به افزایش سرعت سایت کمک می‌کند ؟

با بهینه سازی حجم تصاویر، به نوعی آن‌ها را فشرده می‌کنیم. این فشرده سازی از کیفیت تصویر چیز زیادی کم نمی‌کند اما موجب کاهش چشمگیر حجم آن خواهد شد. در برخی موارد حتی تا 90% کاهش حجم را شاهد بوده‌ایم!

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

برای فشرده سازی تصاویر می‌توانید از قابلیت Save for Web در نرم افزار فتوشاپ یا ابزارهای فشرده‌ساز تصویر آنلاین (مثل سایت tinyjpg) کمک بگیرید.

23. استفاده از CDN (شبکه توزیع محتوا)

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

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

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

با ظهور فناوری CDN تحولی جدید و نسبتاً بزرگ در انتقال اطلاعات سایت‌ها ایجاد شد که به افزایش سرعت سایت کمک بسیار زیادی می‌کند.

24. کاهش خطاهای 404 و افزایش سرعت سایت

گاهی اوقات ممکن است فایل‌هایی که درون سایتمان استفاده کرده‌ایم دچار مشکل شوند. یا با تغییر نام آن‌ها به صورت ناخواسته موجب ایجاد خطای 404 هنگام درخواست آن‌ها شویم.

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

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

سعی کنید فایل‌های 404 خود را با ابزارها و ترفندهای مختلف پیدا کرده و با جلوگیری از خطای 404، باعث افزایش سرعت سایت خود شوید.

25. جلوگیری از سرقت پهنای باند سایت توسط دیگران

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

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

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

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

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

افزایش سرعت سایت با فعال‌سازی قابلیت Hotlink Protection

قابلیتی به نام Hotlink Protection در سرویس‌های هاستینگ وجود دارد که به کمک آن خواهید توانست جلوی استفاده غیر مجاز از پهنای باند خود را بگیرید.

فعال‌سازی این ویژگی در کنترل پنل‌های مختلف متفاوت است ولی با یک جستجوی خیلی ساده یا درخواست راهنمایی از مدیر سرور خود، خواهید توانست تنظیمات را اعمال کنید.

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

RewriteEngine On
 RewriteCond %{HTTP_REFERER} !^http://(www.)?DOMAIN.COM/ [NC]
 RewriteCond %{HTTP_REFERER} !^$
 RewriteRule .(jpeg|gif|png)$ - [F]

به جای DOMAIN.COM آدرس سایت خود را قرار دهید. اگر لازم است به چند سایت خاص اجازه استفاده از پهنای باند را بدهید، کافی است خط دوم را کپی کرده و آدرس سایت مورد نظر را نیز تعریف کنید.

26. عدم آپلود فیلم در هاست سایت

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

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

 

جمع بندی: روش‌های افزایش سرعت سایت

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

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

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

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

روش دیگری و بسیار مهمی که معرفی شد، ترکیب و فشرده سازی فایل‌های ثابت (static) سایت بود. فایل‌های CSS و JavaScript را می‌توان با هم ترکیب و فشرده کرد تا علاوه بر کاهش حجم فایل‌ها، تعداد درخواست‌های HTTP را نیز کاهش داد.

استفاده از ابزارهای کش و کار با هدرهای Expire از دیگر روش‌هایی بود که برای افزایش سرعت سایت مطرح کرده و بررسی کردیم.

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