سرعت سایت همان چیزیست که حداقل یک بار در زندگی با اعصاب همۀ ما بازی کرده است؛ هنگام خرید بلیط، انتخاب واحد دانشگاه، تماشای آنلاین ویدئو و … ! قطعاً هیچکس دوست ندارد که بیشتر از ۱۰ ثانیه از وقتش را پای بارگذاری سایت بگذارد؛ به‌خصوص الان که از هر سایتی چندتا وجود دارد و کاربر می‌تواند به‌جای سایت کُند شما، سایت سریع رقیب را انتخاب کند.
پس می‌توان گفت که سرعت سایت، تاثیر خیلی زیادی در تبدیل بازدیدکننده‌های سایت به مشتری دارد! به عبارت دیگر، شما فقط چند ثانیه فقط وقت دارید که کاربران را در سایت نگه دارید و اگر در این چند ثانیۀ سرنوشت‌ساز شکست بخورید، یکی یکی مشتری‌ها را از دست می‌دهید.
قصد ما از نوشتن این مقاله این است که سرعت سایت را از جهات مختلفی بررسی کنیم، تفاوت آن را با سرعت صفحه بگوییم و ببینیم که سرعت سایت روی سئو و تجربه کاربری چه تاثیری دارد. در نهایت هم ابزارها و روش‌هایی را به شما معرفی می‌کنیم که بتوانید سرعت سایتتان را تست و بهینه‌سازی کنید.
سرعت صفحه یا Page speed چیست؟
سرعت صفحه، معیاری برای سنجش است، که بدانیم محتوای صفحه با چه سرعتی بارگذاری (Load) می‌شود.
سرعت صفحه معمولاً با دو مشخصه تعریف می‌شود:
- زمان بارگذاری صفحه: زمانی که طول می‌کشد تمام محتوای یک صفحه‌ی سایت به‌طور کامل بارگذاری شود.
- زمان اولین بایت: مدت‌زمانی که طول می‌کشد مرورگر شما اولین بایت از اطلاعات را، از سرور وب دریافت کند.
سرعت سایت یا Site speed چیست؟
سرعت سایت مفهومی جامع‌تر دارد. وقتی کاربر آدرس سایت شما را در مرورگر خود وارد می کند و بعد از بازدید چند صفحه، به صفحۀ خرید (هدف) منتقل می‌شود، بیشتر سرعت سایت را لمس می‌کند. سرعت سایت فقط به سرعت بارگذاری یک صفحه بستگی ندارد، بلکه به سرعت بارگذاری کل صفحات سایت بستگی دارد.
سرعت سایت با سرعت صفحه چه فرقی دارد؟
سرعت صفحه که معمولاً با سرعت سایت اشتباه گرفته می‌شود، در حقیقت به‌سرعت باز شدن یک صفحه از سایت گفته می‌شود. درحالی‌که سرعت سایت به زمان بارگذاری کل سایت اطلاق می‌شود. کاربران بیشتر با سرعت صفحه سروکار دارند. درحالی‌که برای ایندکس شدن یا ارزیابی سایت توسط موتورهای جستجوگر، سرعت سایت هم مهم است.
چرا سرعت سایت مهم است؟
در حالت کلی دو دلیل برای اهمیت سرعت سایت داریم: SEO سایت شما و تجربه کابران.
تاثیر سرعت سایت در سئو
تأخیر در بارگذاری سایت می‌تواند باعث از دست رفتن بازدیدکننده‌ها و کاهش نرخ تبدیل شود.
اگر باورتان نمی‌شود بد نیست بدانید که طبق تحقیقاتی که شرکت آمازون انجام داده، در هر ۱۰۰ میلی‌ثانیه (۰.۱ ثانیه) تأخیر در بارگذاری سایت، ۱٪ کاهش فروش اتفاق می‌افتد.
همچنین طبق تحقیقات گوگل، زمان ماندن بازدیدکنندگان در صفحه، در سایت‌های سریع (که در کمتر از ۵ ثانیه بارگذاری می‌شوند) در مقایسه با سایت‌های کند (که تا ۱۹ ثانیه طول می‌کشد تا بارگذاری شوند)، ۷۰% بیشتر است. از طرف دیگر در سایت‌های سریع، نرخ پرش (Bounce Rate) هم ۳۵% کمتر است.
نرخ تبدیل یا Conversion Rate یعنی:
تبدیل کاربر به چیزی که شما میخواهید. به بیان ساده‌تر، وقتی کاربری به سایت شما وارد می‌شود، دوست دارید کاری را انجام دهد؛ مثلاً سفارش خریدی را تکمیل کند یا در خبرنامه عضو شود. مقدار موفقیت شما در تبدیل او به چیزی که انتظار دارید، با نرخ تبدیل مشخص می‌شود. (مطالعه بیشتر)
نرخ پرش یا بانس ریت یعنی:
کاربر وارد صفحه وب‌سایت شما می‌شود و بدون وارد شدن به صفحه دیگری پس از مشاهده نخستین صفحه از وب‌سایت شما خارج می‌شود. این جمله به این معنی است که کاربر بدون نشان دادن علاقه‌ای به مطالعه بیشتر مطالب سایت و بدون دیدن صفحات دیگر، از آن خارج می‌شود. (مطالعه بیشتر)
در واقع گوگل از پارامتر سرعت وب‌سایت و صد البته، سرعت صفحه، در الگوریتم رتبه‌بندی سایت‌ها استفاده می‌کند؛ اما این وسط یک اتفاق جالب دیگر هم می‌افتد؛ ربات‌های گوگل فرصت محدودی برای ایندکس کردن یک سایت یا صفحه دارند. هرچه سرعت بارگذاری سایت کندتر باشد، این زمان ممکن است هدر برود و در نتیجه ربات‌ها نتوانند صفحات بیشتری را ایندکس کنند!
تأثیر سرعت صفحه در تجربه کاربر
همانطور که قبلاً هم گفتیم، هیچ کاربری یک سایت کند را دوست ندارد و ترجیح می‌هد از آن خارج شود. در واقع تاخیر در بارگذاری یک صفحه، UX خوبی را رقم نمی‌زند و باعث افزایش نرخ پرش سایتتان می‌شود.
چگونه سرعت سایت خود را تست کنیم؟
برای تست سرعت سایت (یا صفحه، فرقی نمی‌کند) راه‌ها و ابزارهای مختلفی (از جمله گوگل، جی‌تی‌متریکس، Varvy، UPTRENDS و خود مرورگرها) وجود دارد. ما در این بخش، یک مورد از بهترین ابزارها را بررسی می‌کنیم و طرز استفاده از آن‌ها را یادتان می‌دهیم. با یاد گرفتن این ابزار می‌توانید از ابزارهای دیگر هم به‌راحتی استفاده کنید.
راهنمای استفاده از Google PageSpeed Insights
ابزار تست سرعت رایگانی که گوگل در اختیارتان قرار می‌دهد، سرعت سایت شما را اندازه می‌گیرد و به آن نمره‌ای از ۱ تا ۱۰۰ می‌دهد؛ سپس این ابزار فوق‌العاده عواملی که باعث کند شدن سایتتان شده است را پیدا می‌کند و پیشنهاداتی برای بهبود سرعت ارائه می‌کند.
برای تست کردن سرعت سایتتان، کافیست آدرس URL را در کادر وارد و دکمه ANALYZE را بزنید.
تصویر بالا نتیجۀ تست سرعت سایت دیدوگرام، در نسخۀ دسکتاپ را نشان می‌دهد. همانطور که می‌بینید، گوگل به سرعتِ این سایت نمرۀ ۸۲ را داده است. ۸۲ نمرۀ بدی نیست و نشان می‌دهد که دیدوگرام از نگاه گوگل سرعت متوسط (نزدیک به خوب) دارد.
در کل، اگر امتیاز سرعت سایتتان در این تست بالای ۹۰ بود یعنی سایتتان سریع است. اگر این امتیاز بین ۵۰ تا ۹۰ بود، یعنی سرعت سایت شما متوسط است و کافیست برای بهبود آن تغییراتی انجام دهید. اگر خدایی نکرده امتیاز سایت شما زیر ۵۰ باشد، یعنی سایت شما بسیار کند است!
در ادامۀ صفحه، گوگل در بخش‌های مختلفی اطلاعات تکمیل‌کننده و راهکارهای بهبود سرعت را به شما می‌گوید؛ اما بهتر است قبل از آن ببینیم که گوگل اصلاً این اطلاعات را از کجا می‌آورد! بعد از این که با سازوکار گوگل آشنا شدیم، حرف‌های آن را بهتر می‌فهمیم.
Google PageSpeed Insights چگونه کار می‌کند؟
گوگل، برای اندازه‌گیری سرعت سایت‌ها به یک سری اطلاعات نیاز دارد که به دو روش زیر آن‌ها را جمع‌آوری می‌کند:
- اطلاعات آزمایشگاهی (Lab Data)
- اطلاعات میدانی (Real-World Field Data)
اطلاعات آزمایشگاهی حاصل آنالیز سایتتان توسط گوگل است و اطلاعات میدانی گزارش تجربه کاربران است که توسط مرورگر گوگل کروم جمع‌آوری شده است.
در جمع‌آوری اطلاعات میدانی، وقتی کاربران به سایت شما مراجعه می‌کنند، تجربۀ کاربری هر یک در گوگل کروم آن‌ها ذخیره می‌شود و گوگل از آن‌ها در آنالیزهایش استفاده می‌کند.
حالا برویم سراغ اطلاعاتی که Google PageSpeed Insights با یک کلیک در اختیارتان می‌گذارد. اگر صفحه را کمی اسکرول کنید به چند بخش می‌رسید که عبارتند از: داده‌های آزمایشگاهی، فرصت‌ها، عیب‌یابی گوگل و موفقیت‌ها. در ادامه هر بخش را توضیح می‌دهیم.
۱) Field Data یا داده‌های میدانی
حتی اگر سریعترین سایت جهان را هم داشته باشید، ممکن است در این بخش کمی جا بخورید! چرا؟
چون در جمع‌آوری اطلاعات میدانی، تنها سرعت سایت نیست که تعیین‌کننده است. سرعت اینترنت کاربران هم در تجربه کاربری آن‌ها تاثیر داشته، در گوگل کروم ذخیره شده و در تحلیل میدانی لحاظ می‌شود.
در تصویر بالا می‌بینید که گوگل می‌گوید، در ۳۰ روز گذشته سرعت پیج، در مقایسه با صفحات دیگری که گزارش تجربه کاربری آن‌ها در گوگل کروم بوده، آهسته ارزیابی شده است.
در این بخش دو نمودار ۳ رنگ به نام‌های FCP و FID هم داریم که حرف‌هایی برای گفتن دارند.
FCP یا First Contentful Paint
به زبان ساده، وقتی شما آدرس وب‌سایتی را در مرورگر خود وارد می‌کنید، در ابتدا، صفحۀ مرورگر خالی و سفید است؛ به مدت زمانی که طول می‌کشد تا اولین تغییر ظاهری در صفحه ایجاد می شود (فاصلۀ زمانی اینتر زدن روی صفحه کلید برای تایید آدرس سایت مورد نظر تا دریافت اولین بایت از اطلاعات سایت از DOM) FCP گفته می‌شود.
FID یا First Input Delay
به مدت زمانی گفته می‌شود که کاربر اولین تعامل را با سایت داشته باشد. اولین تعامل می‌تواند کلیک کردن روی لینک، لمس یک دکمه یا هر عملی باشد که مرورگر وادار به واکنش شود.
حالا که با معنی و کار هر دو نمودار آشنا شدید، بیایید ببینیم که هر رنگ نشان‌دهندۀ چیست؟
رنگ قرمز برای آن درصدی از کاربران است که FID و FCP کندی را تجربه کرده‌اند. معمولاً زمان بالای ۲.۵ ثانیه، کند تلقی شده و در رنگ قرمز محاسبه می‌شود.
رنگ نارنجی آن درصدی از کاربران را نشان می‌دهد که سرعت متوسطی را تجربه کرده‌اند. مدت زمان بین ۱ تا ۲.۵ ثانیه متوسط است.
رنگ سبز درصد آن دسته از کاربرانی را نشان می‌دهد که سرعت مناسبی را تجربه کرده‌اند. زمان‌های زیر ۱ ثانیه، در دستۀ سبزرنگِ پرسرعت‌ها جای می‌گیرند.
۲) Lab Data یا اطلاعات آزمایشگاهی
همانطور که گفتیم، اطلاعات آزمایشگاهی با استفاده از آنالیز سایتتان به‌دست می‌آید و دیگر ربطی به تجربه کاربران ندارد. در بخش Lab Data، زمان استفاده شده در هر قسمت روبروی آن آورده شده است. حالا باید بدانیم هر کدام از این ۶ قسمت چه هستند و چه کار می‌کنند.
FCP یا First Contentful Paint
یعنی اولین ترسیم محتوا که در قسمت قبل توضیح دادیم.
FMP یا First Meaningful Paint
یعنی اولین ترسیم معنادار محتوا. این المان که به تازگی به عنوان ابزار سنجش سایت مورد استفاده قرار می‌گیرد، در سایت‌های مختلف تعریف جداگانه‌ای دارد. یعنی چه؟ به زبان ساده، FMP به زمانی گفته می‌شود که اولین محتوای معنادار (همان محتوایی که کاربر برای دیدن آن – از جمله متن یا عکس – به سایت مراجعه می‌کند) در صفحه مرورگر ظاهر می‌شود. پس طبیعتاً این معنا از سایتی به سایت دیگر می‌تواند متفاوت باشد. مثلاً در یک سایت خبری اولین محتوای معنادار، عنوان آن خبر است و در یک سایت تماشای آنلاین فیلم، اولین محتوای معنادار، تصویر اولیه آن ویدئو است.
Speed Index یا سرعت ایندکس شدن صفحه
میانگین زمانی است که طول می‌کشد تا یک بخش از محتوا (مثلاً یک تصویر) به‌صورت قابل فهم نمایش داده شود. بهتر است این زمان زیر ۱۲۵۰ میلی‌ثانیه باشد.
First CPU Idle
به زمانی گفته می‌شود که صفحۀ نمایشگر بتواند بعد از بارگیری صفحه، به ورودی کاربران پاسخ دهد. در بیشتر مواقع (نه همیشه!) با بارگذاری UI صفحه، تعامل ممکن شده و First CPU Idle اندازه‌گیری می‌شود.
TTI یا Time to Interactive
بارگذاری صفحه اتفاقی نیست که در یک لحظه رقم بخورد. بارگذاری صفحه تجربه‌ای است که هیچ معیاری نمیتواند آن را دقیقا اندازه بگیرد. لحظات چندگانه‌ای هنگام بارگذاری یک صفحه وجود دارد که روی تجریه کاربران اثر می‌گذارند و باعث می‌شوند که کاربر احساس کند این صفحه کند است یا سریع.
TTI به ما می‌گوید که چه زمانی صفحه کاملاً برای تعامل آماده شده است. حال شاید بپرسید که قابل تعامل بودن سایت از کجا معلوم می‌شود؟ در جواب باید بگویم ۳ چیز معمولاً زمان TTI را تعیین می‌کنند:
- وقتی که صفحه محتوای مفید یا معناداری برای نمایش داشته باشد. (این مورد با First Meaningful Content اندازه‌گیری می‌شود.)
- اکثر بخش‌های موجود در یک صفحه قابل مشاهده باشند.
- صفحه به درخواست کاربر، در کمتر از ۵۰ میلی‌ثانیه جواب دهد.
Max Potential First Input Delay
احتمالاً بارها شنیده‌اید که می‌گویند اولین تاثیر، مهم‌ترین تاثیر است. شاید برایتان جالب باشد که بدانید در دنیای اینترنت هم اولین تاثیر خیلی مهم است. چطور؟
هنگام اندازه‌گیری سرعت سایت، به فاصلۀ زمانی بین زمانی که کاربر احساس می‌کند می‌تواند با صفحه تعامل کند، تا وقتی که صفحه کاملاً قادر به تعامل با صفحه باشد، Max Potential FID گفته می‌شود. همۀ در این موقعیت بوده‌ایم که صفحه‌ای بارگذاری شده اما وقتی روی دکمه‌ای کلیک می‌کنیم، واکنشی انجام نمی‌شود. در واقع این تاخیر بین احساس ما تا وقتی که واقعاً بتواند صفحه پاسخ تعامل ما را بدهد، همان چیزی است که توسط معیار FID سنجیده می‌شود.
در بهترین حالت باید این زمان زیر ۵۰ میلی‌ثانیه باشد.
۳) Opportunities
در این بخش گوگل متناسب با سایت شما پیشنهاداتی را برای افزایش سرعت سایت ارائه می‌کند.
در مقابل هر پیشنهاد اعدادی را به ثانیه می‌بینید که نشان‌دهندۀ میزان تقریبی افزایش تقریبی سرعت سایت، در صورت عمل کردن به پیشنهادات گوگل هستند.
برای مثال اگر شما حجم عکس‌های موجود در صفحه را بهینه کنید، ۰.۲ ثانیه از زمان بارگذاری صفحه کم شده و سایتتان سریعتر Load می‌شود.
۴) Diagnostics
در این بخش گوگل عیب‌یابی سایت شما را انجام می‌دهد و برای هر عیبی که پیدا کند، راه حل‌هایی را پیش پایتان می‌گذارد.
برای مثال در مورد اول، گوگل می‌گوید که مطمئن شوید تا زمان بارگذاری فونت، متن شما در صفحه قابل مشاهده است. با کلیک روی این گزینه راه‌حل آن را هم می‌توانید ببینید.
۵) Passed audits
در این بخش موارد موفقیت‌آمیزتان نیز نمایش داده می‌شود تا زیاد از عیب‌جویی گوگل ناراحت نشوید!
برای اینکه این بخش را جمع‌بندی کنیم و به یک دید کلی درباره هر چیزی که تا اینجا، درباره Google PageSpeed Insights گفتیم برسید، تصویر زیر را به دقت نگاه کنید.
همانطور که می‌دانید، یک صفحه تا زمانی که کامل بارگذاری شود، مراحل مختلفی را پشت سر می‌گذارد. گوگل تک‌تک این مراحل را بررسی می‌کنید و با توجه به اطلاعاتی که از آنالیز خودش و گزارش مرورگرهای کاربران به‌دست آورده، سرعت سایت شما را اندازه می‌گیرد.
این از نحوۀ ارزیابی سرعت سایت، حالا وقت آن است که از نتایج این آنالیز استفاده و سایتمان را سریعتر و سریعتر کنیم؛ پس در بخش بعدی با ما باشید.
چگونه سرعت سایت خود بهینه کنیم؟
ببینید، بهینه سازی سرعت سایت، گاهی خیلی ساده است و با چند کار ساده انجام می‌شود؛ اما گاهی قضیه کمی (دقت کنید، فقط کمی!) پیچیده می‌شود و لازم است که کمی با کُدها سروکله بزنید.
برای همین هم تصمیم گرفتم بهینه سازی سرعت سایت را به دو بخش ساده و پیشرفته تقسیم کنم. اگر خیلی اهل کُد و دل‌ورودۀ سایتتان نیستید، خواندن بخش اول کفایت می‌کند؛ اما اگر میخواهید سایتتان با سرعت جت بارگذاری شود، بخش پیشرفته را هم از دست ندهید!
۳ راه ساده برای افزایش سرعت سایت
با به‌کارگیری ۳ موردی که در این بخش به شما می‌گوییم، می‌توانید زمان بارگذاری صفحات سایت را تا حد قابل قبولی کاهش دهید؛ پس لطفاً این توصیه‌های ساده را دست کم نگیرید!
۱) حجم تصاویر را کم کنید
یکی از اشتباهات رایج بین ما وبمسترها (مخصوصاً کسانی که تولید محتوا انجام می‌دهند 
) این است که تصویری با ابعاد و حجم بزرگ را در سایت آپلود می‌کنیم و بعد در سیستم مدیریت محتوا، تلاش می‌کنیم با کشیدن گوشه‌های عکس، آن را کوچک کنیم! این کار اشتباه است. چرا؟
چون حجمی از فضای سایت خودمان و حجمی از اینترنت کاربر، بیخودی برای چیزی که نیاز نیست، هدر می‌رود!
البته عکس‌های موجود در سایت فقط به مقاله محدود نمی‌شوند؛ عکس محصولات، عکس‌ها و آیکون‌های موجود در صفحۀ اول سایت، عکس‌های استفاده شده در طراحی سایت و خلاصه هر عکسی که می‌بینید، روی سرعت بارگذاری صفحه تاثیر دارند؛ پس لطفاً آن‌ها را بهینه کنید.
یک راه حل ساده و سریع برای کاهش حجم عکس‌ها، بدون افت کیفیت
شما می‌توانید با مراجعه به سایت Optimizilla، عکس‌هایی که میخواهید بهینه شند را آپلود کنید و با حجمی کمتر از قبل تحویل بگیرید. یکی از خوبی‌های این سایت این است که می‌توانید عکس‌ها را به صورتی گروهی آپلود و به صورت گروهی هم دانلود کنید.
در ضمن فراموش نکنید که این سایت با ابعاد عکس‌ها کاری ندارد و فقط حجم آن‌ها را کم می‌کند؛ پس قبل از آپلود عکس، از استاندارد بودن ابعاد آن مطمئن شوید!
۲) با تبلیغات اسپم خداحافظی کنید
اگر سایتی که دارید تبلیغات محور است و از این راه درآمد کسب می‌کنید، بهتر است تعداد تبلیغات را مدیریت کنید. منظورم این است که ریختن تبلیغات از در و دیوار سایت، علاوه‌براینکه قشنگ نیست و باعث اسپم تلقی شدن سایتتان می‌شود، سرعت سایت را نیز کند می‌کند.
در ضمن بد نیست بدانید که گوگل، الگوریتمی به نام فرد را مامور مبارزه با سایت‌هایی کرده است که حجم تبلیغات آن‌ها، با محتوایی که تولید می‌کنند، هیچ تناسبی ندارد.
۳) فایل‌ها را زیپ کنید
اگر در سایتتان خدمات دانلودی (مثلاً دانلود نرم‌افزار) دارید، بهتر است فایل‌ها را ابتدا با نرم‌افزارهای فشرده‌سازی فایل (مثل WinRar) زیپ کنید. با این کار حجم فایل‌هایی که آپلود می‌کنید کاهش پیدا می‌کند. جدا از حجم هم، شما می‌توانید چند فایل مرتبط را با هم فشرده و در سایتتان بارگذاری کنید.
تا همین‌جا، با این ۳ راهکار ساده، سرعت شما تا حدی بهینه می‌شود. حالا اگر مایل باشید برویم به‌سراغ بهینه‌سازی پیشرفتۀ سرعت سایت.
۶ راه پیشرفته برای بهینه سازی سرعت سایت
لطفاً با دیدن کلمۀ “پیشرفته” احساس نکنید که قرار است مطالب پیچیده و غیرقابل فهمی بگویم! اتفاقاً سعی میکنم این مطالب را به ساده‌ترین شکل ممکن منتقل کنم، تا همۀ کسانی که آشنایی حداقلی با پشت‌صحنۀ سایت‌ها دارند، بتوانند از آن استفاده کنند.
قبل از اینکه وارد راه‌حل‌ها شویم، بیایید ببینیم که یک مروگر وقتی که شروع به نمایش دادن یک سایت می‌کند، چه مراحلی را به ترتیب طی می‌کند؟ شکل زیر را ببینید.
این شکل، مراحل تحویل گرفتن یک صفحه از سایت، توسط مرورگر را نشان می‌دهد. یعنی وقتی شما وارد مرورگر کروم یا فایرفاکس شدید، بعد از اینکه آدرس سایت را وارد کردید و اینتر را زدید، تا زمانی که صفحه بارگذاری شود، این مراحل به ترتیب طی می‌شوند. به این شکل درخت DOM یا Document Object Model می‌گویند.
درخت DOM در ادامه به فهم بهتر مطلب کمک می‌کند، پس لطفاً آن را به ذهنتان بسپارید تا برویم سراغ ۶ راه بهبود سرعت!
۱) از فشرده‌ساز Gzip استفاده کنید
هنگامی که کاربری وارد سایت می‌شود، از همان لحظه اول، تا زمانی که از تعاملی انجام دهد، درخواست‌ها یا Request های مختلف و پی‌درپی به‌صورت فایل برای سرور ارسال می‌شوند. سرور، برای اینکه بتواند فایل‌ها را بررسی کند و به این درخواست‌ها جواب بدهد، به زمان نیاز دارد؛ پس چه نتیجه‌ای می‌گیریم؟
نتیجه این است، هر چه این درخواست‌ها، فشرده‌تر و کمتر باشند، سرعت پاسخگویی سرور هم بیشتر شده و سایت زودتر بارگذاری می‌شود.
برای فشرده و بهینه‌تر کردن فایل‌های موجود می‌توانیم از Gzip استفاده کنیم. Gzip روی سایت شما نصب می‌شود و قبل از اینکه صفحات سایت یا استایل‌شیت‌ها را برای مرورگر بفرستد، آن‌ها را فشرده می‌کند. شاید غیرقابل باور به‌نظر برسد، اما Gzip تا ۷۰% حجم فایل‌های ارسالی را می‌تواند کاهش دهد.
برای فعالسازی Gzip چه‌کار کنیم؟
قبل از فعالسازی، بهتر است که به سایت Giftofspeed رفته و فعال بودن یا فعال نبودن Gzip در سایتتان را چک کنید.
در صورتی که Gzip روی سایتتان فعال نبود، به شرکت هاستینگ‌تان تیکت بزنید و بخواهید که آن را برایتان فعال کنند.
یک روش دیگر هم برای فعالسازی Gzip در وردپرس وجود دارد که خودتان راحت می‌توانید انجام دهید. فقط کافیست افزونه WP Super Cache استفاده کنید. این افزونه علاوه بر اینکه حجم تصاویر سایت را بهینه می‌کند، Gzip را نیز روی سایتتان فعال کرده و سرعت بارگذاری را کاهش می‌دهد.
نکته: دقت کنید که استفاده از پلاگین‌های بیش‌ازحد در وردپرس، خود یکی از دلایلی است که باعث می‌شود سرعت سایتتان کم شود. علاوه‌براین استفاده از پلاگین‌های مختلف و بعضاً غیر معتبر، امنیت سایتتان را به خطر می‌اندازد. برای همین توصیه میکنم پلاگین‌ها را تا جای امکان مدیریت کنید و از مفید بودنشان مطمئن شوید.
۲) کدها را تمیزکاری و مرتب کنید
این بخش دیگر مربوط به برنامه‌نویسان و طراحان سایت است. برنامه‌نویس‌های عزیز، حتماً می‌دانید که با تمیز کد زدن، حذف جاهای خالی، فرمت‌های اضافی، توضیحات کد، ویرگول‌ها، کدهای اضافی و خیلی از موارد غیر ضروری دیگر، سرعت بارگذاری صفحه به شکل غیرقابل‌باوری افزایش پیدا می‌کند؛ پس لطفاً این نکات را جدی بگیرید و به‌کار ببرید.
یکی از ابزارهایی که برای تمیزکاری کدهای CSS خیلی به دادتان می‌رسد، CssNano است. با استفاده این ابزار می‌توانید حجم کدها تا حد زیادی کاهش دهید و سرعت سایتتان را زیاد کنید.
۳) ریدایرکت‌ها را کاهش دهید
اصلاً ریدایرکت چیست؟ ریدایرکت یعنی انتقال کاربر به یک مکان جدید. حالا خود ریدایرکت هم انواع مختلفی دارد و با هدف‌های مختلفی انجام می‌شود. اگر دوست داشتید در این باره بیشتر بدانید، به سری آموزشی ریدایرکت و انواع آن سر بزنید.
حالا ریدایرکت‌ها چه تاثیری روی سرعت صفحه دارند؟
درخت DOM را یادتان هست؟ آنجا دیدید که یک مرورگر غالباً چه مسیری را برای تحویل گرفتن و نمایش سایت شما، پشت سر می‌گذارد. حالا فرض کنید کاربر با ورود به سایت شما، با یک یا چند ریدایرکت، به آدرس دیگری انتقال داده شود؛ در چنین مواقعی بدیهی است که مراحل دیگری به این درخت اضافه و سرعت بارگذاری سایت کم می‌شود.
بد نیست بدانید که ریدایرکت‌ها تاثیر دوچندانی روی کاربران موبایلی دارند که با استفاده از اینترنت‌های ۳G و ۴G سایت شما را باز می‌کنند. کند شدن سایت در این مواقع بیشتر به چشم می‌آید و این همان چیزیست که گوگل را هم عصبانی می‌کند! پس تا جای امکان استفاده از ریدایرکت را کاهش دهید.
برای چک کردن ریدایرکت‌های سایتتان می‌توانید از Redirect mapper استفاده کنید؛ اگر ریدایرکتی به نظرتان غیرضروری بود، آن را پاک کنید.
۴) از شبکۀ توزیع محتوا (CDN) استفاده کنید
CDN مخفف کلمۀ Content Delivery Network است و معنی آن می‌شود شبکۀ توزیع محتوا.
حالا شبکۀ توزیع محتوا قرار است چه‌کار کند؟
وظیفۀ شبکۀ توزیع محتوا این است که محتوا (شامل کدهای سایت شما، استایل‌شیت‌ها، فونت‌ها، تصاویر و …) را از نزدیک‌ترین فاصلۀ جغرافیایی به سیستم کاربر برساند. این کار سرعت انتقال اطلاعات را تا حد نسبتاً زیادی افزایش می‌دهد و باعث می‌شود که سایت شما سریعتر شود.
در تصویر زیر تفاوت توزیع محتوا با CDN و بدون آن را می‌بینید. در واقع وقتی که از CDN استفاده می‌کنید، انگار شعبه‌ای در یکی از شهرها باز کرده‌اید و وقتی کاربر سفارشی می‌دهد، به‌جای ارسال سفارش از تهران، آن را از همان شهر سریعاً ارسال می‌کنید.
برای ملحق شدن به شبکۀ توزیع محتوا، می‌توانید از شرکت‌های ارائه‌دهندۀ این خدمات (مثل ابر آروان) اشتراک تهیه کنید.
۵) حذف جاوا اسکریپت‌هایی که Render-Blocking می‌کنند
اگر یادتان باشد، گفتیم که رندر کردن یعنی تحویل گرفتن محتوا توسط مرورگر. با این حساب Render-Blocking یعنی چه؟
رندر-بلاکینگ یعنی عملی که مانع تحویل گرفتن (یا همان رندر کردن) محتوای صفحه توسط مرورگر می‌شود.
در واقع، مرورگر قبل از اینکه شروع به تحویل گرفتن صفحه کند، با نشانه‌گذاری‌های HTML یک درخت DOM برای آن می‌سازد. در طول این فرآیند (یعنی تجزیه و تحلیل درخت DOM) اگر مرورگر به موردی (مثل کد جاوا اسکریپت) برخورد کند، عملیات را متوقف و به آن رسیدگی می‌کند. این وقفه‌ها، گاهی به دلیل صبر کردن برای دانلود فایل جاوا اسکریپت خارجی اتفاق می‌افتد و اینطوری عملاً رندر اولیۀ صفحه به تعویق می‌افتد.
بد نیست بدانید که گوگل اصلاً میانۀ خوبی با اسکریپت‌های خارجی که بارگذاری محتوای ابتدایی روی صفحه نمایش (داخل لپتاپ، تبلت، موبایل یا هر جای دیگری) را به تعویق می‌اندازند، ندارد.
در تصویر زیر تفاوت نمایش محتوای ابتدایی و بقیه محتوای صفحه را می‌بینید و فکر میکنم متوجه شوید که محتوای ابتدایی صفحه (Above the fold) چرا این‌قدر مهم است. در واقع نمایش اولیه همان چیزی است که دلِ کاربر را خوش می‌کند و او را در صفحه نگه می‌دارد؛ پس طبیعتاً نباید کاری کنیم که این نمایش به تعویق بیافتد!
یک نکته: یادتان هست هنگام کار با Google PageSpeed Insight دربارۀ First Paint و First Contentful Paint صحبت کردیم؟ در حقیقت، اولین رسم و اولین رسم معنادار صفحه، همان Above the fold را تشکیل می‌دهند. توصیه میکنم اگر این قسمت‌ها را یادتان نیست، حتماً نیم‌نگاهی به آن بیاندازید
خب، حالا باید برای جلوگیری از بلاک شدن رندر چه‌کار کنیم؟
اولین کاری که باید بکنید این است که متوجه شوند اصلاً صفحۀ شما دچار مشکل Render-Blocking هست یا نه! برای این کار کافی است سایت خود را با همان ابزار گوگل تست کنید. Google PageSpeed Insights به شما می‌گوید چه قسمت‌های در حال حاضر، بلاکرهای سایت شما هستند.
همانطور که می‌بینید، در حال حاضر سایت دیدوگرام ۷ مورد رندر بلاکینگ دارد و اگر همۀ آن‌ها برطرف شوند، حدود ۲.۹۶ از زمان بارگذاری صفحه کم شده و به سرعت آن اضافه می‌شود.
اگر موافق باشید، دیگر برویم سراغ راه‌های حذف رندر بلاکرها.
۱- از آوردن کدهای جاوا در Header خودداری کنید
فکر میکنم تا الان چند بار درباره رندر شدن و بارگذاری صفحه صحبت کردیم؛ با این حساب باید بدانید که آوردن اسکریپت در هدر باعث می‌شود اولین رسم محتوا در صفحه (یا تجزیه درخت DOM) با وقفه روبرو شود. پس باید چه کار کنیم؟ بهترین در رابطه اسکریپت‌ها این است که آن‌ها در فوتر صفحه بیاوریم.
۲- اسکریپ‌های ضروری را خطی کنید
گاهی اوقات ممکن است کد جاوا اسکریپ آنقدر ضروری باشد مجبور باشید آن را حتماً در Header بیاورید. در چنین مواقعی، بهتر است به‌جای اسکریپت خارجی (External)، از اسکریپت خطی (Inline) استفاده کنید.
اسکریپت‌های خطی، بر خلاف اسکریپت‌های اکسترنال که محتوا را از یک منبع خارجی می‌خوانند، داخل همان صفحه بارگذاری می‌شوند. فقط دقت کنید که اگر از اسکریپت Inline در هدر استفاده می‌کنید، حتماً حجم آن فشرده باشد.
پس یک بار دیگر مرور کنیم:
- اگر واجب نیست که اسکریپت در هدر صفحه قرار بگیرید، آن را به External در فوتر بیاورید
- اگر واجب است که اسکریپت در هدر قرار بگیرد، آن را به‌صورت Inline در هدر بیاورید و به حجم و اندازه هم توجه کنید
نکته: مواردی که گفتیم، درباره کدهای JQuery هم صدق می‌کند. برای مثال نیاز نیست کد کم‌اهمیتی که برای فید کردن تصاویر استفاده می‌شود، در هدر سایت قرار بگیرد.
۶) می‌توانید برای نسخۀ موبایل از Google AMP استفاده کنید
AMP یا Accelerated Mobile Page، یک تکنولوژی است که کمک می‌کند سایت‌های نسخۀ موبایل، در سریعترین حالت ممکن بارگذاری شوند. گوگل این تکنولوژی را در سال ۲۰۱۶ ارائه کرد، تا سایت‌های کند و تنبل بتوانند با استفاده از آن، تکانی به سرعت خود بدهند. از سال ۲۰۱۶ تا الان، حدود ۲۵ میلیون دامنه، بیش از ۱.۵ بیلیون صفحۀ AMP ساخته‌اند.
AMP چگونه کار می‌کند؟
گوگل سایت‌هایی را که AMP ساخته‌اند پیدا و محتوای آن‌ها را در هاست خودش ذخیره می‌کند. با این کار هر بار کاربری با موبایلش وارد سایت شما شود، گوگل سریعاً محتوایی که استاندارد AMP دارد را از هاست خودش بارگذاری کرده و نمایش می‌دهد.
برای ساختن صفحۀ AMP باید چه کار کنیم؟
برای این کار شما باید نسخۀ دیگری از سایتتان بسازید که استانداردهای پروژۀ AMP در آن رعایت شده باشد. بعد از ساختن AMP، آدرس سایت در نسخۀ موبایلی به چیزی مشابه site.com/page/amp تغییر می‌کند و با یک علامت (مثل عکس زیر) در نتایج جستجو نشان داده می‌شود.
توجه: AMP علی‌رغم خوبی‌هایی که دارد، همیشه هم به نفع سایت نیست. مثلاً طراحی UI با محدودیت‌هایی روبرو می‌شود، گاهی کاربر برای نظر دادن باید به نسخۀ غیر AMP منتقل شود (یعنی عملاً دوبار یک صفحه را ببیند) و حتی ممکن است بخشی از دیتاهای گوگل آنالیتیکس را از دست بدهید.
جمع‌بندی
بالاخره به پایان یکی دیگر از مقالات نوین رسیدیم. ما سعی کردیم در این مقاله تمام چیزی که از سرعت سایت و روش‌های بهینه‌سازی آن می‌دانستیم، قدم به قدم، با بیانی ساده به شما منتقل کنیم. حالا نوبت شماست تا از این راهکارها استفاده کنید و سایتی بسازید که در ۱ ثانیه 
بارگذاری می‌شود و هیچ مشتری را نمی‌پراند! اگر راه حل دیگری بلدید که می‌توانیم به مقاله اضافه کنیم حتماً ما را در جریان بگذارید؛ اگر هم سوالی داشتید یا جایی از مقاله برایتان گنگ بود، حتماً در بخش نظرات مطرح کنید، ما سعی می‌کنیم در کوتاهترین زمان پاسختان را بدهیم.
نوشته راهنمای کامل سرعت سایت (+ ۸ روش برای افزایش سرعت) اولین بار در نوین. پدیدار شد.
