هر بار که در نوار آدرس مرورگر خود آدرس یک سایت را مینویسید (مانند palette.agency)، یا روی هر لینکی در دنیای وب کلیک میکنید، در واقع شما در حال تجربه سرعت بارگزاری صفحه هستید.
در ایده آل ترین حالت این اتفاق در یک چشم بر هم زدن رخ میدهد و گاهی دیگر آن قدر کند پیش میرود که از حوصله ما خارج شده و اصلا یادمان میرود که با آن سایت چه کار داشتیم و اصلا چرا بر روی فلان لینک کلیک کرده ایم.
عملکرد صفحه در واقع یک موضوع نسبتاً پیچیده است. اکثر مردم درک میکنند که هرچه اندازه صفحه بزرگتر باشد، زمان بیشتری برای بارگذاری نیاز دارد، اما مسئله به همینجا ختم نمی‌شود.
پس با من همقدم شوید تا چهار نکته برای بهینه سازی سرعت سایت را به شما بیاموزم.سرعت بارگذاری صفحه چیست؟
پس به طور خلاصه فهمیدیم که، سرعت بارگذاری صفحه، مدت زمانی است که یک صفحه به طور متوسط از لحظه وارد کردن URL در مرورگر تا زمانی که صفحه وب به طور کامل ظاهر میشود، به طول می‌انجامد.
همچنین تا اینجا گفتیم که سرعت بارگذاری صفحه، تأثیر به سزایی بر تجربه کاربری دارد. چرا که مردم برای یافتن سریع سوالاتشان به نت مراجعه میکنند. پس اگر محتوای شما زمان زیادی برای بارگذاری بگیرد، حالا گیرم که بهترین و ناب ترین پاسخ به سوال کاربر در آن نهفته باشد، نرخ bounce rate یا (ترک بازدید کنندگان) سایت شما بالا رفته و در این صورت فرصتی عالی در اختیار رقیبتان قرار میگیرد!
قاعده کلی این است که صفحه شما باید در کمتر از سه ثانیه بارگذاری شود؛ در واقع لود در دو ثانیه ایده‌آل است، اما اگر وبسایت شما بیش از سه ثانیه زمان برای بارگذاری نیاز دارد، باید دلیل قانع کننده‌ای برای آن داشته باشید و یا به دنبال رفع مشکلات موجود باشید.
ممکن است بپرسید که منظورت از داشتن دلیل قانع کننده‌ای برای بالا بودن لود سایت چیست؟
برای مثال، برخی از سایت های تجربی که هدف آنها ارائه یک تجربه غنی است، ممکن است زمان بیشتری برای بارگذاری بگیرند، که در این صورت معمولاً از یک نشانگر بارگذاری (load spinner) استفاده میکنند تا بازدیدکنندگان را از پیشرفت بارگذاری صفحه مطلع کنند.
علاوه بر این، سرعت بارگذاری صفحه موردی است که گوگل در رتبه بندی سایتها آن را لحاظ میکند، بنابراین باید در استراتژی سئو شما در نظر گرفته شود.
معمولا در پروژه ها سرعت بارگزاری سایت، در اولویت اول قرار نمیگیرد لذا توجه به UX برای دستیابی به بالاترین سطح رضایت از تجربه کاربر در دسترسی به محتوا آن هم به شکلی که کاربران دوست دارند بسیار اهمیت دارد.
بنابراین، پس از ایجاد یک رابط کاربر که تمامی نیازهای محتوایی کاربران شما را برآورده میکند، می‌توان با خیال راحت به بهینه سازی سرعت بارگذاری صفحه پرداخت.
در ادامه ۴ نکته برای بهینه سازی سرعت سایت را با هم بررسی میکنیم. هرچند که پیشتر اشاره کردم که موضوع بهینه سازی سذعت لود سایت عموما در اولویت اجرا قرار نمیگیرد اما من معتقدم که این نکات را بهتر است قبل از آغاز به توسعه وبسایت بدانید تا انتخاب بهتری برای زیرساخت داشته باشید.
4 نکته برای بهینه سازی سرعت صفحه
در بیان 4 نکته برای بهینه سازی سرعت صفحات سایت سعی کردم موارد را با مثال های عملی آموزش دهم تا یادگیری برایتان ساده تر شود.
۱. بهینه سازی تصاویر و ویدیو ها
برای حل این مشکل، پیشنهاد می‌کنم هر تصویری که در سایت قرار می‌دهید را از ابزار TinyPNG عبور دهید. بر اساس تجربه و آزمایش‌های من، این بهترین الگوریتم فشرده‌سازی تصویر است. اما در کل برای بهینه سازی تصویر و ویدیو مواردی که در ادامه بیان کرده ام را به خوبی به یاد بسپارید:
- استفاده از فرمت‌های بهینه
- تصاویر: فرمت‌هایی مثل WebP، JPEGو PNG بسته به نوع تصویر مناسب هستند. WebP به دلیل فشرده‌سازی بهتر بدون افت کیفیت، گزینه مناسبی است.
- ویدیوها: فرمت‌های فشرده مثل MP4، WebM یا OGG برای ویدیوهای وب بهینه‌تر هستند.
- فشرده‌سازی تصاویر و ویدیوها
- فشرده‌سازی تصاویر: از ابزارهایی مثل TinyPNG، TinyJPG یا ImageOptim برای کاهش حجم تصاویر بدون افت کیفیت قابل توجه استفاده کنید.
- فشرده‌سازی ویدیوها: از ابزارهایی مانند HandBrake یا Adobe Media Encoder برای کاهش حجم ویدیوها استفاده کنید. همچنین می‌توانید کیفیت ویدیو را برای دستگاه‌های مختلف تنظیم کنید.
- استفاده از ابزارهای بهینه‌سازی خودکار
در سیستم‌های مدیریت محتوا مانند وردپرس، می‌توانید از پلاگین‌هایی مثل Smush یا ShortPixel برای بهینه‌سازی خودکار تصاویر و ویدیوها استفاده کنید. این پلاگین‌ها حجم تصاویر را بدون تغییر کیفیت کاهش می‌دهند.
- لود تنبل (Lazy Loading)
تکنیک لود تنبل تصاویر و ویدیوها را فقط زمانی بارگذاری میکند که کاربر به آنها نزدیک شود. این روش میتواند سرعت بارگذاری اولیه صفحه را بهبود بخشد.
۲. هاستینگ (زمان پاسخ سرور / شبکه تحویل محتوا (CDN) / توان عملیاتی (Throughput))
مستقل از کد یا منابع موجود در یک صفحه سایت، انتخاب یک سرویس هاست تأثیر به سزایی بر سرعت بارگذاری صفحه دارد. به زبان دیگر، زیرساختهای هاستینگ یک وبسایت در سرعت بارگذاری آن، تأثیر به سزایی دارند.
برای درک بهتر یک مثال بزنم:
همونطوری که یک کامپیوتر قدیمی برای راه اندازی به ۳ دقیقه زمان نیاز داره اما یه کامپیوتر جدید با تکنولوژی روز، تو یک دقیقه روشن و آماده استفاده میشه. کوتاه کنم جمله رو، هاست انقدر مهمه که اگه یک سایت را در دو هاست متفاوت تست کنید، دو سرعت لود متفاوت رو تجربه خواهید کرد.
برای درک بهتر میخوام شما رو با مفهوم زمان پاسخ سرور آشنا کنم.
- زمان پاسخ سرور یا Server response
زمان پاسخ سرور یا Server response مدت زمانی است که بین درخواست (فشردن کلید “enter” بعد از وارد کردن URL در نوار آدرس) و زمانی که سرور اولین بایت داده را ارسال میکند، وجود دارد.
فرض کنید که شما آدرس یک وبسایت را در مرورگر خود وارد میکنید و دکمه “Enter” را می‌زنید. مرورگر شما درخواست HTTP را به سرور وبسایت ارسال میکند. زمان پاسخ سرور از لحظه‌ای که این درخواست به سرور می‌رسد تا زمانی که سرور شروع به ارسال پاسخ به مرورگر میکند، اندازه‌گیری میشود.
پس به زبان ساده اگر بعد از وارد کردن آدرس سایت در نوار آدرس مرورگر و فشردن دکمه اینتر به یک وبسایت می‌روید اما مرورگر کاملاً خالی است — یعنی هیچ‌چیز بارگذاری نشده است و این نشان دهنده زمان پاسخ ضعیف سرور است.
در مرحله بعد، وقتی صفحه شروع به ظاهر شدن میکند، شبکه تحویل محتوا (CDN) و توان عملیاتی (Throughput) وارد عمل می‌شوند.
- شبکه تحویل محتوا (CDN) چیست؟
شبکه تحویل محتوا (CDN) به این معناست که منابع وب سایت شما (مانند تصاویر، اسکریپت‌ها و غیره) از سرور میزبان از طریق نقاط مسیریابی در سراسر جهان به کاربر نهایی ارسال می‌شوند.
به زبان دیگر (CDN) یک سیستم سرورهای پراکنده در نقاط مختلف دنیا است که محتوا سایت شما را با سرعت بیشتر و کارآمدتری به کاربرانتان نشان میدهد.
فرض کنید سایتی در ایران دارید و کاربرانی از چین، ژاپن و آلمان و … به این سایت دسترسی دارند. اگر این کاربران هر بار برای دریافت محتوا به سرور اصلی در ایران متصل شوند، ممکن است سرعت بارگذاری سایت کند شود.
برای رفع این مشکل، با استفاده از CDN، محتواهای سایت شما (مثل تصاویر، ویدیوها و فایل‌های بزرگ) در سرورهای مختلفی در سراسر دنیا کپی می‌شوند. وقتی کاربر چینی به سایت تو مراجعه میکند، به نزدیک‌ترین سرور متصل میشود و محتوا را از آنجا دریافت میکند. این باعث میشود سرعت بارگذاری سایت بسیار سریعتر شود.
- توان عملیاتی (Throughput) چیست؟
سومین عنصر توان عملیاتی (Throughput) است که تضمین میکند پس از ایجاد اتصال، پهنای باند به اندازه کافی گسترده باقی بماند تا داده‌ها به طور یکنواخت و با سرعت ثابت دریافت شوند. اگر این اتفاق نیفتد، ممکن است صفحه به سرعت شروع به بارگذاری کند اما در ادامه به کندی تکمیل شود.
به زبان ساده، Throughput میزان داده‌ای است که در یک بازه زمانی معین از طریق یک شبکه یا سیستم منتقل میشود. درواقع، توان عملیاتی به ما می‌گوید که یک سیستم چقدر سریع میتواند داده‌ها را پردازش و منتقل کند. تصور کنید یک رستوران دارید که میتواند در هر ساعت ۱۰۰ غذای مختلف سرو کند. این یعنی توان عملیاتی رستوران شما ۱۰۰ غذا در ساعت است. هرچه توان عملیاتی بیشتر باشد، رستوران میتواند تعداد بیشتری غذا در هر ساعت سرو کند و مشتریان راضیتر خواهند بود.
در دنیای وب، توان عملیاتی به مقدار داده‌ای اشاره دارد که سرور میتواند در هر ثانیه پردازش و ارسال کند. اگر سروری توان عملیاتی بالایی داشته باشد، میتواند تعداد بیشتری درخواست کاربر را در زمان کوتاه تری پاسخ دهد. این به معنای بارگذاری سریعتر صفحات وب است.
۳. درخواستهای HTTP
به زبان ساده، درخواستهای پروتکل انتقال ابرمتن (HTTP) همان چیزی هستند که وقتی در مرورگر اینترنت خودتان یک آدرس سایت را وارد میکنید، بین مرورگر (مثلاً Chrome یا Firefox) و سرور وب سایت رد و بدل میشود. این درخواست‌ها و پاسخ‌ها باعث می‌شوند تا صفحه وب به شما نشان داده شود.
بذارید یه مثال بزنم:
شما آدرس یک وب سایت، مثلاً www.palette.agency، را در مرورگر وارد میکنید و کلید “Enter” را می‌زنید.
مرورگر شما یک درخواست HTTP به سرور وب سایت palette.agency ارسال میکند که تا اطلاعات و عناصر صفحه را بگیرد.
سرور وسایت این درخواست را دریافت میکند، اطلاعات لازم را پیدا میکند و به شکل یک پاسخ HTTP به مرورگر شما برمی‌گرداند که شامل کدها و داده های لازم برای نمایش صفحه است.
مرورگر شما این پاسخ را میگیرد و صفحه وب را بر روی نمایشگر شما نشان میدهد.
به عبارتی ساده، درخواست HTTP همانند این است که شما از یک مسئول کتابخانه می‌خواهید کتاب خاصی را برای شما بیاورد و کتابدار این کار را انجام میدهد.
کاری که مرورگر و سرور برای ما انجام می‌دهند، شبیه به رفت و آمد مداوم برای آوردن و تحویل دادن اطلاعات است.
حالا کمی تخصصی به موضوع نگاه کنیم:
HTTP Request شامل تعدادی منابع جداگانه است که یک سایت برای بارگذاری نیاز دارد. همانطور که میدانیم، یک صفحه تنها یک فایل نیست. هر تصویر، اسکریپت، فایل استایل (stylesheet) و غیره، فایل جداگانه‌ای دارد، بنابراین درخواست مستقلی به سرور وب ارسال میکند. ممکن است برای بارگذاری تمامی این عناصر بیش از 100 درخواست داشته باشد.
یک صفحه طولانی با ماژولهای زیاد معمولاً به درخواستهای بیشتری نسبت به یک صفحه کوتاه و ساده نیاز دارد. اکثر مرورگرها محدودیت هایی برای تعداد درخواستهای همزمان دارند (مثلاً حدود 6 تا 8 درخواست همزمان در هر دامنه.
روشهای اصلی برای کاهش این تعداد عبارتند از:
- ترکیب فایل‌های جاوااسکریپت و CSS تا حد ممکن
- بررسی تعداد ماژول‌ها و تصاویر مورد نیاز در یک صفحه
- بررسی دقیق اینکه چه اسکریپت‌های بازاریابی شخص ثالث (ردیابی تبلیغات، تحلیل‌ها، چت، نقشه حرارتی و غیره) واقعاً مورد نیاز هستند.
۴. ترتیب بارگذاری یا Load Sequence
ترتیب بارگذاری به ترتیب درخواستهای HTTP اشاره دارد. این ترتیب بر اساس ترتیب کد شما در مدل شیء سند (DOM) تعیین میشود که در مورد وبسایت‌ها معمولاً HTML مارک‌آپ است.
Document Object Model (DOM) چیست؟
تصور کن یک کتاب با فصل‌ها و زیرفصل‌ها داری. هر فصل میتواند شامل چند زیرمبحث باشد و این زیرمبحث‌ها می‌توانند متن، تصاویر، لینک‌ها و موارد دیگر را شامل شوند. DOM دقیقاً همین کار را برای صفحات وب انجام میدهد: کل صفحه وب رو به یک ساختار درختی تبدیل می‌کنه که شامل عناصر HTML مثل <div>، <p>، <img> و غیره است.
در واقع، DOM به مرورگر کمک می‌کنه که بفهمد کدهای HTML و CSS چطور باید به کاربر نمایش داده شوند و چطور میشود با این عناصر تعامل داشت. مثلاً وقتی روی یک دکمه کلیک میکنید، مرورگر از طریق DOM می‌فهمد که چه اتفاقی باید بیفتد.
- لود استایل شیت های CSS.
بارگذاری CSS در ابتدای مراحل لود شدن سایت مهم است، چون CSS مسئول شکل دهی و استایل دهی به تمام عناصر صفحات وب است. اگر CSS ابتدا لود نشود، صفحه وب به صورت خام و بدون استایل نمایش داده میشود که تجربه کاربری خیلی ضعیفی خواهد داشت. لود سایت با CSS ممکن است فرآیند بارگذاری را کمی کندتر کند، اما بارگذاری نکردن CSS در ابتدا تأثیر منفی بر تجربه کاربری خواهد داشت.
- بعد از لود فایل های CSS، نوبت به لود بقیه HTML و سپس بارگزاری محتوا صورت گرفته و در نهایت فایل های جاوااسکریپت را بارگذاری کنید.
برای بهینه‌سازی سرعت بارگذاری، می‌توانید بارگذاری برخی از عناصر مانند تصاویر را به تعویق بیندازید، به طوری که تا زمانی که کاربر به آنها نیاز نداشته باشد به طور کامل بارگذاری نشوند. احتمالاً این را زمانی متوجه شده‌ا ید که یک مقاله طولانی را می‌خوانید و تصاویر ابتدا تار ظاهر می‌شوند و سپس وقتی به وضوح در خط دید شما قرار می‌گیرند، واضح می‌شوند.
علاوه بر این، جاوااسکریپت خود را در footer قرار دهید. جاوااسکریپت معمولاً روی سایر عناصر صفحه تأثیر می‌گذارد، بنابراین سایر محتوا باید ابتدا بارگذاری شود. همچنین اگر جاوااسکریپت شما در بخش‌های بالای صفحه قرار گیرد، مشکلاتی به نام مسدود کردن رندر (render blocking) ایجاد میکند، یعنی مرورگر باید ابتدا جاوااسکریپت را به طور کامل بارگذاری کند تا بتواند به بقیه سند ادامه دهد.
نتیجه‌گیری
به عنوان یک صاحب سایت یا فردی که مسئولیت تیم SEO را بر عهده دارد، علاوه بر نگرانی‌های مربوط به محتوای سایت و طراحی و ارائه استراتژی برای تبدیل بازدیدکننده به مشتری، باید به بهبود سرعت بارگذاری سایت نیز توجه کنید.
طبق آمار Kissmetrics، تقریباً ۴۷٪ از کاربران سایتها انتظار دارند که یک سایت در دو ثانیه یا کمتر بارگذاری شود و آمار شگفت انگیز ۴۰٪ از کاربران در صورتی که بارگذاری بیش از سه ثانیه طول بکشد، از سایت خارج می‌شوند.
با این حال، شما باید هدف خود را برای زمان بارگذاری صفحه دو ثانیه یا کمتر قرار دهید، زیرا سرعت بارگذاری صفحه بر تجربه کاربری و رتبه‌بندی SEO تأثیر می‌گذارد (به‌ویژه در موبایل که معمولاً پهنای باند کمتری دارد).
