آموزش کاربردی افزایش سرعت سایت

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

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

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

علت دیر لود شدن سایت

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

• سنگین بودن حجم تصاویر و فایل های استفاده شده در صفحات
• بهینه نبودن فایل های کتابخانه ای مثل فایل های CSS, HTML, SCRIPT و....
• کندی سرور
• عدم استفاده از کش
• بهینه نبودن دیتا بیس
• تعداد بالای درخواست ها از سمت مرورگر به سمت سرور
• و...

آموزش بهینه سازی سرعت سایت

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

1- بهینه سازی تصاویر سایت

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

در نظر داشته باشید حتما تصاویر را قبل از بارگذاری در سایت ابتدا یا با ابزارهایی مانند فتوشاپ (save for web) بهینه کرده و یا اگر از cms های وردپرسی استفاده میکنید، میتوانید از افزونه های مختلف برای بهینه سازی تصاویر استفاده کنید.

نکته مهم دیگر برای بهینه سازی تصاویر، فرمت تصاویر هستند، گوگل و دیگر موتور های جست و جو استاندارد های مختلفی را برای فرمت های مختلف تصاویر ارائه داده اند که میتوانید با استناد به آنها از فرمت های jpg - png -webp و... استفاده کنید.

• استفاده از lazy load

اگر با ساختار لود شدن صفحات وب تا حدی آشنا باشید، میدانید که صفحات برای نمایش به کاربر، به صورت خطی باید بارگذاری و لود شوند. این نوع لود شدن تا زمانی بدون مشکل خواهد بود که تعداد رسانه مانند تصاویر، ویدئو و... در صفحات شما کم باشد. اما اگر تعداد ان فایل ها زیاد باشد آن وقت چه اتفاقی خواهد افتاد؟ کاربر باید منتظر باشد تا تمامی این فایل ها به ترتیب لود شوند. شما با استفاده از تکنیک lazy load میتوانید بارگذاری این فایل ها رو به تعویق انداخته و به مرورگر و کاربر اجازه دهید تا این فایل ها رو بعد از بارگذاری فایل های اصلی لود کرده تا کاربر بتواند هر چه سریعتر با صفحه ارتباط برقرار کرده و Time to Interactive (در انتهای این مقاله به مفهوم Time to Interactive خواهیم پرداخت) کاهش پیدا کند.

2-بهینه سازی کش مرورگر

برای آشنایی بهتر با این بحش در ابتدا توضیح مختصری در رابطه با کش ارائه خواهیم داد. بهتر است بدانید در هر بار بازدید از سایت، مرورگر شما درخواست های متعددی را به سمت سرور جهت دریافت اطلاعات مختلف ارسال خواهد کرد، و نتایج این درخواست ها را در قالب یک فایل HTML به شما نمایش خواهد داد. حال شما در نظر بگیرید که کاربر با هر بار بازدید از صفحات مختلف سایت شما، مجبور باشد تمامی فایل های سنگین اعم از تصاویر و فایل های کتابخانه ای و... را دریافت کند. شما با استفاده از کش مرورگر میتوانید قسمت های مختلفی از سایت را که معمولا هم ثابت هستند (مانند تصاویر، فایل های CSS, HTML و...) را در مرورگر کاربر ذخیره کرده و فقط قسمت های سبک و متغیر را در هر بار درخواست از سمت سرور لود کنید.

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

3- استفاده از سیستم CDN

CDN که مخفف عبارت Content Delivery Network است، به معنی یک سیستم توضیع محتوا در شبکه است. به زبان ساده تر CDN به این معنا است که سایت شما در نقاط مختلف جغرافیایی بر روی سرور های مختلف بارگذاری شده و بسته به فاصله درخواست، نزدیک ترین سرور به کاربر پاسخ خواهد داد. استفاده از سیستم CDN میتواند در کاهش سرعت لود سایت شما تاثیر به شدت مثبتی را داشته باشد.

4- فشرده سازی فایل های کتابخانه ای

تقریبا میتوان گفت که بعد از فایل های چند رسانه ای مانند تصاویر و ویدئو و...، فایل های کتابخانه ای مانند فایل های css , script بیشترین حجم دانلود صفحه را به خود اختصاص داده و باعث افزایش زمان لود خواهند شد. شما میتوانید با روش های مختلفی مانند : ادغام این فایل ها - مینیمایز کردن (حذف فواصل و سطر های خالی بین کد های این فایل ها) و یا استفاده از gzip این فایل ها را فشرده و بهینه کنید.

ترفندهای افزایش سرعت سایت

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

1- استفاده از میزبان های جانبی برای فایل های چند رسانه ای

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

2-تاخیر در بارگزاری فایل های سنگین کتابخانه ای

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

نحوه اندازه گیری سرعت سایت

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

ابزار های اندازه گیری سرعت سایت

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

1- ابزار google pagespeed

google pagespeed یکی از بزرگ ترین و کاربردی ترین ابزار تست سرعت سایت است که توسط خود گوگل راه اندازی شده و به صورت رایگان در اختیار کاربران قرار گرفته شده است. این ابزار علاوه بر بررسی دقیق سرعت لود سایت، به پردازش فاکتور های تاثیر گذار در عامل کندی سایت پرداخته و راهکار های درست بهبود سرعت سایت را به شما ارائه خواهد داد. این ابزار با ای پی ایران در دسترس نبوده و باید با فیلتر شکن وارد این سایت شوید.

2-ابزار تست سرعت سایت gtmetrix

قبل از معرفی pagespeed میتواند گفت که محبوب ترین ابزار تست سرعت سایت gtmetrix بود(البته در حال حاضر هم شاید محبوب ترین ابزار باشد). این ابزار اخیرا با دریافت سرویس از pagespeed به صورت دقیق گزارشی از سرعت بارگذاری سایت ارائه داده و راهکاری های مناسب بهبود سرعت سایت را به صورت جزئی به شما ارائه خواهد داد.

بهترین افزونه های وردپرسی افزایش سرعت سایت

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

1- افزونه بهبود سرعت سایت wp-Rocket

یکی از بهترین افزونه های معرفی شده وردپرس برای کاهش زمان لود سایت، افزونه wp-Rocket است، این افزونه به صورت اختصاصی برای این کار پیاده سازی و معرفی شده است و شما با استفاده از این افزونه میتوانید به راحتی، مواردی از قبیل : Lazy load کردن تصاویر، کش کردن فایل ها، بهینه سازی فایل های کتابخانه ای و... را برای افزایش سرعت سایت بهینه کنید.

2- افزونه wp-optimize

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

3-افزونه وردپرسی w3 total cache

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

Time to Interactive چیست و چگونه میتوان آن را بهینه کرد