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

سرفصل‌های پست

• 1 پیاده سازی لود تنبل برای تصاویر و ویدیوها
• 2 لود تنبل چگونه کار می‌کند؟
• 3 لود تنبل وردپرس :
  • 3.1 آیا تصاویر و ویدیو‌ها واقعا در کاهش سرعت طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) موثر هستند ؟
• 4 بهبود سرعت لود صفحه از طریق افزونه‌های لود تنبل
  • 4.1 1 – BJ Lazy Load
  • 4.2 2 – Lazy Load XT
  • 4.3 3 – افزونه a3 Lazy Load
  • 4.4 4 – افزونه Rocket Lazy Load
• 5 نتیجه گیری و توصیه‌ها

پیاده سازی لود تنبل برای تصاویر و ویدیوها

به طور کلی میانگین حجم صفحات وب سایت‌ها به همراه تصاویر و ویدیوها 3376 کیلوبایت می‌باشد که بالای ۷۰ درصد آن راHTTP Archive اشغال می‌کند. این مقدار حجم در مرورگر‌ بازدیدکنندگان وب سایت برای مشاهده و دانلود بسیار زیاد است و این حجم با پیشرفت وب سایت و افزایش مقالات و تصاویر بیشتر نیز می‌شود و این افزایش در کاهش سرعت و کاهش رتبه سئو تاثیرگذار است. (برای ارزیابی حجم محتوای سایت خود می‌توانید از ابزارهای سئو و یا از سایت httparchive.orgاستفاده نمایید.)

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

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

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

لود تنبل چگونه کار می‌کند؟

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

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

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

لود تنبل وردپرس :

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

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

آیا تصاویر و ویدیو‌ها واقعا در کاهش سرعت سایت موثر هستند ؟

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

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

بله ، کلمه واو بسیار در این وضعیت مناسب است. حجم صفحه به 1.7 مگابایت افزایش یافت و زمان لود نیز 3 برابر شد .

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

بهبود سرعت لود صفحه از طریق افزونه‌های لود تنبل

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

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

1 – BJ Lazy Load

افزونه BJ Lazy Load یک افزونه بسیار محبوب در بین کاربران وردپرسی می‌باشد و در بیشتر از 40 هزار وب سایت وردپرسی نصب شده و فعال است و بر اساس 60 بازخورد منتقدان ، رتبه 4.1 را از 5 دریافت کرده است.

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

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

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

برای گرفتن سبک‌ترین و بی‌نظیرترین نتیجه ممکن ، من توصیه می‌کنم که یک تصویر تک رنگ و هم‌رنگ با پس زمینه پوسته با فرمت png تهیه کنید.

همچنین شما میتوانید بعضی از class های CSS موجود در فایل html صفحه را نیز در لیست عبور (محروم) قرار دهید تا آن class ها به صورت لود تنبل ، لود نشوند. سپس بعد از اینکار شما میتوانید آن class ها را به فیلم ها و تصاویری که قصدندارید به صورت تنبل لود شوند بدهید تا به صورت عادی لود شوند. در نهایت ، شما می‌توانید مقدار لازم برای نزدیکی برای نمایش تصاویر قبل از دانلود و نمایش را بشناسید.

بیایید بررسی کنیم که با BJ Lazy Load چقدر سرعت وب سایت ما تغییر کرده است.

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

درحالی که شاهد افزایش سرعت وب سایت شده‌ایم ولی حجم وب سایت 0.3 مگابایت افزایش یافته است و از 1.7 مگابایت به 2 مگابایت افزایش داشته است. برای حجم چه اتفاقی افتاده است ؟ با توجه به نظریه ای که داشتیم ، با فعالسازی لود تنبل باید حجم صفحه کاهش یابد و صفحه سبک تر شود . پس از بررسی وضعیت حال حاضر این نتیجه چیزیست که دست یافتم :

به صورت پیش‌فرض، وردپرس برای ارائه تعداد زیادی از اندازه یک فایل‌ تصویری در مرورگر ها از ویژگی‌ای (attribute) به نام srcset برای تصاویر در تگ img استفاده می‌کند. مرورگر از طریق لیستی از اندازه‌ها و لود کوچکترین نسخه از تصویر ، فضای موجود را پر می‌کند. این بدان معناست که اگر شما یک تصویر بزرگ را آپلود کنید ، وردپرس با تکنیک‌های پیش‌فرض خود تصویر را به چند نسخه به اندازه‌های کوچک‌تر تبدیل می‌کند و سپس نسبت به سایز صفحه نمایش و تنظیمات پوسته سایز کوچک تولید شده را برای مرورگر بازدید کننده ارسال می‌کند. مرورگر بازدیدکنندگان کوچک‌ترین تصویر مناسب را براساس میزان پیکسل های دردسترس در مکان قرارگیری تصویر دریافت خواهد کرد.

افزونه BJ Lazy Load رفتار پیش‌فرض وردپرس در مورد تصاویر را به طور کامل تغییر می‌دهد. ویژگی data-lazy-srcset جایگزین ویژگی srcset می‌شود و نتیجه نهایی این است که به جای پایین آوردن اندازه و وضوح تصویر ، تصویر با وضوح و اندازه کامل به صورت تنبل، لود خواهد شد.

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

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

2 – Lazy Load XT

افزونه Lazy Load XT در آزمایشات ما به خوبی ظاهر شد و یکی دیگر از افزونه های خوب لود تنبل وردپرس به حساب می آید. با آماری حدود 1000 نصب فعال مشخصا به اندازه BJ Lazy Load محبوب نیست ولی از نظر رتبه بندی امتیاز 4.9 از 5 امتیاز را آورده است که تنها یک بازخورد 5 امتیاز را به این افزونه نداده بود.

پس از فعالسازی ، افزونه در منو تنظیمات یک زیر منو Lazy Load XT ایجاد می‌کند و شما می‌توانید از آن طریق افزونه را پیکربندی کنید. پس از اولین بررسی دیداری وب سایت متوجه خواهید شد که این افزونه بیشتر از لود تنبل تصاویر و ویدیو‌ها عمل می‌کند. شما علاوه بر لود تنبل می‌توانید فایل‌های جاوااسکریپت و سی اس اس را Minify کنید. کتابخانه های جاوا اسکریپت و سی اس اس را توسط انواع CDN مانند CloudFlare لود کنید و اسکریپت‌ها را به فوتر وردپرس منتقل کنید.

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

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

پس از بررسی این موضوع ، دلیلی برای اینکه چرا لود BJ Lazy Load بهتر از Lazy Load XT یافت نمی‌شد تا اینکه به تصویر پیش‌نمایش قبل از لود تصویر اصلی توجه کردم که این تصویر به علت اینکه ‌به صورت Transparent بود و به همین علت لود تصاویر قبل از نمایش به خوبی صورت نمی‌گرفت و سرور را بیشتر برای لود مشغول می‌کرد. در این افزونه نیز مانند BJ Lazy Load امکان تغییر تصویر پیش‌نمایش وجود دارد و می‌توانید با انتخاب یک تصویر بهتر و بهینه تر کمی سرعت لود را کاهش دهید.

3 – افزونه a3 Lazy Load

افزونه a3 Lazy Load  یکی دیگر از افزونه های پرطرفدار مخزن وردپرس در حوزه لود تنبل می‌باشد. این افزونه حدودا 10 هزار نصب فعال دارد ، و امتیاز 4.7 را از 5 امتیاز با توجه به 40 بازخورد به دست آورده است.

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

زمان لود وب سایت ما دوباره به زیر نیم ثانیه آمد ، این سرعت با توجه به تعداد تصاویر و ویدیو قابل توجه است.

مقایسه نتایج به دست آمده

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

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

به طور کلی 151 کیلوبایت تصاویر ، حجم صفحه را گرفته اند که این مقدار نسبت به واقعیت کم می‌باشد. دو افزونه BJ lazy load و Lazy Load TX حجم صفحه را 2 مگابایت نشان داده‌اند . تصویر زیر نمایانگر آن است که چطور وب سایت با فعال بودن این دوافزونه 2 مگابایت حجم دارد.

سایز کد‌های جاوااسکریپت ، سی اس اس و اچ تی ام ال تقریبا یکسان است. با این حال ، اندازه تصاویر 1.86 مگابایت است، که این اندازه حجم تصاویر با همان رزولوشنی است که آپلود می‌شوند ولی در مقابل در a3 lazy load این حجم 151 کیلوبایت می‌باشد. به نظر شما چه اتفاقی افتاده است؟ همانطور که قبلا گفتم بعد از آپلود تصاویر وردپرس به صورت پیش‌فرض شروع به بهینه سازی و ساخت اندازه های مختلف از تصویر می‌کند و کاربران کوچک‌ترین اندازه مربوط به صفحه نمایش خود را دانلود و مشاهده می‌کنند.

در افزونه‌های BJ lazy load و Lazy Load TX ، بهینه سازی پیش‌فرض تصاویر وردپرس غیرفعال شده است ولی در افزونه a3 Lazy Load تصاویر با توجه به تکنیک بهینه سازی تصاویر پیش‌فرض وردپرس نمایش داده می‌شوند و در نتیجه تصاویر کم حجم تری را مشاهده می‌کنند.

