نمونه آبشاری در سئو چیست؟

آموزش استفاده از نمودارهای آبشاری در سئو

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

سئو یا بهینه سازی سایت چیست؟

سئو مخفف «search engine optimization» به معنای «بهینه سازی موتور جستجوگر است. همانطور که می‌دانیم، سرعت یک صفحه وب از یک سئو خیلی مهم است. صفحات پر سرعت‌ تر از لحاظ رتبه بندی موتور جستجوگر، در جایگاه بالاتری قرار دارند و کاربران می‌ توانند صفحات بیشتری را از وب سایت شما ببینند. به طور خلاصه، یک سئو باهوش و زیرک نیاز دارد که علاوه بر محتوا، به بهینه سازی عملکرد هم فکر کند. همانطور که در آخرین مقاله‌ مان هم بحث کردیم، Web Page Test، یک ابزار خوب و رایگان است که شما می‌ توانید از آن برای بهینه سازی عملکرد وب سایت خود استفاده کنید.

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

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

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

با آموزش استفاده از نمودارهای آبشاری در سئو یاد می گیریم چگونه یک نمودار آبشاری را بخوانیم؟

Sia-waterfall diagram-small

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

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

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

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

مراجعه DNS (سبزرنگ)

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

اتصال اولیه (نارنجی رنگ)

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

مذاکره SSL/TLS (بنفش رنگ)

اگر صفحه شما دارد منابع را بطور ایمن از SSL/TLS لود می‌ کند، زمانی است که مرورگر دارد اتصال را تنظیم می‌کند. استفاده از HTTPS به عنوان یک فاگتور رتبه بندی جستجو، SSL/TLS رایج‌ تر است.

زمان اولین Byte یا TTFB (سبز رنگ)

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

دانلود کردن (آبی رنگ)

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

یک خط عمودی سبز رنگ هم وجود دارد که نشان می‌ دهد چه زمانی انتقال شروع می‌ شود (Start render). تا زمانیکه بارگزاری و انتقال آغاز می‌ شود، کاربر یک صفحه سفید شاهد (blank page) را می‌ بیند. هرچه این زمان طولانی‌ تر باشد، کاربر فکر می‌ کند سایت شما کند است.

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

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

اول: ما می‌ توانیم زمان لازم برای دانلود همه منابع را کم کنیم. این باعث کاهش پهنای نمودار آبشاری می‌ شود و سایت پرسرعت‌ تر می‌ گردد.

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

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

بهتر است راجع به هر کدام از این‌ ها بیشتر توضیح دهیم.

کاهش پهنای نمودار آبشاری

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

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

آیا بخش‌ های بنفش رنگ بلند وجود دارد؟ این رنگ نشان دهنده زمان لازم برای مذاکره SSL/TLS است. اگر مقدار زیادی بنفش پشت سر هم در سایت می‌ بینید، نشان می‌ دهد که شما برای TLS بهینه نشده‌اید. در نمودار زیر دو درخواست HTTPS می‌ بینید که یکی از آن‌ها سرورش بهینه شده اما دیگری یک مذاکره TLS بد دارد.

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

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

آیا مقدار زیادی CSS یا فایل JAVASCRIPT می‌ بینید؟ در زیر نمایی از یک نمودار آبشاری آمده است که از سایت AOL گرفته شده که ۴۸ درخواست جداگانه فایل CSS داشته. اگر سایت شما تعداد زیادی CSS یا فایل JAVASCRIPT باز می‌ کند، باید سعی کنید آن‌ها را با CMS تلفیق کنید. تلفیق و مخلوط کردن فایل‌ ها، تعداد درخواست‌ ها را کم کرده و سرعت را بالا می‌ برد.

بهبود زمان انتقال: اگر این زمان (زمان انتقال) بیشتر از ۱. ۵ ثانیه است، باید آن را بهبود بخشید. به همه منابع در بالا و سمت چپ خط شروع انتقال نگاه کنید. همه چیزهایی که باید برای ارتقا بدانید در آنجا آمده است.

در اینجا چند تیپ آمده است.

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

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

یک مثال: در اینجا قسمت بالایی یک نمودار آبشاری وجود دارد.

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

سایر فاکتور‌ها

آیا سرور من به اندازه کافی سریع است؟

می‌دانیم که زمان اولین Byte از سرور شما، یک فاکتور مهم در رتبه بندی موتورهای جستجوگر است. خوشبختانه این اندازه را نمودار آبشاری به شما می‌ گوید. به اولین ردیف نمودار نگاه کنید. به شما می‌ گوید که چگونه مرورگر، صفحه HTML را دانلود می‌ کند. به اندازه گیری TTFB نگاه کنید. اگر بیشتر از ۵۰۰ms بود، سرور شما ضعیف یا بهینه نیافته است. در زیر، نمودار مربوط به سروری کند آمده است که برای پاسخ حدود ۱۰ ثانیه زمان می‌ برد.

آیا به CDN نیاز دارم؟

شبکه دریافت محتوا یا CDN، با ذخیره سازی کپی‌ ای از چیزهای مفید اما ساکن شما (عکس‌ها، CSS، فایل javascript و…) می‌ تواند سرعت وب شما را بالا برده و معطل شدن کاربران شما را کم کند.

با نمودار آبشاری می‌ توانید بفهمید به CDN نیاز دارید یا نه. به اندازه TTFB برای درخواست‌ هایی که مرورگر شما به سرور برای موارد ساکن می‌ فرستد نگاه کنید. برای تعیین اینکه به CDN نیاز دارید یا نه، باید اول موقعیت سرور خود را بدانید. سپس از یک web page test استفاده کنید و یک test را از محلی که از سرور شما دور است نصب کنید. اگر سرور شما در امریکا است، یک test را از اروپا یا آسیا نصب کنید. حالا ردیف مربوط به درخواست‌ های عکس و فایل‌های CSS را روی سرور خود پیدا کرده و به اندازه TTFB نگاه کنید. اگر بیشتر از ۱۵۰ ms بود، به CDN نیاز دارید.