امروز می‌خواهیم به نحوه استفاده و درک بهتر داده از ابزار تست سرعت سایت محبوب پینگدام بپردازیم. می‌توانید با استفاده از ابزار تست سرعت پینگدام کاری را برای سایت وردپرس خود انجام دهید که ما تحلیل آبشاری می‌نامیم. این می‌تواند به شما کمک کند که به سرعت مشکلات عملکردی را بشناسید و همچنین شناسایی هیچ مشکلی از قلم نیافتد.
بسیاری اوقات می‌بینیم که کاربران داده‌های ابزار تست سرعت پینگدام را اشتباه تفسیر می‌کنند و این گاهی منجر می‌شود که وبسایت را به حالتی حتی بدتر از حالت قبلی تنظیم کنند. به یاد داشته باشید که ابزارهایی مانند این تنها قرار است به عنوان راهنما مورد استفاده قرار بگیرند و ۱۰۰ درصد دقیق نیستند. موضوع مهم این است که تداوم داشته باشید و در تمام تست‌های خود، از یک ابزار مشابه استفاده کنید.
دانستن نحوه تحلیل صحیح داده‌ها از پینگدام به شما کمک می‌کند تا سرعت سایت وردپرس خود را بالا ببرید!
پینگدام شرکتی است که خارج از سوئد تاسیس شده (حال مالکیت آن با SolarWinds است) که طیفی از خدمات را ارائه می‌دهد. خدماتی مانند نظارت سایت در زمان فعالیت آن، نظارت سرعت صفحه، نظارت تراکنش‌ها، نظارت بر سرورها و تحلیل بازدیدکنندگان (نظارت آنی کاربر). احتمالا یکی از چیزهایی که آن‌ها به‌خاطرش خوب شناخته می‌شوند، ابزار تست سرعت رایگان سایتشان است که به عنوان یکی از محبوب‌ترین ابزار تست عملکرد در جامعه وردپرس شناخته می‌شود.
چرا این‌قدر محبوب است؟ یکی از دلایل این است که احتمالا از لحاظ استفاده، ساده‌ترین ابزار تست سرعت است! هر کسی در زمینه عملکرد وب متخصص نیست و به همین جهت برای کاربر عادی وردپرس، بعضی از دیگر ابزاری که وجود دارند ممکن است بسیار گیج کننده باشند. بعضی وقت‌ها هر چه سادگی بیشتر باشد بهتر است. به هرحال برای شما دو چیز اهمیت دارد: سایت شما چه‌قدر سریع است و چطور می‌توانید آن را سریع‌تر کنید.
پینگدام در حال حاضر این امکان را به شما می‌دهد که سرعت هر سایتی را از ۷ محل مختلف (۵ قاره) تست کنید.
نکته: متوجه شده‌ایم که بعضی اوقات تمام محل‌های تست در دسترس نیستند. این به احتمال زیاد به این دلیل است که یا به دلیل نگهداری در دسترس نبوده یا به دلیل حجم بالای تلاش‌ها جهت اجرای تست، بیش از حد شلوغ شده است. اگر یک محل تست که قبلا از آن استفاده می‌کردید، دیگر در دسترس نیست، یک یا دو ساعت بعد دوباره چک کنید. به احتمال زیاد دوباره در دسترس قرار می‌گیرد.
محل تستی که انتخاب می‌کنید در واقع بسیار مهم است زیرا به محل فیزیکی که سایت شما واقعا در آن هاست شده ارتباط دارد. در اینجا موضوع کوچکی به نام تاخیر شبکه مطرح می‌شود. اما در ادامه بیشتر به جزئیات این موضوع خواهیم پرداخت.
یک صفحه وبی از دارایی‌های مختلفی مانند HTML، جاوا اسکریپت، CSS، عکس‌ها و ویدئوها تشکیل شده است. تمام این‌ها درخواست‌هایی ایجاد می‌کنند تا شما چیزی را که در وبسایت می‌بینید، ببینید. به طور معمول هر چه درخواست‌های بیشتری داشته باشید، سایت شما کندتر بارگذاری می‌شود. این موضوع همیشه درست نیست، اما در اکثر مواقع صحت دارد.
در ادامه بخش‌های مختلف پینگدام را دسته‌بندی کرده‌ایم و معنای اطلاعات را در ارتباط با عملکرد کلی سایت و نحوه اجرای تحلیل آبشاری، با جزئیات بیشتری شرح می‌دهیم.
وقتی سایت وردپرس خود را از طرییق پینگدام اجرا می‌کنید، یک نمره عملکرد، یک زمان کل بارگذاری، اندازه صفحه کل و تعداد درخواست‌های شما در سایت را تعیین می‌کند. ما در مثال خود از perfmatters.io استفاده می‌کنیم که یک سایت تجارت الکترونیک است که دانلودهای آسان دیجیتال را اجرا می‌کند (EDD) .
همان‌طور که می‌بینید ما تست اول خود را اجرا کردیم و در پینگدام نمره ۸۸ از ۱۰۰ را به دست آوردیم در حالی که زمان کل بارگذاری ۵۴۱ ms بود. این به ما اندازه کل دارایی‌های ترکیبی و تعداد درخواست‌ها را می‌دهد.
سپس یک تست اضافه اجرا کردیم و این بار زمان کل بارگذاری سایت با همان تعداد اندازه صفحه و تعداد درخواست ۳۹۲ ms بود. موضوع چیست؟ اگر چند بار در پینگدام سایت خود را تست کنید، متوجه این مسئله می‌شوید. سایت‌های بزرگ‌تر حتی اختلاف‌های بیشتری را تجربه می‌کنند.
سه دلیل اصلی برای این امر وجود دارد: کشینگ DNS، کشینگ CDN و کشینگ وردپرس. برای همین است که باید چند بار تست را انجام دهید. قطعا فراخوان‌های خارجی به منابع ثالث و API ها بر این تست تاثیر می‌گذارند. دلایل بیشتر این امر را در تحلیل آبشاری ما بخوانید.
آیا می‌خواهید یک نمره پینگدام بهتر از وبسایت وردپرس خود به دست بیاورید؟ بسته به سایت و پیکربندی شما، ممکن است کسب نمره بی‌نقص ۱۰۰ از ۱۰۰ همیشه ممکن نباشد، به خصوص برای آن‌هایی که سایت‌های تجارت الکترونیک یا پیکسل‌های بازاریابی دارند. اما تنها اختصاص دادن زمانی برای بهبود نمره، نقطه شروع خوبی است. چیزی که واقعا مهم است، سرعت کلی است.
بعضی اوقات تجربه کاربری ممکن است بعضی حیله‌های عملکرد وبی که در وب می‌خوانید را از بین ببرد. شما نمی‌توانید تجربه کاربری را فراموش کنید! اما خیالتان راحت باشد. ما در ادامه نکاتی را با شما به اشتراک می‌گذاریم که با استفاده از آن‌ها سایت مذکور در مثال را به جایی که الان در آن هست، رساندیم. پس به خواندن ادامه دهید.
وقتی صحبت از بهینه‌سازی عملکرد باشد، تجربه کاربری را فراموش نکنید!
بخش تحلیل عملکرد که حالا «بهبود عملکرد صفحه» نام دارد، در سال ۲۰۱۸ به‌روز رسانی شد و آن‌ها برخی موارد قدیمی را حذف و موارد جدیدی اضافه کردند. این موضوع احتمالا به دلیل گزارش‌هایی مبنی بر مرتبط نبودن آن موارد است. وقتی صحبت از بهینه‌سازی عملکرد وب می‌شود، همیشه همه چیز در حال تغییر است و اگر افراد تنها به دنبال نمره بالا در پینگدام باشند، ممکن است دچار مشکل شوند.
اما ما تمام این بخش را در پست خود (بعضی از قدیمی‌ها و بعضی از جدیدها) می‌آوریم زیرا درک نحوه محاسبه این نمرات امر مهمی است. این محاسبات اساسا بر مبنای قوانین تحلیل سرعت صفحه گوگل هستند. به طور کلی اگر این موارد را در سایت خود بهبود دهید، احتمالا در زمان کل بارگذاری خود، کاهشی را خواهید دید.
این‌ها مواردی از دسته‌بندی‌هایی هستند که بخش بهبود عملکرد صفحه از آن‌ها ساخته شده است:
حال بیایید به بعضی از این موارد دقیق شویم و ببینیم امروزه کدام یک همچنان مرتبط هستد.
یکی از مهم‌ترین خدماتی که باید امروزه در سایت وردپرس خود اجرا کنید یک شبکه انتقال محتوا است. این‌ها شبکه‌ای از سرورها هستند (که به عنوان POPs هم شناخته می‌شوند) که در سرتاسر جهان جای گرفته‌اند. آن‌ها طراحی شده‌اند تا کپی‌هایی از محتوای ایستای (گاهی هم پویا) سایت وردپرس شما مانند عکس‌ها، جاوا اسکریپت، CSS و استریم‌های ویدئویی را هاست کرده و انتقال دهند.
اگر امکانش را دارید بهتر است هاستینگ خود CDN را لحاظ کنید. مزیت‌های CDN شامل تقویت عملکرد (TTFB و تاخیر شبکه کمتر)، پهنای باند و هزینه‌های هاستینگ کمتر و حتی مزیت‌هایی در سئو می‌شوند.
مهم: ابزار جدیدا به‌روز شده پینگدام در حال حاضر باگی دارد که هر فراهم‌کننده CDN را به دقت تشخیص می‌دهد.
بعضی از فراهم‌کننده‌های CDN ثالث که ما پیشنهاد می‌کنیم شامل این موارد می‌شوند:
ما در تست‌های سرعت CDN خود، دریافتیم که در بعضی موارد، یک CDN می‌تواند زمان بارگذاری صفحه را تا ۵۰ درصد کاهش دهد.
نام این بخش قبلا «از درخواست‌های بد اجتناب کنید» بود. این مورد همیشه مرتبط است. همان‌طور که از نامش پیداست، درخواستی است که به طور کامل اجرا نمی‌شود. این معمولا زمانی رخ می‌دهد که به صورت دستی به یک دارایی یا عکسی ارجاع می‌دهید که پاک شده است و منجر به خطای ۴۰۴ می‌شود. این به عنوان یک دایره نارنجی رنگ در پینگدام ظاهر شده و استاتوس هدر ۴۰۴ را نمایش می‌دهد.
همیشه اطمینان حاصل کنید که تمام درخواست‌های سایت شما موفقیت‌آمیز هستند. به این طریق مطمئن می‌شوید که هیچ درخواستی وجود ندارد که به دارایی می‌رود که دیگر وجود ندارد.
تغییر مسیرهای زیاد موضوعی است که باید حواستان به آن باشد. تغییر مسیرهای ساده‌ای مانند تغییر مسیر ۳۰۱، HTTP به HTTPS، یا www به سایت بدون www (یا برعکس) مشکلی ندارند. در بعضی مواقع این موارد در سایت شما لازم هستند. اما هر یک هزینه‌ای برای سایت شما به همراه دارند. و اگر همین‌طور تغییر مسیرها را پشت هم بچینید، مهم است که بدانید چه تاثیری بر سایت شما خواهند گذاشت. این در تغییر مسیرهای صفحات و پست‌ها، عکس‌ها و همه چیز صادق است.
تغییر مسیر در پینگدام به صورت یک دایره آبی نمایش داده می‌شود و در استاتوس هدر، ۳۰۱ یا ۳۰۲ نوشته می‌شود.
تغییر مسیرها چه‌قدر در سایت شما تاثیر دارند؟ بیایید یک تست در آغاز انجام دهیم. ابتدا در صفحه تماس با ما: https://perfmatters.io/contact/ یک تست سرعت انجام می‌دهیم. همان‌طور که در پایین می‌بینید، زمان کل بارگذاری سایت ۴۱۷ ms است.
سپس آدرس را تغییر کوچکی می‌دهیم (http://www.perfmatters.io/contact) و یک تست سرعت دیگر انجام می‌دهیم تا تاثیر تغییر مسیرهای چندگانه را ببینیم. همان‌طور که می‌بینید، حال همان صفحه ۶۹۵ ثانیه طول می‌کشد تا بارگذاری شود. این یک افزایش ۶۶ درصدی است!
این مورد پیش از این نفوذ کشینگ در مرورگر نامیده می‌شد. به زبان ساده، هر اسکریپت در سایت وردپرس شما باید یک هدر کش HTTP داشته باشد که به آن ضمیمه شده باشد. این زمان انقضای کش فایل را مشخص می‌کند. برای تصحیح این موضوع، اطمینان حاصل کنید که هاست وردپرس شما هدرهای کنترل کش و تنظیمات انقضای هدر درست را دارد. مراحل نحوه اضافه کردن دستی هدرهای کشینگ به سرور را بررسی کنید.
موضوع دیگر این است که وقتی اسکریپت‌های ثالث را بارگذاری می‌کنید، برای افزودن هدرهای کشینگ دسترسی ندارید. همان‌طور که به سرورهای وب آن‌ها دسترسی ندارید. دلایل متداول این موضوع مانند فیس‌بوک و توییتر شامل اسکریپت گوگل آنالیتیکس و پیکسل‌های بازاریابی می‌شود. برای رفع این اشکال می‌توانید اسکریپت گوگل آنالیتیکس را با افزونه‌ای مانند Perfmatters به صورت محلی هاست کنید (هر چند این مورد به صورت رسمی مورد پشتیبانی نیست). همچنین WP Rocket اخیرا گزینه‌ای دارد که می‌توانید پیکسل بازاریابی فیس‌بوک خود را به صورت محلی هاست کنید.
جابه‌جایی محلی اسکریپت‌ها می‌تواند در زمینه میزان تاثیر بر عملکرد سایت متفاوت باشد. یک مزیت این است که در آن صورت کنترل کاملی بر فایل خواهید داشت و می‌توانید آن را از CDN خود انجام دهید. این همچنین درخواست ثالث DNS را حذف می‌کند. اما همچنین مهم است که به یاد داشته باشید این فایل‌ها ممکن است در مرورگرهای دیگران کش شده باشند.
یک مشکل متداول دیگر دست‌وپنجه نرم کردن با رشته درخواست‌هاست. فایل‌های CSS و جاوا اسکریپت معمولا نسخه فایلی را در انتهای آدرس‌های خود دارند، مانند https://domain.com/file.min.css?ver=4.5.3. بعضی سرورها و سرورهای پروکسی نمی‌توانند رشته درخواست‌ها را کشینگ کنند. پس با حذف آن‌ها گاهی می‌توانید کشینگ خود را بهبود دهید.
افزونه‌های وردپرسی مانند حذف رشته درخواست‌ها از منابع ایستا یا Perfmatters وجود دارند که می‌توانند این کار را به صورت خودکار برای شما انجام دهند. یا می‌توانید آن را به صورت دستی با کد انجام دهید.
123456789101112<span class="token keyword">function</span> <span class="token function">remove_query_strings</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">is_admin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'script_loader_src'</span><span class="token punctuation">,</span> <span class="token string">'remove_query_strings_split'</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'style_loader_src'</span><span class="token punctuation">,</span> <span class="token string">'remove_query_strings_split'</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">remove_query_strings_split</span><span class="token punctuation">(</span><span class="token variable">$src</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token variable">$output</span> <span class="token operator">=</span> <span class="token function">preg_split</span><span class="token punctuation">(</span><span class="token string">"/(&ver|\?ver)/"</span><span class="token punctuation">,</span> <span class="token variable">$src</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token variable">$output</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token function">add_action</span><span class="token punctuation">(</span><span class="token string">'init'</span><span class="token punctuation">,</span> <span class="token string">'remove_query_strings'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
اما پیش از آن که فورا سراغ خارج کردن رشته درخواست‌ها از سایت خود بروید مهم است که بدانید چرا رشته درخواست‌های مورد استفاده قرار می‌گیرند. نسخه‌بندی فایل‌ها به طور معمول توسط توسعه‌دهندگان وردپرس مورد استفاده قرار می‌گیرند تا مشکلات کشینگ را دور بزنند.
برای مثال اگر به‌روز رسانی ارائه دهند و style.css را از ?ver=4.6 به ?ver=4.7 تغییر دهند، با آن مانند یک آدرس کاملا جدید برخورد می‌شود و کش نمی‌شود. اگر رشته درخواست‌ها را حذف کرده و افزونه‌ای را به‌روز کنید، می‌تواند منجر به نسخه کش شده جهت ادامه سرویس دهی شود. در بعضی موارد این ممکن است ظاهر سایت شما را خراب کرده و تا زمانی که منابع کش شده منقضی شوند یا کش کاملا از بین نرفته باشد، ادامه داشته باشد.
همچنین بعضی CDN ها می‌توانند رشته درخواست‌ها را کش کنند.
آموخته عمیق ما در خصوص نحوه حذف رشته درخواست‌ها از منابع ایستا را ببینید.
بسیاری مواقع می‌توانید این هشدار را نادیده بگیرید. مثل زمانی که پروتکل‌های جدید مانند HTTP/2 این هشدار را کم اهمیت‌تر می‌سازند. هزینه یک ارتباط جدید معمولا بیشتر از استریم کردن همه چیز روی همان ارتباط است. اما دو راه وجود دارد که می‌توان این مشکل را برطرف کرد. یکی استفاده از فراهم‌کننده CDN که کوکی‌ها را خارج می‌کند یا ایجاد یک دامنه یا یک زیردامنه جدا.
هشدار موازی‌سازی دانلود بین نام هاست‌ها از یک محدودیت در HTTP/1.1 و محدودیت مرورگرهای وب برای ایجاد تعداد ارتباطات هم‌زمان برای یک هاست ناشی می‌شود که تعداد این ارتباط‌ها معمولا ۶ است. این هشدار معمولا در سایت‌هایی با تعداد بالای درخواست دیده می‌شود. در گذشته تنها راه دور زدن این محدودیت اجرای چیزی بود که آن را اشتراک‌گذاری دامنه می‌نامند. اما اگر از از هاست وب یا فراهم‌کننده CDN استفاده می‌کنید که HTTP/2 را پشتیبانی می‌کند، می‌توانید به راحتی این را نادیده بگیرید چرا که اکنون منابع چندگانه می‌توانند در یک ارتباط به صورت موازی برقرار شوند. اما همچنین می‌توانید آموخته ما در خصوص نحوه رفع هشدار دانلودهای موازی‌سازی شده بین نام هاست‌ها را با استفاده از اجرای اشتراک‌گذاری دامنه بخوانید.
این هشدار به نبود هدرهای کشینگ در HTTP برمی‌گردد که باید در هر واکنش اصلی سرور لحاظ شود. چرا که آن‌ها هر دو باید زمان کش را تایید و تعیین کنند. اگر این هدرها پیدا نشوند، هر بار برای منابع یک درخواست جدید ایجاد می‌کند که سبب می‌شود زمان بارگذاری در سرور شما بالا برود. این هدرها شامل last-modified، ETag، Cache-Control و Expires می‌شوند. مانند هشدار نفوذ کشینگ در مرورگر، این هدرها باید به صورت خودکار توسط هاست وردپرس شما اضافه شوند. اگر درخواست‌های ثالثی دارید که دارید این را روی آن‌ها می‌بینید، کاری نیست که بتوانید انجام دهید زیرا روی سرورهای وب آن‌ها کنترلی ندارید.
این یک هدر HTTP است و باید در تمام واکنش‌های اصلی سرور لحاظ شود چرا که به شما می‌گوید آیا مشتری می‌تواند نسخه‌های فشرده‌شده محتوا را کنترل کند یا خیر.
بخش بعدی ابزار تست پینگدام کدهای واکنشی است. کدهای واکنشی که معمولا از آن‌ها با نام کدهای استاتوس HTTP نام برده می‌شود، مانند یک نت‌برداری کوتاه از سرورهای وب هستند که بالای یک صفحه وب فیکس می‌شوند. این یک پیغام از سرور وب است که به شما می‌گوید وقتی درخواست مشاهده صفحه دریافت شده، مسائل چگونه پیش رفته‌اند. بعضی موارد متداول شامل این موارد می‌شوند:
بخش‌های بعدی اندازه محتوا بر اساس نوع محتوا و درخواست‌ها بر اساس نوع محتوا هستند. هر یک از این‌ها از آن جهت مهم هستند که می‌توانید به سرعت ببینید چه چیزی بیشترین منابع شما را در صفحه وب می‌گیرد. بر اساس HTTP Archive، عکس‌ها تقریبا به طور میانگین ۴۳ درصد کل اندازه صفحه را دربرمی‌گیرند. در واقعیت نیز می‌بینیم که معمولا همین گونه هست. اما همان‌طور که در پایین در این سایت می‌بینید، این موضوع همیشه صادق نیست.
ابزار و افزونه‌های عالی وجود دارند که عکس‌های شما را بیشتر فشرده کنند و مطمئن شوند بخش اعظم بار صفحه سایت شما را تشکیل نمی‌دهند. در مورد مثال ما در بالا، سایت perfmatters.io از استفاده از آیکون‌های font awesome در محل عکس‌ها سود می‌برد. این می‌تواند یک استراتژی عالی و تعیین کننده باشد. و همچنین ما راهنمایی‌های اضافه‌ای در راهنمای سرعت صفحه خود داریم که در خصوص نحوه کاهش بیشتر اندازه محتواست.
بخش اندازه محتوا و درخواست‌ها بر اساس دامنه راه خوبی است که خدمات خارجی و اسکریپت‌های سایت را سریع مشاهده کنید. در مثال ما، می‌توانید ببینید که ما تمام دارایی‌های لازم برای بارگذاری از CDN خود را داریم. سپس یک بار HTML DOC اولیه برای سرور وب و یک تماس خارجی به دامنه گوگل آنالیتیکس وجود دارد. بسته به سایت، شما ممکن است خدمات خارجی بسیار بیشتری مانند فیس‌بوک، توییتر، Hotjar ، SumoMe، AdRoll، New Relic، CrazyEgg و … داشته باشید.
به طور کلی هر چه درخواست‌های خارجی کمتری داشته باشید بهتر است. چون چنین خدمات خارجی تاخیرهای خود، تاخیر TLS handshake، DNS lookups و… را دارند.
به طور کلی بهترین کار این است که تعداد درخواست‌ها را تا جای ممکن کاهش دهید و دارایی‌ها را در یک جا هاست کنید. مثلا آن‌ها را به سرور وب یا CDN خود ببرید. یک مثال می‌تواند font awesome باشد. به‌جای لینک‌دهی به اسکریپت خارجی برای font awesome، آن را دانلود کنید و مستقیم سرویس‌دهی کنید.
وقتی عملکرد وب را ارزیابی می‌کنید، مهم است که تصمیم بگیرید کدام فایل‌ها را باید و کدام یک را نباید هاست کنید.