یکی از جالب‌ترین نکات موجود در این مقایسه ، زمان لود صفحه می‌باشد که با افزونه BJ lazy load زمان لود حدودا 100 میلی ثانیه کمتر از a3 Lazy Load می باشد. به همین دلیل من چندین بار از صفحات وب سایت با فعالسازی و غیرفعالسازی هر 3 افزونه آزمایش تست سرعت گرفتم که مطمئن شوم که این نتایج غیرواقعی نباشد. تنها تغییری که در نتایج ایجاد می‌شد تعداد درخواست‌های HTTP بود . در یک نگاه ، به نظر می‌رسد که تعداد درخواست‌های HTTP افزونه BJ lazy load بیشتر باشد. با این حال ، اگر به منوی درختی فایل‌ها نگاهی بیاندازیم ، متوجه دلیل درخواست ها خواهیم شد.

فایل‌های سایت با فعال بودن افزونه BJ lazy load حدودا 20 درخواست از نوع data:image/gif را تولید می‌کند.

این‌ها داده‌های URI هستند نه درخواست های HTTP که در واقع ، به مرورگر می‌گوید که فایل Gif را به صورت محلی (با کد‌های Base 64) لود کند نه به صورت دانلود از سرور. در نتیجه ، افزونه BJ lazy load برای لود صفحه نیازمند 17 درخواستHTTP می‌باشد که این در مقابل a3 Lazy Load که 27 درخواست HTTP برای لود صفحه نیاز دارد سریع تر لود می‌شود و کاملا دلیل مشخصی برای سریع لود شدن صفحات می‌باشد.

افزونه Lazy Load TX یک مقدار بیشتر از BJ lazy load نیازمند درخواست های HTTP می‌باشد که این تعداد درخواست بیشتر بیانگر دلیل دریافت نکردن همان نتایج است.

4 – افزونه Rocket Lazy Load

و چهارمین گزینه استفاده در صورتی که هیچ یک از افزونه‌های بالا خواسته شما را محیا نکرد ، افزونه Rocket Lazy Loadمی‌باشد. افزونه‌ای رایگان از تولید کنندگان افزونه WP Rocket است. در حال حاضر این افزونه بیشتر از 6 هزار نصب فعال دارد و امتیاز 4.2 از 5 امتیاز را دریافت کرده است. اگر به‌دنبال یک افزونه لود تنبل ساده و با سرعتی خوب می‌گردید ، یکی از بهترین انتخاب‌های شما این افزونه است. این افزونه تنظیماتی را بر روی تصاویرشاخص ، تمامی تصاویر موجود در مقالات و ابزارک‌ها، آواتار‌ها و شکلک‌ها ایجاد می‌کند.

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

نتیجه گیری و توصیه‌ها

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

• اگر شما تصاویرتان را قبل از آپلود بهینه سازی نمی‌کنید و حتما هم به آن‌ها نیاز دارید ، بهتر است که از افزونه a3 Lazy Load استفاده کنید ، زیرا این افزونه به شما تصاویری بهینه شده تحویل خواهد داد.
• اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و به دنبال این هستید که با حداقل تلاش بهترین تحویل ممکن را به کاربر ارائه دهید ، با افزونه BJ lazy load به هیچ مشکلی بر نمی‌خورید. افزونه Rocket Lazy Load نیز دیگر انتخاب شما می‌تواند باشد.
• اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و قصد دارید که علاوه بر لود تنبل ، بتوانید گزینه‌های اضافه‌تری مانند کوچک‌تر کردن فایل‌های جاوااسکریپت و سی اس اس و همچنین تغییر مکان آنها به فوتر را داشته باشید ، بهتر است که از افزونه Lazy Load TX استفاده کنید.

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

مقاله جامع نحوه بهینه سازی تصاویر برای افزایش سرعت سایت

سرفصل‌های پست

• 1 نحوه بهینه سازی تصاویر برای افزایش سرعت وب سایت
• 2 مزایای قالب بندی تصاویر
• 3 نحوه بهینه سازی تصاویر برای وب و عملکرد بهتر وب سایت
  • 3.1 انتخاب فرمت فایل تصویری صحیح
  • 3.2 کیفیت و سایز فشرده سازی
  • 3.3 متد بهینه سازی lossy و lossless
  • 3.4 ابزار‌ها و نرم افزار‌های بهینه سازی تصاویر
  • 3.5 تغییر اندازه تصاویر برای مقیاس بندی
• 4 افزونه های بهینه سازی که می‌توانید استفاده کنید
  • 4.1 افزونه Imagify Image Optimizer
  • 4.2 افزونه ShortPixel Image Optimizer
  • 4.3 افزونه Optimus Image Optimizer
  • 4.4 افزونه WP Smush
  • 4.5 افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)
  • 4.6 افزونه ImageRecycle
• 5 تاثیر بهینه سازی تصاویر بر روی وب
  • 5.1 تصاویر JPEG بهینه سازی نشده
  • 5.2 تصاویر JPEG بهینه سازی شده
• 6 استفاده از فرمت SVG
• 7 بهترین روش‌ها

نحوه بهینه سازی تصاویر برای افزایش سرعت وب سایت

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

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

مزایای قالب بندی تصاویر

در ابتدا بهتر است که پاسخ این سوالات را بدانیم : چرا باید تصاویر وب سایتمان را قالب بندی کنیم ؟ مزایای این کار چیست ؟

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

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

در این‌جا نگاهی به مزایای اصلی بهینه سازی عکس‌ها می‌پردازیم:

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

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

نحوه بهینه سازی تصاویر برای وب و عملکرد بهتر وب سایت

هدف اصلی در بهبود تصاویر سایت ، پیدا کردن تعادل بین کمترین حجم و بهترین کیفیت قابل قبول است. تقریبا برای روش‌های بهینه سازی بیشتر از یک راه وجود دارد. یکی از بهترین راه‌های موجود انجام بهینه سازی در تصاویر ، فشرده سازی عکس قبل از آپلود در سایت می‌باشد که در بیشتر اوقات در نرم‌افزارهایی مانند Adobe Photoshop و Affinity Photo امکان پذیر است. بعضی از بهینه سازی‌ها نیز توسط افزونه‌ها انجام می‌شوند که در ادامه مقاله به آنها می‌پردازیم.

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

انتخاب فرمت فایل تصویری صحیح

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

• فرمت PNG – با کیفیت‌ترین نوع تصویر را به شما تحویل می‌دهد ولی با حجمی بسیار بالا. برای فشرده سازی تنها از lossless استفاده می‌کند. البته گاهی فرمت PNG از بقیه فرمت‌ها حجم کمتر و کیفیت بهتری دارد و باید تست کرد، مخصوصا در تصاویری که دارای تعداد رنگ کمتر هستند.
• فرمت JPEG – از فشرده سازی lossy و lossless استفاده می‌کند . شما می‌توانید سطح کیفیت تصاویرتان را تا دریافت کیفیتی خوب و حجمی قابل قبول کنترل کنید.
• فرمت GIF – تنها از 256 رنگ استفاده می‌کند. بهترین انتخاب برای تصاویر متحرک است و تنها از نوع فشرده سازی lossless استفاده می‌کند.

فرمت‌های دیگری نظیر WebP و JPEG XR نیز وجود دارد ، ولی متاسفانه توسط تمامی مرورگرها پشتیبانی نمی‌شوند. در حالت ایده‌آل، شما برای تصاویر حجیم و پر از رنگ بهتر است که از فرمت JPG (JPEG) استفاده کنید و برای تصاویر ساده، شفاف (Transparent) و یا عکس هایی با تعداد رنگ کمتر از فرمت PNG استفاده کنید.

کیفیت و سایز فشرده سازی

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

نکته : تصویر اصلی قبل از فشرده سازی حجمی بالغ بر 2.06 مگابایت را داشته است.

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

بنابراین ما تصویر را دوباره فشرده سازی کردیم ولی این بار درجه فشرده سازی را در حالت معمولی (Medium در فتوشاپ) قرار دادیم. کیفیت تصویر قابل قبول و حجم آن نیز 132 کیلوبایت شد که برای یک تصویر با چنین کیفیت بالایی قابل قبول است. این تصویر حدودا 4x کوچک‌تر از تصویر ابتدایی با فشرده سازی کم و 8x کوچک‌تر از تصویر اصلی می‌باشد.

به طور معمول ، تصاویر ساده PNG باید 100 کیلوبایت یا کمتر باشند تا وب سایت بهترین عملکرد را داشته باشد.

متد بهینه سازی lossy و lossless

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

Lossy : یک فیلتر می‌باشد که هنگام بهینه سازی بخشی از داده‌های تصویر را حذف می‌کند. این متد تصویر را ضعیف می‌کند و باید هنگام بهینه سازی توجه لازم را در کیفیت تصاویر داشته باشید. حجم تصاویر در این متد بسیار کاهش پیدا می‌کند. در نرم‌افزار‌هایی مانند Adobe Photoshop ، Affinity Photo و دیگر  نرم افزار‌های موجود می‌توانید با انجام تنظیماتی از این متد استفاده کنید و همچنین کیفیت تصویر را کنترل کنید. برای مثال در Adobe Photoshop هنگام گرفتن خروجی JPEG از شما متد خروجی را درخواست می‌کند که می‌توانید از متد lossy compression و lossless compression استفاده کنید.

