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

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

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

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

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

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

ابزار PageSpeed Insights

PageSpeed Insights صفحه‌ی نمره‌دهی سرعت گوگل، ابزاری اساسی برای ارزیابی سرعت و تجربه کاربری سایت است. این ابزار به نام PSI، بر اساس استانداردهای گوگل، معیارهایی برای سنجش عملکرد وبسایت ارائه می‌دهد که همان استانداردهایی هستند که گوگل برای رتبه‌بندی وبسایت‌ها به کار می‌برد.

مانند اثر وزن‌دهی درس‌های مدرسه بر نمره معدل، هریک از این معیارها وزن و اهمیت خاصی دارند. به عنوان مثال، تأثیر یک معیار با درصد مشخصی در نهایت باعث تشکیل نمره‌ای بین 1 تا 100 می‌شود که نشان‌دهنده‌ی سرعت و عملکرد سایت است. این نمره برای دو نوع دستگاه، یعنی موبایل و رایانه شخصی، جداگانه گزارش می‌شود و هرچه این نمره بالاتر باشد، بهترین تجربه کاربری را برای وبسایت ارائه می‌دهد.

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

ابزار GTmetrix

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

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

1. Performance (عملکرد): اطلاعات مربوط به بهینه‌سازی‌های مختلف و سرعت بارگذاری صفحه را نشان می‌دهد. این بخش شامل امتیازها و ارزیابی‌هایی است که نشان دهنده عملکرد کلی وب‌سایت، فشرده‌سازی تصاویر و فایل‌ها، بهینه‌سازی CSS و JavaScript و سایر عوامل مرتبط با سرعت بارگذاری می‌باشد.
2. Structure (ساختار): اطلاعاتی دربارهٔ اجزاء فنی وب‌سایت ارائه می‌دهد. این بخش شامل جزئیات فنی مانند استفاده از کد‌های HTML، CSS و JavaScript، تعداد و اندازه فایل‌ها، بهبود اشکالات HTML، و چگونگی برخورد با فایل‌های CSS و JavaScript به منظور بهینه‌سازی بارگذاری صفحه می‌باشد. با استفاده از این اطلاعات، توسعه‌دهندگان می‌توانند نقاط ضعف فنی سایت را شناسایی و بهبود بخشید تا عملکرد و سرعت بارگذاری بهبود یابد.
3. Largest Contentful Paint (LCP): یکی از معیارهای کاربردی در ارزیابی سرعت بارگذاری صفحه وب است. این معیار نشان دهنده زمانی است که بزرگترین محتوای قابل رویت در صفحه وب (مثلاً یک تصویر یا متن اصلی) به طور کامل بارگذاری می‌شود. LCP می‌تواند به عنوان یک معیار کلیدی برای ارزیابی تجربه کاربری در خصوص سرعت بارگذاری صفحه مورد استفاده قرار گیرد. بهبود LCP می‌تواند بهبود قابل ملاحظه‌ای در سرعت بارگذاری وب‌سایت داشته باشد و در نهایت تجربه کاربری را بهبود بخشد.

ابزار WebPageTest

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

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

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

ابزار Search Console

مشخص است که ماموریت اصلی Search Console بررسی سرعت وب‌سایت نیست؛ بلکه یک ابزار برای ارزیابی عملکرد و حضور وب‌سایت در نتایج گوگل محسوب می‌شود. اما در به‌روزرسانی جدید، گوگل یک گزارش به نام “Core Web Vitals” اضافه کرد که به شما امکان می‌دهد سرعت وب‌سایت خود را براساس استانداردهای “Page Speed” گوگل به صورت مداوم اندازه‌گیری و مشاهده کنید.

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

کدام ابزار تست سرعت سایت بهتر و دقیق‌تر است؟

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

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

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

برای تست سرعت وب‌سایت، بهتر است سه روش مختلف را در نظر بگیرید:

1. تست با استفاده از رایانه و اتصال اینترنت خودتان
2. تست با استفاده از یک سرور با سخت‌افزار قدرتمند و اتصال با پهنای باند بالا
3. تست میانگین سرعت با استفاده از جمعیت بزرگی از کاربران

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

مهم‌ترین اولویت باید به گزارش‌های PSI و Core Web Vitals در سرچ کنسول اختصاص یابد، زیرا گوگل این عوامل را برای رتبه‌بندی سایت‌ها ارزیابی می‌کند. این تست‌ها نقش حیاتی در ارزیابی سرعت و تجربه کاربری سایت دارند. بهینه‌سازی برای این عوامل نه تنها در تست‌های دیگر، بلکه در خود گوگل نیز به نتایج مثبتی منجر می‌شود.

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

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

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

سرعت سایت (Site speed) چیست؟

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

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

چرا سرعت سایت مهم است؟

