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

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

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

حال بیایید به بعضی از این موارد دقیق شویم و ببینیم امروزه کدام یک همچنان مرتبط هستد.

یکی از مهم‌ترین خدماتی که باید امروزه در سایت وردپرس خود اجرا کنید یک شبکه انتقال محتوا است. این‌ها شبکه‌ای از سرورها هستند (که به عنوان  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 وجود دارند که می‌توانند این کار را به صورت خودکار برای شما انجام دهند. یا می‌توانید آن را به صورت دستی با کد انجام دهید.

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

برای مثال اگر به‌روز رسانی ارائه دهند و 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، آن را دانلود کنید و مستقیم سرویس‌دهی کنید.

برای مطالعه ادامه ی متن به ابزار تست سرعت پینگدام در بلاگ پارمیسافت مراجعه کنید.