Lossless : یک فیلتر می‌باشد که هنگام بهینه سازی، داده‌ها را فشرده سازی می‌کند. این متد کیفیت تصویر را کاهش نمی‌دهد ولی تصاویر نباید از قبل فشرده سازی شده باشد تا به بهترین روش عمل کند.  با نرم افزار‌هایی مانند Adobe Photoshop ، Affinity Photo و … و همچنین بعضی از افزونه‌های وردپرس نیز با متد Gzip این کار را انجام می‌دهند.

بهتر است که برای هر تصویر تکنیک‌های فشرده سازی مختلف را بررسی کنید تا بهترین کیفیت و حجم را پیدا کنید. اگر نرم افزار‌های شما گزینه ذخیره سازی مخصوص وب (Save for Web در فتوشاپ منوی File) را دارند ، مطمئن شوید که به صورت وب ذخیره سازی کنید. این گزینه در بیشتر ویراستار‌های تصویر موجود است و به شما اجازه می‌دهد که به اندازه مورد نیاز تصویر را بهینه سازی کنید. شما در فشرده سازی مقداری کیفیت تصویرتان را از دست می‌دهید ، بنابراین باید توجه کنید که این مقدار را کنترل کنید و بهترین را انتخاب کنید.

ابزار‌ها و نرم افزار‌های بهینه سازی تصاویر

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

بعضی از ابزار‌ها و نرم افزار‌های خوب برای بهینه سازی تصاویر :

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• TinyPNG
• Trimage

تغییر اندازه تصاویر برای مقیاس بندی

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

بخش رسانه وردپرس به صورت پیش‌فرض ریز تصویرهایی (thumbnails) با توجه به تنظیمات وردپرستان می‌سازد. با این‌حال ، تصویر اصلی بدون تغییر سایز و به همان شکل باقی می‌ماند. اگر می‌خواهید در حجم وب سایتتان صرفه جویی کنید و تصاویر اصلی را ذخیره سازی نکنید می‌توانید از افزونه رایگانی به نام Imsanity استفاده کنید.

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

افزونه های بهینه سازی که می‌توانید استفاده کنید

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

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

افزونه Imagify Image Optimizer

افزونه Imagify توسط تیم سازنده Wp Rocket ساخته شده است، که افزونه‌هایی بسیار عالی در خصوص بهینه سازی سرعت وب سایت ارائه می‌کند. این افزونه با Woocommerce ، WP Retina و NextGen Gallery سازگار است. همچنین با ویژگی Bulk (بهینه سازی تعداد بالا) می‌توانید تصاویرتان را با 3 سطح مختلف فشرده سازی ، عادی (نرمال) ، خشونت آمیز (aggressive) ، فوق العاده (ultra) فشرده سازی کنید.

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

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

افزونه ShortPixel Image Optimizer

افزونه ShortPixel Image Optimizer یک افزونه رایگان است که به شما این امکان را می‌دهد که در هر ماه 100 تصویر را بهینه سازی کنید و چندین نوع فرمت مختلف مانند JPEG ، PNG ، GIF ، WebP و همچنین فرمت PDF را پشتیبانی می‌کند و برای بهینه سازی از هر دو متد lossy و lossless می‌تواند استفاده کند. این افزونه می‌تواند تصاویر CMYK را به RGB تبدیل کند و با انتقال تصاویر شما به فضای ابری و سپس بازگرداندن آنها به وب سایت وردپرسی شما در بهینه سازی پردازنده و حافظه RAM هاست شما نیز کمک می‌کند و همچنین یک نسخه پشتیبان از تصویر اصلی شما نیز تهیه می‌کند که در صورتی که از کیفیت راضی نبودید ، تصویر اصلی را بازگردانید. در بهینه سازی تصاویر در این افزونه محدودیت حجمی وجود ندارد.

افزونه Optimus Image Optimizer

افزونه Optimus Image Optimizer از متد lossless برای بهینه سازی تصاویر شما استفاده می‌کند. همانطور که در بالا گفتیم در متد lossless هیچ اطلاعاتی از تصویر شما پاک نمی‌شود. این افزونه از افزونه‌های WooCommerce ، Multi-Site پشتیبانی می‌کند و یک بخش bulk بسیار خوب دارد تا تصاویر آپلود شده قدیمی را نیز بهینه سازی کند. این افزونه همچنین ازWP Ratina‌ نیز پشتیبانی می‌کند.

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

افزونه WP Smush

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

در نسخه رایگان می‌توانید ۵۰ تصویر را در حال عادی بهینه کنید و اگر نیاز به بهینه سازی دستی داشتید نیز می‌توانید هر تصویری که دوست دارید را به صورت دستی بهینه سازی کنید. Smush می‌تواند فرمت‌های JPEG ، PNG و GIF را بهینه سازی کند . در حالت رایگان Smush تصاویر زیر ۱ مگابایت را بهینه سازی می‌کند.

افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)

افزونه TinyPNG که تحت فضای ابری TinyPNG و TinyJPG می‌تواند ماهیانه ۱۰۰ تصویر را برای شما بهینه سازی کند نیز یکی از بهترین‌های وردپرس می‌باشد و می‌تواند تصاویر PNG و JPEG شما را بهینه سازی کند.

این افزونه به طور خودکار تصاویر جدید و قدیمی وردپرس شما را بهینه سازی می‌کند. این افزونه همچنین ساختار CMYK را به RGB تبدیل می‌کند، به گفته سازنده این پلاگین تصاویر JPEG را تا ۶۰ درصد و تصاویر PNG را تا ۸۰ درصد بهینه سازی می‌کند و هیچ تغییری در کیفیت اصلی تصویر ایجاد نمی‌شود. این افزونه محدودیتی در حجم تصاویر ندارد صرفا با یک ایمیل می‌توانید از خدمات این افزونه استفاده نمایید.

افزونه ImageRecycle

افزونه ImageRecycle ، افزونه ایست که تصاویر و فایل‌های PDF شما را به صورت خودکار بهینه سازی می‌کند. این افزونه نه تنها که روی بهینه سازی تصاویر بلکه در بهینه سازی فایل‌های PDF نیز تمرکز دارد. یکی از بهترین امکانات این افزونه امکان تعیین کردن کم‌ترین حجم تصویر برای بهینه سازی است. برای مثال ، اگر نمی‌خواهید که تصاویر با حجم کمتر از ۸۰ کیلوبایت بهینه‌ سازی شوند کافیست که ۸۰ کیلوبایت را حداقل حجم بهینه سازی قرار دهید. و این باعث می‌شود که شما از بیش از حد فشرده نشدن تصاویرتان اطمینان یابید. این افزونه همچنین شامل Bulk برای تصاویر قدیمی (امکان بهینه سازی گروهی عکس های از قبل آپلود شده) و همچنین امکان تغییر اندازه خودکار نیز می‌باشد. نکته : این افزونه یک تست ۱۵ روزه به کاربران خود هدیه می‌دهد ولی به طور کلی افزونه‌ای تجاری به حساب می‌آید و برای استفاده از آن باید هزینه ای بپردازید. در این افزونه تصاویر در سرور های واسطه ای سازنده آپلود و بهینه سازی می‌شوند. برای خرید این افزونه نیازی نیست که به صورت اشتراکی هزینه پرداخت کنید ولی باید بسته‌هایی مخصوص خریداری کنید که در آن تعداد تصاویری که شما مجاز به فشرده سازی هستید معین شده است که بسته ‌ها از ۱۰ دلار برای ۱۰ هزار تصویر شروع می‌شود.

تاثیر بهینه سازی تصاویر بر روی وب

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

تصاویر JPEG بهینه سازی نشده

در ابتدا ما ۶ تصویر بهینه سازی نشده را در وب سایت آپلود کردیم که تمامی آن‌ها سایزی بیشتر از ۱ مگابایت داشتند. این آزمایش را ما ۵ بار تکرار کردیم تا از تصادفی نبودن نتایج اطمینان یابیم. همانطور که در زیر مشاهده می‌کنید ، زمان لود وب سایت ما ۱.۵۵ ثانیه در حالتی که صفحه ما ۱۴.۷ مگابایت حجم دارد می‌باشد.

تصاویر JPEG بهینه سازی شده

حال پس از بهینه سازی تصاویر با استفاده از افزونه Imagify و حالت خشونت آمیز ، همانطور که مشاهده می‌کنید ، زمان لود صفحه ما ۴۷۶ میلی ثانیه و حجم صفحه ۲.۹ مگابایت شده است . ( این بررسی را نیز ۵ بار تکرار کردیم تا اطمینان کامل حاصل کنیم)

پس از مقایسه نتایج متوجه شدیم که زمان لود وب سایت ما ۵۴.۸۸ درصد و حجم صفحه ۸۰.۲۷ درصد کاهش یافته است.

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

با بهینه سازی تصاویر شما خیلی راحت می‌توانید خطاهای Optimize Images و Serve scaled images در زمان تست سرعت لود صفحه در ابزارهای Google PageSpeed Insights یا GTmetrix را نیز برطرف کنید.

استفاده از فرمت SVG

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

در زیر دلایل استفاده از SVG ها را به شما می‌گوییم:

• فایل‌های SVG در ویرایشگر‌های تصاویر و مرورگرها امکان تغییر مقیاس دارند و برای طراحان وب و گرافیک کاران رویایی طراحی شده است.
• گوگل همانند PNG و JPEG ، فایل‌های با فرمت SVG را نیز ایندکس می‌کند و این نگرانی شما را بابت سئو برطرف می‌کند برخلاف تصاویر با تکنولوژی base64 که آن‌ها تا این تاریخ ایندکس نمی‌کند.
• فایل SVG در بیشتر اوقات (نه همیشه) حجمی کمتر از فایل‌های JPEG و PNG دارند. این مهم باعث افزایش سرعت لود وب سایت می‌شود.

در زیر تفاوت ۳ فرمت PNG و JPEG و SVG را در تصاویر وکتور(برداری) می‌بینید.

فرمت JPEG (پس از بهینه سازی 81.4 کیلوبایت)

فرمت PNG (پس از بهینه سازی 85 کیلوبایت)

فرمت SVG ( پس از بهینه سازی 6 کیلوبایت)

همانطور که در بالا دیدید ، تصویر SVG ساده ما حدودا ۹۲.۵۱ درصد از فایل JPG و همچنین حدودا ۹۲.۸۳ درصد نیز از PNGکم حجم تر است.

بهترین روش‌ها

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

• تا جایی که ممکن است از تصاویر وکتور به جای تصاویر PNG و JPEG استفاده کنید.
• از CDN برای افزایش سرعت لود تصاویر توسط کاربران در هرجای جهان استفاده کنید.
• تصاویرتان را با استفاده از فشرده سازی Gzip ، بهینه سازی کنید.
• بخش‌های غیر ضروری تصاویر را حذف کنید.
• بخش‌های سفید تصاویر را پاک کنید و توسط CSS آن‌ها را بسازید.
• از افکت‌های CSS3 تا جای ممکن استفاده کنید.
• تصاویرتان را با ابعاد خودشان در html و css سایت لود کنید (اشاره به خطای serve scaled images).
• برای نوشتن متن بر روی تصاویر از وب فونت‌ها استفاده کنید. (آن‌ها عکس را بهینه تر می‌کنند و امکان تغییر اندازه را در تصاویر و نوشته محیا می‌کنند)
• از تصاویر شطرنجی تنها در بخش‌هایی که اشکال و جزئیات وجود دارد استفاده کنید.
• از bit-depth برای کاهش پلات رنگ استفاده کنید.
• در جاهایی که می‌توانید از متد lossy برای فشرده سازی استفاده کنید.
• در صورت نیاز به انیمیشن از GIF استفاده کنید.
• برای پیدا کردن بهترین تنظیم در تصاویر با فرمت‌های مختلف، آن‌ها را آزمایش کنید.
• اگر بهترین کیفیت و بهترین جزئیات را نیاز دارید از فرمت PNG استفاده کنید.
• برای تصاویر اصلی و اسکرین شات‌ها از JPEG استفاده کنید.
• مقیاس تصاویر را نسبت به صفحه نمایش تنظیم کنید تا تعداد پیکسل‌ها کاهش یابد.
• هر Metadata غیر ضروری را حذف کنید.
• عملیات فشرده سازی را تا جای ممکن خودکار کنید.
• در بعضی موارد شما نیازمند لود تنبل برای نمایش تصاویر هستید (مقاله جامع lazy loading چیست را مطالعه نمایید).
• در ابزاری مانند photoshop تصاویر را به صورت Save for Web خروجی بگیرید، این گزینه در سربرگ File موجود است.

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

CDN چیست و دلایل استفاده از CDN در وب سایت

دلایل استفاده از سرویس CDN در وب سایت

به عنوان مدیر یک وب سایت شما همیشه به دنبال افزایش سرعت وب سایت خودتان برای بالا بردن رضایت کاربرانتان یا همان تجربه کاربری هستید. یکی از جدیدترین و مدرن‌ترین مدل‌های افزایش سرعت سایت در حال حاضر استفاده یک سرویس CDN می‌باشد. (CDN‌ به معنای شبکه تحویل محتوا یا شبکه توزیع محتوا یاد می‌شود).

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

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

۴۰ درصد کاربران اگر وب سایتی بیشتر از ۳ ثانیه لود شود آن رها می‌کنند. (این یک شاخص جهانی‌ است ولی در ایران با توجه به سرعت بسیار پایین اینترنت و حجم بالای وب سایت ها این شاخص تا ۷ ثانیه پیش‌بینی می‌شود).

شبکه تحویل محتوا (CDN) چیست؟

کلمه CDN مخفف کلمه content delivery network به معنای شبکه تحویل محتوا (شبکه توزیع محتوا) می‌باشد. این سرویس یک شبکه از سرور‌ها در سراسر جهان می‌باشد که برای میزبانی اطلاعات استاتیک (و گاهی داینامیک) وب سایت شما نظیر تصاویر، ویدیو‌ها، فایل‌های CSS و فایل‌های جاوا‌اسکریپت طراحی شده است. توجه داشته باشید که وقتی از میزبانی صحبت می‌کنیم منظور میزبانی وب سایت شبیه هاست‌های اشتراکی یا اختصاصی سایت شما نیست. CDN به طور کامل یک سرویس جداگانه میزبانی می‌باشد. سرویس‌های CDN جایگزین هاست‌های میزبانی شما نیست ولی راهی اضافه برای بهبود سرعت سئو سایت می‌باشد.

سرویس CDN چگونه کار می‌کند؟

سرویس CDN دقیقا چگونه کار می‌کند؟ خب، به عنوان مثال ، وقتی شما قصد خرید یک هاست میزبانی وب را دارید ، می‌بایست مکان یک دیتاسنتر فیزیکی  مثل آلمان، فرانسه، امریکا، ایران و غیره را انتخاب کنید. به عنوان نمونه فرانسه را برای میزبانی انتخاب کردیم. این به معنی آن است که مثلا وب سایت شما توسط سرور‌هایی واقع در پاریس میزبانی می‌شود. حال در نظر بگیرید فردی در ایران بخواهد وارد وب سایت ما شود و فردی نیز از فرانسه وارد وب سایت ما شوید، به علت مکان قرارگیری سرور و همچنین انتقال داده‌ها از مبدا به کشور مقصد، زمان لود وب سایت در ایران بیشتر از فرانسه خواهد بود. این چیزی است که به آن لِی‌تنسی یا تاخیر گفته می‌شود (latency). لی‌تنسی به زمان یا تاخیری گفته می‌شود که برای انتقال اطلاعات در شبکه‌ها لازم است. بنابراین هرچه فاصله کاربر از مکان قرارگیری سرور وب سایت دورتر باشد لی‌تنسی نیز بیشتر می‌شود.

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

کاربران وردپرسی در ابتدا برای استفاده از CDN بی‌میلی نشان می‌دهند. در اینجا ما در ۳ مرحله خیلی ساده نحوه عملکرد CDNو همچنین نحوه فعالسازی آن در وب سایتتان را آموزش می‌دهیم.

مرحله اول :

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

مرحله دوم :

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

مرحله سوم :

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

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

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

در زیر تعداد اندکی از مزایای بسیار زیاد CDN ها را بیان می‌کنیم.

1 – بهبود عملکرد

بهبود عملکرد یکی از مهم‌ترین دلایل استفاده از این سرویس می‌باشد. با این سرویس هربار که وب سایت را لود می‌کنید سرویس از نزدیک ترین سرور با حداکثر سرعت داده‌ها را دریافت کند و نرخ فرار کاربران یا bounce rate را کاهش دهد (اطلاعات بیشتر درباره bouce rate را میتوانید در مقاله bounce rate چیست بخوانید) و برای شما بازدیدکنندگانی وفادار پیدا کند. و این به معنای تغییر ساده‌ای در تجربه کاربری نیست. آخرین باری که وارد وب سایتتان شدید و وب سایت دیر لود شد چه زمانی بود؟‌ این چیزی است که دوست دارید براتون خاطره شود و همیشه سرعتی عالی برای لود شدن صفحه داشته باشید. این سرعت به همین راحتی‌ها هم به دست نمی‌آید. در زیر آماری معتبر از بزرگان این صنعت براتون آماده کردیم که بهتر است به آن توجه کنید :

• به ازای هر یک ثانیه تاخیر در لود داده‌های وب سایت ۷ درصد باعث افزایش زمان لود می‌شوید. (منبع: Kissmetrics)
• شبکه‌های خبری به علت سرعت پایین به ازای هر ثانیه تاخیر ۱۰٪ درصد از کاربران را از دست می‌دهند. (منبع: Creative Bloq)
• بیشتر از ۵۳٪ کاربران موبایلی وب سایت شما اگر وب سایت شما بالای ۳ ثانیه لود شود، وب سایت شما را کنار خواهند زد. (منبع: DoubleClick)
• وب سایت AliExpress با کاهش ۳۶ درصدی زمان لود وب سایت خود توانست ۱۰.۵ درصد سفارشات خود را افزایش دهد و همچنین ۲۷ درصد به مکالمات بین کاربران خود اضافه کند. (منبع: Akamai)

تمامی این مشکلات و نکات توسط CDN امکان پذیر است.

کاهش TTFB

ما قبلا در بالا ذکر کردیم که اتصال یک CDN به وب سایت وردپرسی شما باعث می‌شود که لی‌تنسی وب سایت شما با کم شدن مسافت فیزیکی کاربران نسبت به سرور کاهش یابد. همچنین می‌تواند باعث کاهش زمان دست‌یابی شما به اولین بایت وب سایت شود.(TTFB یا time to first byte)

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

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

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