موثرترین روش‌های بهبود سایت‌ها به دو چیز کلیدی بستگی دارد:

1. سئو (SEO)
2. تجربه کاربران 

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

تاثیر سرعت سایت در سئو

سرعت وب‌سایت از دو زاویه بر سئوی وب‌سایت تأثیرگذار است.

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

تمرکز گوگل بر تجربه کاربری عالی است و سرعت بالا از جمله عوامل مهم تجربه کاربری به شمار می‌آید.

اگر وب‌سایت شما دیر بارگذاری می‌شود، احتمال دستیابی به رتبه‌های برتر در گوگل کاهش می‌یابد.

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

در کنسول جستجوی گوگل، گزارشی به نام “Crawl Stats” وجود دارد که نشان می‌دهد ربات‌های گوگل چه مقدار زمان برای دانلود صفحات وب‌سایت شما صرف کرده‌اند. هر چه این زمان (به میزان میلی‌ثانیه) کمتر باشد، صفحات جدید یا به‌روزرسانی شده شما سریع‌تر در نتایج جستجوی گوگل قرار می‌گیرند.

تأثیر سرعت در تجربه کاربران

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

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

این تأخیر در بارگذاری می‌تواند باعث از دست دادن بازدیدکننده، مشتری و در نتیجه، کاهش درآمد شود. اگر به این باور نیستید، باید بدانید که بر اساس تحقیقاتی که شرکت آمازون انجام داده، هر 0.1 ثانیه تأخیر در بارگذاری وب‌سایت، باعث 1٪ کاهش فروش می‌شود.

همچنین، بر اساس تحقیقات گوگل، وب‌سایت‌هایی که سریع بارگذاری می‌شوند (کمتر از 5 ثانیه)، بازدیدکنندگان بیشتری را جلب می‌کنند در مقایسه با وب‌سایت‌های کند (که تا 19 ثانیه طول می‌کشد تا بارگذاری شوند)، تا 70 درصد بیشتر. همچنین، در وب‌سایت‌های سریع، نرخ پرش (Bounce Rate) نیز 35 درصد کمتر است.

نرخ تبدیل یا Conversion Rate یعنی:

نرخ پرش یا بانس ریت یعنی:

تست سرعت سایت با PageSpeed Insights

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

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

1. اطلاعات میدانی یا واقعی (Field Data)

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

2. گزارش آزمایشگاهی (Lab Data)

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

3. گزارش کل وبسایت (Origin Summary)

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

در ادامه قصد داریم مهمترین شاخص‌های استفاده شده در این گزارش را به شما عزیزان معرفی کنیم.

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

اصولاً، اگر امتیاز سرعت سایت شما در این تست بیش از 90 باشد، به معنای این است که سایت شما بسیار سریع است. اگر امتیاز بین 50 تا 90 باشد، نشانگر این است که سرعت سایت شما متوسط است و ممکن است با انجام تغییرات، بهبود یابد. اما اگر امتیاز شما کمتر از 50 است، نشان دهنده آن است که سایت شما خیلی کند عمل می‌کند!

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

حتی اگر سریع‌ترین سایت جهان را داشته باشید، ممکن است در اینجا کمی موانعی برای شما وجود داشته باشد! چرا؟

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

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

در این قسمت، چند نمودار با نام‌های LCP, FID, CLS, FCP, INP و TTFB و با سه رنگ قرمز، نارنجی و سبز وجود دارند که مفاهیم و اطلاعاتی را بیان می‌کنند.

نمودار Largest Contentful Paint (LCP)

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

نمودار First Input Delay (FID)

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

نمودار Cumulactive Layout Shift (CLS)

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

بعضی وب‌سایت‌ها با هدف جلب توجه کاربر به تبلیغات یا لینک‌های خرید، این کار را انجام می‌دهند.

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

نمودار First Contentful Paint (FCP)

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

نمودار Interaction to Next Paint (INP)

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

نمودار Time to First Byte (TTFB)

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

نمودار Total Blocking Time (TBT)

Total Blocking Time (TBT) یک معیار در Google Page Speed است که به ما می‌گوید که زمانی که صفحه وب بارگذاری می‌شود، چه مقدار از زمان توسط فعالیت‌های مسدودکننده (Blocking) اشغال می‌شود. این فعالیت‌های مسدودکننده معمولاً زمانی اتفاق می‌افتند که مرورگر در حال دانلود و اجرای فایل‌های JavaScript است و در نتیجه، قادر به پاسخ به ورودی کاربران نیست.

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

معنی رنگ های نمودارها

حالا که با تعبیر و کاربرد هر دو نمودار آشنا شدید، بیایید ببینیم هر رنگ چه معنایی دارد.

رنگ قرمز برای کاربرانی نمایانگر است که تاخیرهای FID و FCP را تجربه کرده‌اند. معمولاً زمان‌های بیش از 2.5 ثانیه به عنوان تاخیر کند تلقی می‌شوند و در نمودار با رنگ قرمز نمایش داده می‌شوند.

رنگ نارنجی برای کاربرانی نمایانگر سرعت متوسط است. بازه‌ی زمانی بین 1 تا 2.5 ثانیه به عنوان میانگین تلقی می‌شود.

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

4. Opportunities

بخش “فرصت‌ها” در ابزار Google PageSpeed Insights شامل پیشنهادهایی است که بهبود عملکرد و سرعت بارگذاری یک وبسایت را ترویج می‌دهد. این بخش نقاط قابل بهبود در وبسایت شما را مشخص می‌کند و راهنمایی‌هایی برای بهینه‌سازی ارائه می‌دهد.

می‌تواند شامل پیشنهادهایی برای بهبود فشرده‌سازی تصاویر، کاهش اندازه فایل‌های CSS و JavaScript، بهینه‌سازی منابع فراخوانی شده، استفاده بهینه از حافظه نهان (Cache) و بهبود پاسخگویی سرور باشد.

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

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

5. Diagnostics

بخش “تشخیص‌ها” در ابزار Google PageSpeed Insights شامل اطلاعات دقیق و تحلیل‌هایی است که مربوط به عملکرد و سرعت بارگذاری وبسایت شما می‌شود. این بخش نقاط قوت و ضعف وبسایت شما را نشان می‌دهد و مشکلات مرتبط با بهینه‌سازی و سرعت را شناسایی می‌کند.

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

این تحلیل‌ها به وبمستران کمک می‌کنند تا نقاط ضعف و قابل بهبود وبسایت خود را شناسایی کرده و اقدامات مناسب برای بهبود عملکرد و سرعت آن را انجام دهند.

برای مثال در مورد اول، گوگل می‌گوید که از زنجیر کردن درخواست های حیاتی اجتناب کنید. با کلیک روی این گزینه راه‌حل آن را هم می‌توانید ببینید.

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

بهتر است درخواست‌های مهم و حیاتی به صورت همزمان یا موازی (parallel) انجام شوند به جای اینکه یکی از آن‌ها منتظر اجرای دیگری باشد. این کار می‌تواند زمان بارگذاری صفحه را بهبود بخشیده و تجربه کاربری را بهبود ببخشد.

6. Passed Audits

بخش “آزمون‌های گذرانده شده” در ابزار Google PageSpeed Insights شامل لیستی است که مشخص می‌کند که وبسایت شما در چه بخش‌هایی از معیارهای بهینه‌سازی و سرعت موفق به گذراندن استانداردها و آزمون‌های مختلف شده است.

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

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

تاکنون در مورد Google PageSpeed Insights صحبت‌های زیادی داشته‌ایم. اما برای خلاصه کردن و دست‌یافتن به دیدی کامل‌تر، به تصویر زیر دقت کنید.

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

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

راهکارهایی برای افزایش سرعت سایت

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

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

۳ راه ساده برای افزایش سرعت سایت

با به‌کارگیری 3 موردی که در این بخش به شما می‌گوییم، می‌توانید زمان بارگذاری صفحات سایت را تا حد قابل قبولی کاهش دهید؛ پس لطفاً این توصیه‌های ساده را دست کم نگیرید!

1. از تصاویر کمتر و کم حجم‌تر استفاده کنید

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

یک راه حل ساده و سریع برای کاهش حجم عکس‌ها، بدون افت کیفیت

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

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

2. با تبلیغات اسپم خداحافظی کنید

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

۳. از قالب‌های سبک و بهینه استفاده کنید

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

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

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

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

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

این شکل، مراحل باز شدن یه صفحه از سایت رو که مرورگر انجام می‌ده رو نشون می‌ده. یعنی وقتی شما یه مرورگر مثل کروم یا فایرفاکس رو باز می‌کنید، از وقتی آدرس سایت رو وارد می‌کنید و اینتر می‌زنید تا صفحه بارگذاری بشه، این مراحل به ترتیب انجام میشن. بهش می‌گن “Document Object Model” یا DOM.

درک درخت DOM به بهتر فهمیدن مطلب کمک می‌کنه، پس لطفاً اینو تو ذهنتون نگه دارید که بریم جلو برای حل 6 مسیر برای بهبود سرعت!

1. از فشرده‌ساز Gzip استفاده کنید

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

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

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

برای فعالسازی Gzip چه‌کار کنیم؟

قبل از هرگونه فعالسازی، بهتر است به سایت های چک کننده وضعیت Gzip مثل GiftOfSpeed مراجعه کنید و وضعیت فعال یا غیرفعال بودن Gzip در سایتتان را بررسی کنید.

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

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

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

2. کدها را تمیزکاری و مرتب کنید

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

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