TTFB وب سایت بدون CDN

ما در ابتدا یک تست را بدون فعال‌سازی CDN انجام دادیم که در نتیجه تست زمان لود وب سایت ۱.۴۵ ثانیه نمایش داده شد که از این زمان ۱۳۶ میلی ثانیه اش به TTFB وب سایت مربوط بود.

TTFB وب سایت پس از فعال‌سازی CDN

پس از فعال‌سازی CDN و تست دوباره وب سایت، همانطور که مشاهده می‌کنید زمان لود وب سایت ۷۸۸ ثانیه و TTFB وب سایت نیز 37 میلی‌ثانیه شده است. حال وقت آن است که بگویید، واو CDN چه تغییری ایجاد کرد

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

سرفصل‌های پست

• 1 ارزیابی دقیق سرعت لود وب سایت با ابزار Pingdom
• 2 ابزار Pingdom
• 3 تحلیل آبشاری با استفاده از ابزار تست سرعت Pingdom
  • 3.1 نگاهی کوتاه به Pingdom
  • 3.2 بینش عملکرد (Pingdom Performance Insights)
  • 3.3 کد‌های پاسخ
  • 3.4 حجم محتوا و درخواست برای هر محتوا
  • 3.5 حجم محتوا و درخواست برای دامنه
  • 3.6 چارت آبشاری
• 4 اطلاعات پیکربندی وب سایت مورد مطالعه
  • 4.1 معماری
  • 4.2 افزونه‌های وردپرس
• 5 خلاصه

ارزیابی دقیق سرعت لود وب سایت با ابزار Pingdom

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

ابزار Pingdom

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

ابزار Pingdom امکان تست وب سایتتان را از ۵ مکان مختلف می‌دهد، که لیست آن‌ها در زیر آورده شده است:

• Dallas, Texas, USA
• Melbourne, Australia
• New York City, New York, USA
• San Jose, California, USA
• Stockholm, Sweden

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

تحلیل آبشاری با استفاده از ابزار تست سرعت Pingdom

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

نگاهی کوتاه به Pingdom

هنگامی که شما وب سایت وردپرس خود را در Pingdom وارد می‌کنید، Pingdom به شما یک درجه عملکرد، زمان لود، حجم کلی وب سایت و تعداد درخواست‌ها را نشان می‌دهد می‌توان گفت ساختاری شبیه به سایت GTmetrix  دارد و اگر مقاله آنالیز Gtmetrix را مطالعه کرده باشید به چنین ویژگی‌هایی نیز اشاره کردیم. به عنوان مثال، در زیر ما وب سایت perfmatters.io را مورد بررسی قرار دادیم . همانطور که می‌بینید در اولین تست وب سایت درجه ۱۰۰ را از ۱۰۰ نمره به دست آورد و در زیر ۹۰۰ میلی‌ثانیه لود می‌شود. همانطور که مشاهده می‌کنید این وب سایت از ۹۶ درصد وب سایت‌های تست شده در این ابزار سریع‌تر است.

pingdom

ما یک آزمایش دیگر بر روی این وب سایت انجام دادیم که نتیجه آن لود ۴۹۱ ثانیه‌ای شد. چه اتفاقی برای وب سایت افتاد؟ این اتفاق هنگامی که چندین بار یک وب سایت را در Pingdom آزمایش می‌کنید اتفاق می‌افتد که دلیل آن وجود کش‌ در مرورگر کاربر، سرور و DNS می‌باشد. برای درک بهتر این امر به بخش تحلیل آبشاری مراجعه فرمایید.

آیا می‌خواهید که نتیجه بهتری در آزمایشات Pingdom داشته باشید؟ با توجه به نوع وب سایت شما و نوع پیکربندی آن هیچ تضمینی در اینکه شما درجه عملکرد ۱۰۰ را از ۱۰۰ نمره بگیرید نیست ولی با صرف چندین ساعت وقت برای بهینه سازی وب سایتتان می‌توانید بهبود رتبه را از امروز شروع کنید. در بعضی از مواقع تجربه کاربری ممکن است جای چیز‌هایی که خواندید را پر‌کند و شما در بخش هایی نیازی به بهینه سازی محتوا نداشته باشید. هیچ وقت تجربه کاربری (UX) را فراموش نکنید. اما مطمئن باشید که با آموزشی که ما در زیر به شما می‌دهیم می‌توانید کلیه مراحل رساندن وب سایت به نتیجه‌ای مانند نتیجه بالا را یاد بگیرید.

بینش عملکرد (Pingdom Performance Insights)

بخش بینش عملکرد (همان Insights) ابزار Pingdom، یکی از بخش‌های بسیار مهم و کمک کننده در این ابزار می‌باشد. تمامی اطلاعات گنجانده شده در این بخش با توجه به قوانین بینش عملکرد گوگل (Insights) می‌باشد. به طور کلی،‌ اگر شما بتوانید این بخش را در وب سایت خود بهبود دهید، باید شاهد کاهش زمان لود وب سایت خود باشید.

Leverage Browser Caching

یکی از رایج‌ترین مشکلات افراد در هنگام آزمایش وب سایت در ابزار‌های تست سرعت رویارویی با خطای Leverage Browser caching می‌باشد. این خطا به علت وجود مشکل HTTP Cache header در سرور شما می‌باشد. برای حل این مشکل به آموزش حل مشکل Leverage Browser Caching وب سایت سئوراز مراجعه کنید.

Riove Query Strings

یکی دیگر از مسائل رایج موجود در آزمایشات مورد Riove Query Strings می‌باشد. فایل‌های CSS و JS در هنگام لود شدن در فایل HTML وب سایت ورژن های خود را نیز لینک‌ها قرار‌ می‌دهند. مانند :‌domain.com/file.min.css?ver=4.5.3 .بعضی از سرور‌ها و پروکسی‌ها امکان کش کردن این فایل‌ها وقتی این‌گونه لینک می‌شوند ندارند. پس با حذف ورژن از لینک‌ها شما می‌توانید سیستم کش وب سایت خود را بهبود بخشید. برای حل این مشکل می‌توانید از افزونه رایگان Query Strings Riover در وردپرس استفاده کنید تا به صورت خودکار عملیات حذف ورژن‌ها انجام شود. در غیر اینصورت برای حل این مشکل می‌توانید به آموزشحل مشکل Riove Query Strings وب سایت سئوراز مراجعه فرمایید.

Serve static content from a cookieless domain

در بیشتر مواقع وب مستر‌ها به علت وجود پروتکل‌های جدیدی مثل HTTP/2 این خطا را نادیده می‌گیرند. اضافه کردن یک اتصال جدید همیشه نسبت به زمانی که همه ساختار را در یک اتصال بارگیری می‌کنید، هزینه کمتری برایتان خواهد داشت. با این حال، ما دو راه برای حل این مشکل داریم که یک استفاده از یک ارائه دهنده CDNو دیگری اضافه کردن یک دامنه یا زیردامنه (SubDomain) به وب سایت است.

Parallelize Downloads Across Hostnames

این مشکل به علت وجود محدودیت در HTTP/1.1 و اتصال همزمان مرورگر به وب سایت می‌باشد ، که در بیشتر سرور‌ها ۶ اتصال است. این هشدار بیشتر در وب سایت هر پربازدید و پر‌درخواست نمایان می‌شود. در گذشته تنها کاری که می‌توانستیم انجام دهیم عمل Call Domain Sharding بود. با این حال، اگر از سرویس CDN استفاده می‌کنید و سرویس CDN شما ازHTTP/2 پشتیبانی می‌کند، می‌توانید این هشدار را نادیده بگیرید زیرا در حال حاضر دانلود‌های شما در چندین سرور تقسیم بندی می‌شود.

Specify a Vary: Accept-Encoding header

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

Specify a cache validator

این هشدار به کش HTTP header وب سایت مربوط می‌شود که باید در سرور اصلی وب سایت بر روی اعتبار و زمان کش اعمال شود. اگر header ها لود نشوند، مرورگر درخواست دیگری را ارسال می‌کند و تا دریافت نهایی header وب سایت لود نمی‌شود و این باعث افزایش زمان لود وب سایت می‌شود. این header ها شاملlast-modified ،‌ETag، Cache-Control وانقضای کش می‌شود. برای حل این مشکل مقاله Specify a cache validator وب سایت سئوراز را بررسی کنید.

کد‌های پاسخ

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

• کد 200 : “همه چیز بدون مشکل اجرا می‌شود” ، این کد زمانی به نمایش در می‌آید که نتایج دقیقا همان نتایجی باشد که از وب سایت انتظار می‌رود.
• کد 301 : “بخش درخواست شده به صورت دائم منتقل شده است” ، این کد هنگامی نمایش داده می‌شود که صفحه درخواست شده به صورت دائم به بخشی دیگر منتقل شده باشد.
• کد 404 : “صفحه درخواست شده یافت نشد” ، یکی از رایج ترین کد‌های پاسخ در وب سایت خطای کد ۴۰۴ می‌باشد. این خطا به معنای آن است که صفحه درخواست شده وجود ندارد و سرور درصورت وجود چنین صفحه‌ای از وجودش با خبر نیست.