3. ریدایرکت‌ها را کاهش دهید

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

تأثیر ریدایرکت‌ها بر سرعت بارگذاری صفحه چگونه است؟

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

مهم است بدانید که ریدایرکت‌ها تأثیر قابل توجهی روی کاربرانی دارند که از اینترنت‌های 3G و 4G برای دسترسی به سایت استفاده می‌کنند. کاهش سرعت در این شرایط به چشم می‌آید و این موضوع می‌تواند نگران‌کننده باشد، حتی برای گوگل هم! بنابراین، تا جای ممکن از استفاده بیش از حد از ریدایرکت‌ها پرهیز کنید.

برای بررسی ریدایرکت‌های سایتتان، می‌توانید از ابزار Redirect Detective استفاده کنید؛ اگر متوجه شدید که ریدایرکتی غیرضروری است، بهتر است آن را حذف کنید.

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

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

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

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

5. حذف جاوا اسکریپت‌هایی که Render-Blocking می‌کنند

اگر بخاطر دارید، گفتیم که رندر کردن یعنی دریافت محتوا توسط مرورگر. اما رندر-بلاکینگ چه معنایی دارد؟

این موضوع به مانعی اشاره دارد که باعث تأخیر در دریافت (یا همان رندر کردن) محتوای صفحه توسط مرورگر می‌شود.

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

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

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

یک نکته مهم: یادتان هست که هنگام استفاده از Google PageSpeed Insight در مورد First Paint و First Contentful Paint صحبت کردیم؟ در واقع، این دو مورد همان محتوای بالای صفحه را شکل می‌دهند. اگر به یاد ندارید، بهتر است یک نگاهی دوباره به آنها بیندازید 🙂

خب، حالا باید برای جلوگیری از بلاک شدن رندر چه‌کار کنیم؟

مهمترین گامی که باید بردارید، شناخت و آگاهی از مشکلات Render-Blocking در صفحه‌تان است. یک ابزار کارآمد مانند Google PageSpeed Insights قادر است به شما نشان دهد که کدام قسمت‌های سایتتان در حال حاضر مانع از رندر صحیح صفحه می‌شوند.

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

آیا موافقید که به راه‌حل‌های حذف رندر بلاکرها بپردازیم؟

از قرار دادن کدهای جاوا در هدر خودداری کنید

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

اسکریپ‌های ضروری را خطی کنید

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

خلاصه می‌کنیم:

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

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

نکته: این موارد برای کدهای JQuery هم صادق است. به‌عنوان مثال، برای فید کردن تصاویر، نیازی به قرار دادن کد کم‌اهمیت در هدر سایت نداریم.

6. می‌توانید برای نسخۀ موبایل از Google AMP استفاده کنید

AMP، تکنولوژی جذابی است که به سرعت بارگذاری سایت‌ها در دستگاه‌های موبایل کمک می‌کند. گوگل این راهکار را به عنوان یک راه برای بهبود سرعت وبسایت‌ها در سال 2016 معرفی کرد و از آن زمان تا کنون، بیش از 25 میلیون دامنه بیش از 1.5 میلیارد صفحه AMP را ایجاد کرده‌اند.

چگونگی کارکرد AMP؟

این تکنولوژی به گوگل اجازه می‌دهد محتوای سایت‌هایی که با استاندارد AMP ساخته شده‌اند را در هاست خود ذخیره کرده و هنگامی که کاربران با مرورگر موبایل خود به سایت وارد می‌شوند، به سرعت محتوای AMP را از هاست گوگل بارگذاری کرده و نمایش می‌دهد.

چگونه می‌توانید صفحات AMP ساخت؟

برای ایجاد صفحات AMP، شما نیاز دارید که نسخه‌ای دیگر از سایت خود با رعایت استانداردهای پروژه AMP ایجاد کنید. سپس، آدرس صفحات موبایلی با اضافه شدن /amp به آدرس اصلی تغییر می‌کند و با یک نشانگر ویژه مثل تصویر زیر در نتایج جستجو نمایش داده می‌شود.

به یاد داشته باشید، استفاده از AMP همیشه به نفع سایت شما نیست. ممکن است طراحی واسط کاربری محدودیت‌هایی داشته باشد و در برخی موارد کاربران برای دسترسی به بخش‌های خاص به نسخه غیر AMP منتقل می‌شوند (یعنی یک صفحه را دوبار ببیند)، همچنین ممکن است برخی از داده‌های Google Analytics را از دست دهید.

۷. بخش‌های ثابت وبسایت را کش (Cache) کنید

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

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

1. LiteSpeed Cache (مخصوص هاست هایی که از وب سرور لایت اسپید استفاده میکنند)
2. WP Rocket
3. W3 Total Cache
4. WP Super Cache

جمع‌بندی