حجم محتوا و درخواست برای هر محتوا

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

با مراجعه به آخرین HTTP Archive متوجه می‌شویم که ۶۴ درصد صفحات وب را تصاویر تشکیل داده‌اند. این موضوع را معمولا در بیشتر جاها مشاهده می‌کنیم. ولی در مورد زیر متوجه می‌شوید که همیشه هم اینطور نیست. در نمونه زیر نزدیک به ۴۶ درصد از ساختار به دسته Other یا دیگر اختصاصی داده شده است که بیشتر این ساختار مربوط به فونت‌های گوگل و font awesome می‌باشد. فونت‌های وب در بخش دیگر تست Pingdom قرار می‌گیرند.

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

حجم محتوا و درخواست برای دامنه

بخش حجم محتوا (Content size by domain) و درخواست نسبت به دامنه (Requests by domain) یکی از بهترین راه‌ها برای یافتن ساختار‌هاییست که خارج از وب سایت شما لود می‌شوند.

در مثال زیر شما مشاهده می‌کنید که ما همه ساختار وب سایتمان را از CDN لود می‌کنیم. سپس یک فایل HTML وب سایت می‌ماند که از خود وب سایت لود می‌شود و یک لینک خارجی نیز به وب سایت Google Analytics متصل شده است. بسته به نوع وب سایت، شما ممکن سرویس‌های خارجی مختلفی اعمم از فیس‌بوک، اینستاگرام، توییتر، تلگرام، تبلیغات و غیره را به وب سایت خود متصل کنید.

به طور کلی، هرچه درخواست‌های خارجی وب سایت شما کمتر باشد، بهتر است. زیرا، هر درخواست خارجی در لی‌تنسی (latency) شما تاثیر می‌گذارد، مرورگر باید DNS اش را بررسی کند، TLS را به تاخیر می‌اندازد وغیره. پس بهتر است که درخواست‌ها را تاجای ممکن کوتاه کنیم و ساختار‌ها را از یک سرور فیزیکی یا CDN لود کنیم. یکی از بهترین مثال‌ها فونت Awesome می‌باشد. به‌جای اینکه بیاییم و از لینک خارجی آن را لود کنیم بهتر است که مستقیم آن را دانلود کنیم و از سرور خودمان لود کنیم، ما در مقاله رفع ارور Reduce DNS lookups به شکل بسیار کاملی درباره این موضوع پرداختیم.

چارت آبشاری

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

DNS (صورتی)

DNS چیست؟ خب، فکر کنم شبیه یک دفتر تلفن بتوانیم آن را بیان کنیم. در شبکه به آن نام سرور دامنه (Domain Name Server) می‌گویند که در خود تمامی اطلاعات مربوط به سرور وب سایت و آی پی سرور را در خود نگهداری می‌کند. هنگامی که شما در Pingdom وب سایت خود را بررسی می‌کنید، این وب سایت در ابتدا به سرعت شروع به بررسی DNS وب سایت شما می‌کند و کوئری‌های مربوط به دریافت اطلاعات IP شما را ایجاد می‌کند. این بررسی در بعضی اوقات طولانی مدت طول می‌کشد و این به فرآیند DNS lookups گویند.

هنگامی که وب سایت خود را چند بار توسط Pingdom بررسی می‌کنید،‌ این ابزار DNS شما را در خود کش کرده و به علت اینکه IP شما ثابت است دیگر نیازی ندارد که دوباره DNS شما را بررسی کند. به همین دلیل است که هنگامی که شما چندین بار وب سایت خود را بررسی می‌کنید افزایش سرعت را مشاهده می‌کنید. همانطور که در تصویر زیر مشاهده می‌کنید ما بعد از انجام آزمایش دوم از وب سایت دیگر لود شدن DNS را مشاهده نمی‌کنیم و زمان لود DNS به 0 میلی‌ثانیه تغییر کرده است که قبلا ۳۳ میلی‌ثانیه بود. این یکی از مورد‌هاییست که بعضی از افراد اشتباه تفسیر می‌کنند و احساس می‌کنند که اصلا DNSلود نشده است درحالی که اینطور نیست و DNS به صورت کش شده لود شده است.

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

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

یا اگر از نسخه وردپرس بالای ۴.۶ استفاده می‌کنید، می‌توانید از ترفند‌های منابع منتشر شده کمک بگیرید. توسعه دهندگان با استفاده از متد wp_resource_hints می‌توانند با اضافه کردن دامنه‌ها و لینک‌های جدید، dns-prefetch، preconnect، prefetch و یا prerender را در پس‌زمینه وردپرس لود کنند.

SSL (بنفش)

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

در گذشته اگر وب سایتی از گواهینامه SSL استفاده می‌کرد و باید برای ورود از پروتکل HTTPS استفاده می‌کردیم، لود آن وب سایت عذاب آور می‌شد ولی حالا خوشبختانه با وارد شدن نسل جدیدی از پروتکل به نام پروتکل HTTP/2 زمان لود صفحاتHTTPS ناچیز شده است. در حال حاضر بیشتر مرورگر‌ها از پروتکل HTTP/2 پشتیبانی می‌کنند و از نظر من با توجه به پیشرفت روز به روز اطلاعات تعداد کاربرانی که از آخرین نسخه مرورگر‌ها استفاده نمی‌کنند ناچیز است پس این پروتکل HTTP/2 کمک موثری به لود وب سایت شما می‌کند. همچنین باید توجه داشته باشید که همه ارائه دهندگان میزبانی و CDNاز پروتکل HTTP/2 پشتیبانی نمی‌کنند و شما باید توجه فرمایید، در صورتی که به HTTPS نیازمندید باید به دنبال ارائه دهندگانی باشید که از پروتکل HTTP/2 پشتیبانی می‌کنند. خوشبختانه سئوراز در طراحی سایت برای شما از سرور‌های معتبری استفاده می‌کند که همه از پروتکل HTTP/2 پشتیبانی کامل می‌کنند.

توجه داشته باشید که پروتکل HTTP/2 از نسخه ۴۹ به بعد کروم فعال‌سازی شده است و نسخه کرومی که Pingdom برای تست استفاده می‌کند ۳۹ می‌باشد، بنابر این درصورتی که از این ابزار برای بررسی سرعت لود وب سایت خود استفاده می‌کنید ممکن است نتایج نمایشی تمامی تاثیرات پروتکل HTTP/2 را به شما نمایش ندهد ولی مطمئن باشی، در صورتی که کاربران از نسخه بروز کروم استفاده کنند، سرعت قابل ملاحظه‌ای را احساس خواهند کرد.

اتصال – Content (فیروزه‌ای)

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

وقفه – TTFB (زرد)

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

بهترین راه برای کاهش زمان TTFB چیست؟ یکی از بهترین راه‌های کاهش زمان TTFB استفاده از CDN می‌باشد. در زیر سرعت ساخت سایت را با فعال‌سازی و غیر‌فعال‌سازی CDN بررسی کردیم تا نتیجه مطلوبی بدست آید.

TTFB بدون CDN

در ابتدا بدون اتصال CDN به وب‌سایت، وب سایت را تست کردیم و همانطور که مشاهده می‌کنید TTFB وب سایت 136 میلی‌ثانیه طول می‌کشد و وب سایت نیز در 1.45 ثانیه لود می‌شود.

TTFB به همراه CDN

سپس ما CDN را متصل کردیم و دوباره آزمایش را انجام دادیم. مشاهده می‌کنید که زمان لود وب سایت به 788 ثانیه و زمان TTFB نیز 37 میلی‌ثانیه شده است.

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

ارسال (نارنجی) و دریافت (سبز)

با‌ توجه به اطلاعات بالای شما عزیزان فکر نکنم توضیحات زیادی برای توجیح دو وضعیت دریافت و ارسال نیاز باشد. به طور کلی وضعیت ارسال(Send) به معنای زمان لازم برای ارسال درخواست از مرورگر به سرور می‌باشد. همچنین دریافت(receive) نیز زمان لازم برای دریافت اطلاعات توسط مرورگر از سرور می‌باشد. هردوی این‌ها زمان خیلی کمی لازم دارند و تاثیر زیادی بر روی آزمایش شما نمی‌گذارد.

درخواست HTTP Headers

هنگامی که در حال بررسی چارت آبشاری هستید، می‌توانید هر یک از داده‌های جدول را نسبت به پاسخ‌های سربرگ HTTP(یا همان درخواست HTTP Headers) بررسی کنید.

در این بخش اطلاعات ارزشمندی قرار دارد. در نمونه زیر شما متوجه می‌شوید که محتوا توسط متد فشرده‌سازی gzip بهینه سازی‌ شده‌اند، کش در وب سایت فعال است (HIT به معنای فعال و Miss به معنای غیر فعال) ، نوع محتوا از نوع html و یونی‌‌کد از نوع UTF-8 می‌باشد و غیره…

اطلاعات پیکربندی وب سایت مورد مطالعه

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

معماری

• وب سایت مورد مطالعه وب سایت (perfmatters.io) در سروری در امریکا میزبانی می‌شود. این سرور از پروتکلHTTP/2 ، وب سرور Nginx و پایگاه‌داده MariaDB پشتیبانی می‌کند که همه این‌ها با هم وب سایتی پر سرعت را برای کاربر ایجاد می‌کند.
• سرور وب سایت از ماشین مجازی HHVM استفاده می‌کند. ترکیب HHVM و PHP7 وب سایتی پرقدرت را برای کاربر ایجاد می‌کند.
• وب سایت از هیچ نوع افزونه کش استفاده نمی‌کند، زیرا تمامی اطلاعات وب سایت توسط سرور کش می‌شود.

افزونه‌های وردپرس

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

• افزونه رایگان CDN Enabler plugin برای فعال‌سازی CDN
• افزونه رایگان CAOS plugin برای فعال‌سازی گوگل آنالیز
• افزونه رایگان Disable ibeds plugin برای جلوگیری از ایجاد درخواست‌های HTTP اضافه
• افزونه رایگان Disable iojis plugin برای جلوگیری از ایجاد درخواست‌های HTTP اضافه برای لود ایموجی‌ها
• افزونه رایگان Disqus Conditional Load plugin برای لود تنبل بخش نظرات
• افزونه تجاری Imagify plugin برای فشرده‌سازی تصاویر
• افزونه تجاری Gonzalez plugin برای غیر‌فعال‌سازی اسکریپت‌ها زمان لود وب سایت

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

خلاصه

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

اگر با نکته جدیدی در Pingdom مواجه شدید و یا پیشنهادی در رابطه با ارائه مقاله‌ای جامع در رابطه با بخش‌های مختلف سئو و بهینه سازی داشتید با ما از طریق بخش دیدگاه درمیان بگذارید. همینطور می‌توانید به جای استفاده از این سایت از ابزار GTmetrix استفاده نمایید.

تجزیه و تحلیل آبشاری (Waterfall Analysis) با ابزار Devtools گوگل کروم

تحلیل عملکرد وب سایت، یکی از کارهای اساسی است که ما در پروژه های افزایش سرعت سایت انجام می‌دهیم. یکی از راه‌های ارزیابی و کشف کندی وب سایت، بررسی تک تک درخواست ها است که به اصطلاح به آن تجزیه و تحلیل آبشاری یا به انگلیسی Waterfall Analysis گفته می‌شود. ابزارهای فراوانی برای این امر وجود دارند که از جمله آن‌ها می‌توان به Chrome DevTools ، WebPage Tools ، Pingdom و GTmetrix اشاره کرد که استفاده از این ابزارهای سئو در درک و نحوه کارکرد طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی، ساخت سایت) در دقیق مشخص کردن مشکلات  می‌تواند بسیار کارگشا باشد چرا که این نمودار آگاهی ارزشمندی درباره چگونگی تاثیر گذاری فایل‌های پیوست شده (asset) روی سرعت صفحات و تجربه کاربری به شما می‌دهند. درواقع تجزیه و تحلیل آبشاری همان تجزیه و تحلیل سرعت سایت می‌باشد.

البته ما در سایت سئوراز بارها از تجزیه و تحلیل آبشاری در ابزارهای آنلاین مختلف استفاده کرده‌ایم، در پست بررسی سرعت با ابزار Pingdom درباره تجربه و تحلیل آبشاری (چارت آبشاری) این ابزار به خوبی اشاره شد، در دوره جامع بهینه سازی سرعت سایت به شکل بسیار جامع درباره تجربه و تحلیل آبشاری سایت Gtmetrix کار شد و همچنین در این پست قصد داریم به تجزیه و تحلیل آبشاری موجود در Chrome DevTools بپردازیم.

سرفصل‌های پست

• 1 تجزیه و تحلیل آبشاری (Waterfall Analysis)
  • 1.1 – DNS Lookup / DNS
  • 1.2 – Initial Connection / Connect (ارتباط اولیه یا اتصال)
  • 1.3 – SSL / TLS
  • 1.4 – TTFB / Waiting
  • 1.5 – دانلود محتوا (Content Download)
  • 1.6 – محتوای بارگذاری شده DOM
  • 1.7 – زمان بارگذاری (Load Time) / بارگذاری کامل (Fully Loaded)
  • 1.8 – Data Transferred / Bytes In / Page Size
  • 1.9 – درخواست های HTTP
  • 1.10  – کدهای وضعیت (Status Codes)
• 2 در پایان

تجزیه و تحلیل آبشاری (Waterfall Analysis)

نمودار آبشاری که به عنوان گراف آبشاری و هم چارت آبشاری نیز شناخته می‌شود، ارائه بصری از نحوه بارگذاری عناصر در وب سایتتان ارائه می‌دهد. این عناصر شامل CSS، JavaScript، HTML، تصاویر، پلاگین ها، فونت‌ها و … می‌شوند. نکته مهم دیگر این است که نمودارهای آبشاری به شما اجازه مشاهده ترتیب رندر شدن عناصر در مرورگر را می‌دهند. از آن جا که این عناصر می‌توانند شامل موارد مختلفی باشند از جمله بلاک های CSS تا مشکلات FOIT ، ترتیب بارگذاری از اهمیت زیادی برخوردار است که در ادامه به آن اشاره خواهیم کرد.

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

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

1 – DNS Lookup / DNS

هنگام دسترسی به یک صفحه وب، مرورگر تمام منابعی که نیازمند DNS Lookup هستند و باید تا زمان تکمیل lookup منتظر بمانند را شناسایی می‌کند. DNS lookup مبتنی بر hostname ها می باشد. به عنوان مثال، اگر Google Analytics را در وب سایتتان اضافه کنید، نه تنها برای دامنه شما DNS lookup انجام می دهد بلکه برای google-analytics.com نیز این کار را انجام می‌دهد.

پست ما درباره چگونگی کاهش DNS lookup را حتما مشاهده کنید چرا که در این قسمت به شکل کامل به DNS Lookup پ نحوه کاهش آن بحث کردیم.

کاهش DNS Lookup کمک بزرگی به بهبود سرعت سایت می‌کند، به همین دلیل است که همواره توصیه می‌شود عناصر واسطه بیشتری را روی CDN قرار دهید زیرا این کار درخواست های DNS lookup را کاهش می‌دهد. همچنین باید توجه داشته باشید که در ابزارهای زیاد، اگر تست های سرعت را چندین بار اجرا کنید، آن‌ها DNS را cache می کنند، به این معنی که این اطلاعات را در تست های بعدی مشاهده نخواهید کرد. اما lookup همچنان برای بازدیدکنندگان جدید که وارد سایت شما می شوند انجام می‌شود. سایت WebPageTest که از نگاه بنده بهترین ابزار برای آنالیز درخواست های http و همینطور تجزیه و تحلیل آبشاری سایت هست، برای رفع این مشکل راه حل مناسبی به نام First View و Repeat View دارد. از این طریق می توانید تصویر کلی بهتری را مشاهده کنید.
همچنین می توانید از resource hint هایی مانند DNS prefetching استفاده کنید که به مرورگر امکان انجام DNS lookup در یک صفحه در پس زمینه در حالی که کاربر در حال استفاده از مرورگر است را می‌دهد. این امر باعث کاهش latency یا همان تاخیر در DNS lookup در زمان کلیک کاربر روی یک لینک انجام می‌شود. مثال زیر را مشاهده کنید:

2 – Initial Connection / Connect (ارتباط اولیه یا اتصال)

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

کاهش زمان TCP کمی دشوارتر است. بهترین نقطه برای شروع این است که مطمئن شوید روی یک هاست وب سریع با تاخیر پایین سایت شما پیاده شده است. این handshake با ارسال داده از طرف کاربر در حین SYN اتفاق می‌افتد، بنابراین به ارتباط ها امکان جایگزینی در حین handshake را می‌دهد.
همچنین preconnect را فراموش نکنید که به مرورگر اجازه می‌دهد ارتباط‌های ابتدایی را قبل از ارسال واقعی درخواستHTTP به سرور ایجاد کنید.

3 – SSL / TLS

SSL، که در بعضی ابزار ها به عنوان SSL negotiation نیز معرفی می‌شود، زمان کلی مرورگر برای اجرای SSL/TLS handshake می‌باشد. مشخصاً این را زمانی مشاهده می‌کنید که CDN و یا هاست شما روی HTTPS فعال باشد.

در زیر تعدادی روش برای افزایش سرعت سایت هایی که روی HTTPS اجرا می شوند آورده شده است.

1.  HSTS مخفف عبارت HTTP Strict Transport Security می‌باشد، یک تقویت کننده امنیت است که صرفاً دسترسی مرورگرها فقط از طریق HTTPS محیا می‌کند. این ابزار با حذف redirect های HTTP و HTTPS غیر ضروری باعث کمک به عملکرد سرعت وب سایت شما می‌شود.
2. خاتمه دادن زودهنگام در کاهش تاخیر SSL/TLS handshake بسیار مهم است. با توزیع محتوا به کمک CDN تاخیر هر رفت و برگشت بین کاربر و سرور را کاهش می‌دهید. یک CDN به شما اجازه می دهد ارتباط نزدیکتر به کاربر را برقرار کنید.
3. OCSP stapling رویکردی جایگزین برای تعیین معتبر بودن یا نبودن یک سند SSL است. این رویکرد به وب سرور اجازه می‌دهد تا معتبر بودن گواهینامه ها را بررسی کند و نیاز به درخواست صدورگواهی از جانب کاربر را حذف کند و درخواست دیگر را کاهش دهد. هنگامی که با HTTPS سروکار دارید، OCSP به طور خودکار فعال می‌شود.
4. و البته HTTP/2 را داریم که دومین به روز رسانی عمده پروتکل HTTP از زمان HTTP1.1 می‌باشد. ویژگی های عملکردیHTTP/2 شامل بهبود سرعت مرور وب و همچنین افزایش امنیت می‌باشد.

4 – TTFB / Waiting

TTFB که خلاصه time to first byte است، مقدار زمانی است که طول می‌کشد تا یک کاربر یک درخواست HTTP ایجاد کرده و اولین بایت داده را از وب سرور دریافت کند. در Pingdom این مورد به عنوان زمان انتظار یا wait time شناخته می شود. TTFB یک جنبه مهم از بهینه سازی سئو سایت است زیرا هرچه TTFB سریع‌تر باشد، منبع درخواستی سریع‌تر به مرورگر ارسال می‌شود. به طور میانگین هر چیزی با TTFB کمتر از 100 میلی ثانیه فوق العاده است. هرچیزی با میانگین TTFB 200 تا 500 میلی ثانیه استاندارد است و بین 500 میلی ثانیه تا 1 ثانیه کمتر از ایده آل و هرچیزی با TTFB بزرگتر از 1 ثانیه احتمالاً باید مورد بررسی قرار گیرد. نکات تکمیلی و جالب درباره TTFB را حتما در مقاله TTFB چیست بخوانید.

یکی از راه های ساده بهبود TTFB پیاده سازی caching روی سرور است. به عنوان مثال، اگر از وردپرس استفاده می کنید، پلاگین WordPress Cache Enabler می تواند یک فایل Cache استاتیک در قالب HTML روی سرور شما ایجاد کند. این مورد به کاربران اجازه می‌دهد تا از فرایند فشرده سازی منابع جلوگیری کنند، بنابراین صفحه با TTFB سریع‌تری تحویل داده می‌شود.
و البته استفاده از CDN نیز به شدت می تواند TTFB شما را بهبود دهد.

TTFB قبل از CDN

در اینجا مثالی از آزمایش TTFB بدون استفاده از CDN را مشاهده می‌کنید.

TTFB با CDN

در ادامه مثال قبل را با استفاده از CDN تکرار کردیم.

همانطور که مشاهده می کنید، با استفاده از CDN مقدار TTFB به نصف کاهش پیدا کرد. البته بسته به موقعیت سرور و POPها این موارد متفاوت خواهند بود. از جمله راه های دیگر برای افزایش سرعت TTFB می توان به روز بودن Nginx و Apache و همچنین مدیریت منابع سرور از جمله CPU و IO و همینطور اسکریپت و پلاگین‌های نصب شده اشاره کرد.

5 – دانلود محتوا (Content Download)

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

هنگامی که درباره زمان دانلود محتوا صحبت می‌کنیم فشرده سازی تصویر نقش بزرگی در این مورد ایفا می کند. طبق HTTP Archive، از ژوئن 2017 تصاویر به طور متوسط 61% از حجم وب سایت ها را به خود اختصاص می دهند. مقالات جامع ما درباره بهینه سازی عکس می‌تواند بسیار به شما کمک کند

و البته استفاده از CDN می تواند یکی از آسان ترین راه ها به منظور کاهش زمان دانلود محتوا باشد، زیرا از این طریق محتوا را از POP های نزدیک به کاربران به آن ها عرضه می کنید. استفاده از CDN باعث کاهش TTFB نیز می شود.
از راه های دیگر به منظور کاهش زمان دانلود می توان به استفاده از javascript و css تنها در موارد مورد نیاز و فشرده سازی با Gzip اشاره کرد.

6 – محتوای بارگذاری شده DOM

DOM مخفف Document Object Model می باشد. هنگامی که از inspector کروم یا فایرفاکس استفاده می‌کنید تبی دارد به نام elients در واقع این تب در حال مشاهده نمایه بصری از DOM هست، Chrome DevTools پس از دستکاری در صفحهDOM را با HTML یا javascript نمایش می‌دهد. همچنین می توانید به آن به عنوان HTML تجزیه شده نیز نگاه کنید.
هنگامی که به بررسی سرعت صفحات وب سایت می پردازیم، همواره باید مواردی که ممکن است DOM را مسدود کنند و باعث ایجاد تاخیر در زمان بارگذاری می‌شوند را در نظر داشته باشید. این موارد به عنوان render blocking resources در نظر گرفته می‌شوند، مانند HTML، CSS و جاوا اسکریپت. بیشتر ابزارهای تست سرعت سایت مجموع محتوای DOM را نمایش می دهند در حالیکه این زمان با زمان کلی بارگذاری متفاوت است.

7 – زمان بارگذاری (Load Time) / بارگذاری کامل (Fully Loaded)

Load Time که با عنوان Fully Loaded نیز در بعضی ابزار ها شناخته می‌شود، زمان کلی پایان دانلود، رندر و نمایش به کاربر است. این مورد از معیارهای بسیار مهم است که باید مورد توجه قرار گیرد چرا که این زمان در Devtools واقعی تر از ابزارهای تست آنلاین است، به این علت که ابزارهای تست سرعت سایت لوکیشن ایران را ندارند و شما می‌توانید با مرورگر خود یک ابزار تست سرعت سایت در ایران باشید.موارد متعددی وجود دارند که می توانید با انجام آن ها سرعت بارگذاری را افزایش دهید.

8 – Data Transferred / Bytes In / Page Size

Data Transferred در Devtools کروم (دیتا انتقال داده شده)، که در WebPageTest به عنوان Bytes In شناخته می‌شود، و در Pingdom به عنوان Page Size، اندازه کلی تمامی asset ها (تمام فایل‌های پیوست شده در سند html) در صفحه وب می باشد. هرچه این مقدار کوچکتر باشد، بهتر است. توصیه های ما درباره کاهش زمان بارگذاری محتوا که در بالا آورده شد را دنبال کنید و در عوض Data Transfered وب سایت شما کاهش پیدا می‌کند.

تا سال 2016 متوسط اندازه صفحه، کمی بیشتر از 2 مگابایت بود که بسیار بزرگ است. اندازه صفحه وب از سال 2010 تا 2016 317% افزایش یافته و به مقدار 1530 کیلو بایت رسیده است. پیشنهاد می کنیم حداقل 1 مگابایت یا کمتر برای اندازه صفحه وب سایت خود در نظر بگیرید. اگرچه این امر در تمام محیط ها امکان پذیر نیست.

9 – درخواست های HTTP

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

روش های زیادی برای کاهش تعداد درخواست ها وجود دارند که می توان به موارد زیر اشاره کرد:

• قرار دادن کدهای کوچک جاوا اسکریپت به صورت درون خطی
• کاهش asset هایی مانند اسکریپت های واسطه و پلاگین هایی که درخواست های خارجی زیادی تولید می کنند.
• استفاده نکردن از framework های واسطه که به آن ها نیاز ندارید.
• کم کردن کد.
• ترکیب فایل های css و javascript.

ولی اگر قصد دارید اطلاعات بیشتر و کامل تری درباره درخواست های http و نحوه کاهش این درخواست ها کسب کنید مقاله رفع خطای Make fewer HTTP requests ما را حتما مطالعه نمایید.

10 – کدهای وضعیت (Status Codes)

کدهای وضعیت یا همان Status Codes ، که با عنوان کدهای خطا (Error) و کدهای پاسخ سرور (Server Response Codes) نیز شناخته می‌شوند، پیام هایی هستند که شامل اطلاعات کامل وضعیت ها درخواست بین کاربر و سرور می باشند. کاربر درخواست خود را به یک سرور HTTP ارسال می کند که میزبان یک وب سایت است، سپس سرور پیام پاسخ را در قالب یک کد بازمی گرداند.

اگر مشکلی در یک درخواست HTTP باشد، لیستی از کدهای وضعیت وجود دارد که مرورگر شما را با استفاده از آن مطلع می سازد تا بتوانید منبع مشکل را پیدا کنید. روشی که مرورگر پاسخ را مدیریت می‌کند بسته به کد و فیلد header پاسخ دارد. به عنوان مثال، خطای Not Found 404 بدان معناست که محتوا دیگر وجود ندارد یا حذف شده است.

در پایان

همانطور که مشاهده می کنید، ابزارهایی مانند Chrome DevTools، WebPageTest ، Pingdom و GTmetrix انواع مختلفی از اطلاعات ارزشمند درباره چگونگی بارگذاری صفحات و دلایل تاخیرها فراهم می‌کنند. درک معنای هر قسمت از داده ها می تواند در عیب یابی و تشخیص مشکلات اجرایی سایت کمک کند. توجه داشته باشید که بهینه سازی سرعت سایت تاثیری مستقیم بر روی افزایش رتبه سایت در گوگل و سایر موتورهای جستجو دارد و جدا از این مورد اثری حیاطی بر روی تجربه کاربری و رضایت بازدیدکنندگان نیز دارد.
امیدواریم این مقاله برای شما مفید بوده باشه و دفعات دیگری که تجزیه و تحلیل آبشاری (Waterfall Analysis) انجام می‌دهید، خوشبختانه بعضی از نکته های ذکر شده در بالا می توانند به شما کمک کنند.