آموزش Page Speed Insights ابزار بررسی عملکرد سرعت بارگذاری سایت

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

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

• آشنایی با پیج اسپید (PSI)
• سرعت وب سایت چه تاثیری بر سئو دارد
• 24 توصیه برای بهبود عمکلرد پیج اسپید

آشنایی با Pagespeed google

پیج اسپید (PSI) گوگل ابزاری است که می توانید، عملکرد وب سایت را بررسی کنید. با وارد کردن آدرس سایت در قسمت Enter a web page URL  تجزیه و تحلیل سایت خود را مشاهده کنید.

بعد از وارد کردن آدرس وب سایت در صورتی که امتیاز شما 0-49 باشد نشان می دهد که زمان بارگذاری سایت بیش از 3 ثانیه است و باید در ادامه گزارش به پیشنهادات خود پیج اسپید گوگل توجه کنید و خطاهای وب سایت را برطرف کنید.

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

دریافت نمره 100 در پیج اسپید (PSI) گوگل چقدر اهمیت دارد

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

مثلا اگر تست هایی را در GTmetrix انجام دهید نتایجی را بدست می آورید که از پیج اسپید و YSlow ترکیب شدند و اگر در ابزار WebPageTest سرعت وب سایت را چک کنید باز هم این مقدار متفاوت می شود.

پس آنچه که اهمیت دارد سرعت واقعی وب سایت است، حتی ممکن است وب سایتی در 500 میلی ثانیه آپلود شود اما نمره 100 را در پیج اسپید (PSI) دریافت نکند. مطمئنا بهینه سازی سرعت سایت فقط دست یافتن به امتیاز 100 نیست و باید مشکلات وب سایت خود را بهینه سازی کنید تا کاربران در سریع ترین زمان ممکن به مطالب شما دسترسی پیدا کنند.

 سرعت وب سایت چه تاثیری بر سئو دارد

سرعت سایت علاوه بر تاثیرگذاری بر تجربه کاربری سایت UX در سئو اهمیت زیادی دارد. با توجه به اینکه پیج اسپید توسط بزرگترین و محبوب ترین موتور جستجوی جهان انجام می شود. پس در هر صورت باید این امتیاز بر رتبه بندی سایت تاثیر داشته باشد.

واقعیت این است که گوگل برای رتبه بندی از پیج اسپید (PSI) استفاده می کند و سرعت سایت را یک عامل ساده به حساب می آورد. این امتیاز نشان می دهد که وب سایت در چه جایگاهی قرار دارد و چقدر طراحی بهینه ای داشته.

24 توصیه برای بهبود عمکلرد پیج اسپید

قبل از اینکه پیشنهادات پیج اسپید (PSI) را بر وب سایت خود اعمال کنیم باید داده های خود را در 30 روز گذشته مقایسه کنید. در قسمت فیلد داده ها (Field data) نشان می دهد که هر صفحه به طور متوسط چه سرعتی دارد و سپس آن را با بقیه صفحات در مرورگر کروم مقایسه می کند.

همچنین در Field data دو نمودار وجود دارد که نشان می دهد میانگین اولین ترسیم محتوا (FCP) و اولین تاخیر ورودی چقدر است.

داده های آزمایشی

داده های آزمایشی  (Lab data) اطلاعاتی هستند که داده هایی از صفحات را در شرایط ثابت وب سایت نشان می دهد و عملکرد وب سایت شما را شبیه سازی می کند.

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

1. Eliminate Render-Blocking Resources

یکی از توصیه های معمول پیج اسپید برای بهینه سازی وب سایت از بین بردن یا کاهش حجم منابع مسدود کننده (Render-Blocking) است.

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

شما دو راه حل دارید:

• اگر جاوا اسکریپت یا CSS زیادی ندارید اول باید خطاهای ایجاد شده را رفع کنید، یعنی به پرونده HTML خود بروید کدهای JavaScript و CSS خود را بررسی کنید. مثلا از افزونه Autoptimize استفاده کنید که البته بیشتر در وب سایت های کوچک جواب می دهد.
• راه دیگر به تعویق انداختن کد جاوا اسکریپت (Defer JavaScript) است. معمولا تمام منابع جاوا اسکریپت و CSS سعی دارند تا به طور همزمان دانلود شوند. با این روش کد جاوا اسکریپت به تعویق می افتد تا منابع سریع تر بارگذاری شوند، مثلا روش Lazy loading کمک بسیاری می کند و سرعت بارگذاری صفحات را افزایش می دهد. (شما می توانید لیستی از منابعی که بیشتر تحت تاثیر قرار می گیرند را در زیر نتایج پیج اسپید پیدا کنید)

2. Avoid Chaining Critical Requests

در صورتی که در خواست های مهم زیادی را پشت سر هم ایجاد کنید ( اضافه کردن CSS و جاوااسکریپ های متوالی ) باید در قسمت Critical Rendering (CRP) نحوه لود صفحات را در مرورگر بررسی شوند.

مثلا اگر فایل های جاوا اسکریپت و CSS کاملا بارگذاری نشوند، به روی وب سایت نمایش داده نمی شوند. در نتیجه باید مراقب درخواست های خود باشید که پشت سرهم زنجیر نشوند.

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

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

• منابع و عناصر مسدود کننده را حذف کنید
• حجم CSS و JavaScript کاهش دهید
• تصاویر صفحه نمایش را به تعویق بندازید
• CRP برای بهینه سازی ترتیب بارگذاری را کوتاه کنید.

3. Keep Request Counts Low and Transfer Sizes Small

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

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

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

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

4. Minify CSS

Minify CSS برای کاهش حجم فایل ها در روند بهینه سازی سایت انجام می شود. معمولا کاهش حجم برای فایل هایی که سمت کاربر ارسال می شود مثل CSS، HTM و جاوا اسکریپت بکار می رود چون تنها کاهش حجم این کدها در بهینه سازی تاثیر دارد.

فایل های CSS معمولا بزرگتر از حد معمول خود هستند و کاهش آن ها کمک می کند ساده تر خوانده شوند. کدهای CSS می تواند شامل برگه ها ، فضاهای خالی و تکرار های غیرضروری باشد که در سیستم ها نیازی نیست و خوانده نمی شود.

برای کاهش حجم فایل های CSS توصیه می کنیم از افزونه های Autoptimize یا WP Rocket استفاده کنید.

5. Minify JavaScript

کاهش حجم جاوا اسکریپت ها ( به کمک همان روش Minify ) به موتور های جستجو کمک می کند تا ساده تر صفحات سایت ایندکس شود.

شما می توانید از افزونه Autoptimize یا WP Rocket برای سایت وردپرسی خود در کاهش حجم کدهای جاوا اسکریپت استفاده کنید.

6.  Remove Unused CSS

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

به همین دلیل گوگل حذف CSS های غیر ضروری را توصیه می کند و راه حلی برای رفع عناصر مسدود کننده (Render-blocking) می داند. همچنین این امکان وجود دارد که شما استایل هایی که با روش های مختلف ایجاد کردید را وارد کنید یا به تعویق بیاندازید.

یا حتی از ابزاری مثل Chrome DevTools برای پیدا کردن CSS های استفاده نشده را بکار بگیرید تا بهینه سازی انجام شود.

7. Minimize Main-Thread Work

ترد اصلی main thread در مرورگر کاربران ، وظیفه تبدیل کد به یک صفحه وب را دارد، (Thread رشته های واحد وظیفه هستند که هر برنامه می تواند تعدادی از آن ها را در اولویت خود قرار دهد) HTML ، CSS و JavaScript را تجزیه و اجرا می کند و مسئولیت رسیدگی به تعامل کاربران را بر عهده دارد.

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

برای رفع این مشکل و کاهش ترد اصلی روش هایی وجود دارد که در مورد های قبلی هم به آن اشاره کردیم از جمله:

• کد های CSS و جاوا اسکریپت خود را کاهش دهید.
• کد های استفاده نشده را حذف کنید.
• از حافظه کش یا پنهان استفاده کنید.

8. Reduce JavaScript Execution Time

اجرا کدهای جاوا اسکریپت مهم ترین کار در ترد اصلی (Main thread) است، به همین دلیل پیج اسپید (PSI) یک توصیه جداگانه و هشداری  برای نشان دادن تاثیر اجرای این کدها در عملکرد سایت دارد.

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

9. Reduce Server Response Times

زمان پاسخ گویی سرور Time to First Byte به اختصار TTFB معیاری است که زمان دریافت اولین بایت داده از سرور شما را اندازه گیری می کند. با اینکه این معیار با سرعت کلی سایت مطابقت ندارد اما داشتن TTFB پایین عملکرد خوب سایت را نشان می دهد.

پیج اسپید گوگل (PSI) توصیه می کند به کمک کاهش زمان پاسخ گویی سرور بهینه سازی وب سایت را انجام دهید. این پیام می تواند به شکل reduce TTFB یا Server response times are low message به معنی کاهش زمان پاسخ گویی کاربر بر روی نتایج پیج اسپید شما نمایش داده شود.

چندین عامل وجود دارد که می تواند TTFB را تحت تاثیر قرار دهد و میزان آن را کاهش دهد از جمله :

• انتخاب هاست با کیفیت بالا
• استفاده از تم ها و پلاگین های کم حجم
• کاهش تعداد پلاگین های نصب شده در وب سایت
• استفاده از شبکه تحویل محتوا (CDN) بخصوص برای سایت های پربازدید (فایل های سایت از سرور نزدیک تری نسبت به سرور اصلی سایت دانلود می شوند، مدت زمان پاسخ گویی به حداقل می رسد)
• اجرای حافظه کش مرورگر
• انتخاب یک نیم دامنه (نیم دامنه نام دامنه را به آی پی متصل می کند (DNS)

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

10. Properly Size Images

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

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

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

شما می توانید برای انجام این کار ویژگی srcset را به تگ <img> اضافه کنید تا فایل های تصویری در اندازه های مختلف مشاهده شوند. زمانی که مروگرها این لیست را می خوانند تعیین می کنندکدام گزینه برای صفحه فعلی مناسب است وسپس آن را نمایش می دهند.

مثلا اگر یک تصویر برای هدر دارید می توانید سه نسخه در اندازه 800، 480 و 320 پیکسل آپلود کنید و ویژگی srcset را به آن اعمال کنید تا بر اساس اندازه صفحه در سه حالت (حداکثر عرض و ارتفاع در حالت خودکار ) استفاده شوند.

11. Defer Offscreen Images

به تعویق انداختن عکس ها بیشتر به صورت (Lazy loading) شناخته می شود یعنی مرورگر قبل از نمایش محتوا فقط مواردی که قابل مشاهده باشند را بار گذاری می کند.

برای به تعویق انداختن عکس ها چندین افزونه وجود دارد که به طور خاص Lazy loading را انجام می دهد، از جمله a3 lazy load و lazy load که توسط افزونه WP Rocket صورت می گیرد. افزونه بعدی معمول  Autoptimize است که برای کاهش حجم CSS و کدهای جاوا اسکریپت استفاده می کردیم.

12. Efficiently Encode Images

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

افزونه های Imagify و Smush می توانند به شما کمک کنند تا بدون کم شدن کیفیت تصاویر به کوچک ترین اندازه ممکن تصاویر دسترسی پیدا کنید.

13. Serve Image in Next-Gen Formats

با وجود گسترش فرمت هایی از تصاویر که سریع تر از سایرین بارگیری می شود. باید فرمت های دیگر را به غیر از فرمت معمول مثل PNG یا JPEG در برنامه خود قرار داد و امتحان کرد، مثلا فرمت تصاویر WebP که در حال تبدیل شدن به یک استاندارد جدید هستند و استفاده از آنها  در صفحات وب بیشتر شده است می تواند گزینه ای مناسب با کیفیت بالایی باشد.

البته این توصیه به نظر کمی مشکل می آید و بنظر این کار را چندان ضروری نباشد. اما افزونه هایی مثل ، Imagify و Smush هر دو ویژگی تبدیل WebP را ارائه می دهند که امتحان کردن این فرمت را برای شما آسان می کند.

14. Use Video Formats for Animated Content

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

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

مثلا فرمت MP4 حجم بالایی دارند اما با اکثر مرورگرها سازگارند ویا فرمت WebM بهترین قالب ویدئویی را دارد که البته محدودیت هایی در مرورگر پیدا می کند. با این حال اگر باز هم در انتخاب نوع فرمت مردد هستید می توانید با توجه به فضای صفحه از طریق خط فرمان نوع فرمت خود را انتخاب کنید.

برای شروع کار افزونه FFnpeg را نصب کنید سپس به کمک خط فرمان زیر گیف خود را با نام input.gif به یک فیلم output.mp4 تبدیل کنید. این آزمایش کمک می کند تا بتوانید بر عکس عمل کنید و یک فایل mp4 را به شکل گیف برای نمایش در سایت آماده کنید. (فایل های WebM و MP4 در سایت وردپرسی نمی تواند این ویژگی را داشته باشد)

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

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

با اضافه شدن کدهای بالا ویدئو شبیه به گیف می شود ،پس فقط کافیست نام و نوع فایل را با منابع خود تطبیق دهید.

15. Ensure Text Remains Visible During Webfont Load

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

پس شما باید اطمینان حاصل کنید که متن در طول بارگذاری قابل مشاهده باشد. در صورتی که برای وب سایت مشکلی ایجاد شد ، به کمک دستورالعمل API Font Display مشکل خود را برطرف کنید. به صفحه شیوه نامه خود style.css بروید، ویژگی src در زیر قسمت font-face اضافه کنید.

font-display: swap

16. Enable Text Compression

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

در هر صورت شما می توانید روش های زیر را بکار بگیرید. به عنوان یک راه حل مناسب از افزونه WP Rocket برای استفاده از ویژگی فشرده سازی GZIP استفاده کنید که البته باید هزینه ای را در این افزونه پرداخت کنید.

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

حال اگر سایت وردپرسی شما روی سرور Apache اجرا می شود، می توان کد فعال سازی فشرده سازی زیر را استفاده کنید.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

البته باید قطعه کد بالا را بعد از END به فایل htaccess ، اضافه کنید واگر سایت وردپرسی خود را بر روی سرور Nginx قرار دادید می توانید کد زیر را در فایل nginx.conf  بنویسید.

 gzip on;
 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
 gzip_vary on;
 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

17. Preconnect to Required Origins

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

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

چند روش برای اتصال این استراتژی بهینه سازی وجود دارد که با ویرایش در فایل های وردپرسی انجام می شود. در حالت اول می توانید تگ لینک را به پرونده header.php خود اضافه کنید.

<link rel=“preconnect” href=“example.com”>

این تگ به مرورگر ها می گوید که باید در اسرع وقت اتصال example.com را برقرار کنند. پیج اسپید گوگل هر منبع مرتبطی که باید شما تگ لینک برایش با قرار دهید را لیست می کند.

روش دیگر که می توانید دقیقا همین ویژگ را به منابع خود اضافه کنید استفاده از افزونه Perfmatters است.

18. Preload Key Requests

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

اجرای این تکنیک مثل مورد قبلی است و شما می توانید با اضافه کردن تگ لینک زیر به فایل header.php این کار را انجام دهید.

<link rel=“preload” href=“example.com”>

یا افزونه های Perfmatters  و WP Rocket کمک بگیرید.

19. Avoid Multiple Page Redirects

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

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

20. Serve Static Assets With an Efficient Cache Policy

اگر مدتی با پیج اسپید گوگل کار می کنید احتمالا باید هشدار حافظه کش مرورگر ( Leverage browser caching) را بدانید. از نسخه 5  به بعد پیج اسپید گوگل این خطا با نام  Serve Static Assets With an Efficient Cache Policyنمایش داده میشود.

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

استفاده از افزونه های WP Rocket و W3 Total Cache در این مورد به شما کمک کند تا کش را در سایت خود پیاده سازی کنید.

با استفاده از هدر های Cache-control می توانید مدت حافظه کش خود را بهینه کنید. در قسمت پایین Cache-Control در Nginx قرار دهید.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

در مثال بالا انواع فایل های مشخص شده پس از 30 روز منقضی می شوند.

همچنین اگر از سرورهای Apache استفاده می کنید به جای آن باید از این قطعه در پرونده های .htaccess خود استفاده کنید:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

هدرهای حافظه نهان اکنون تقریباً استاندارد هستند. با این حال ، برخی از ابزارها (از جمله GTMetrix) وجود دارند که هنوز هم هدرهای منقضی شده را بررسی می کنند.

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

باید زمان انقضا را بر اساس انواع پرونده تنظیم کنید. همانند کد زیر:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

این کد را باید قبل از #BEGIN WordPress یا بعد از #END WordPress. وارد کنید.

21. Reduce the Impact of Third-Party Code

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

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

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

22. Avoid Enormous Network Payloads

بارگذاری این موارد برای بازدیدکنندگان موبایل سنگین باشد. این بارهای زیاد نیاز به داده های سلولی بیشتری دارد به همین خاطر سعی می کنیم تعداد در خواست های شبکه مورد نیاز را کاهش بدهیم.

گوگل توصیه می کند  اندازه کل بایت شما حداکثر تا 1600 kb باشد. البته روش هایی وجود دارند که در سراسر محتوای سایت باید آن ها را رعایت کنیم.

• حجم فایل کدهایCSS ، جاوا اسکریپت و تصاویری را کاهش دهید
• از فرمت WebP برای تصاویر خود استفاده کنید
• حافظه پنهان یا کش را اجرا کنید

پس به کمک استراتژی بالا می توانید از بارگذاری بیش از حد شبکه جلوگیری کنید.

23. User Timing Marks and Measures

در صورتی که شما از API Timing برای رابط کاربری خود استفاده می کنید، می توانید از ابزار Marks and Measures برای ارزیابی عمکرد جاوا اسکریپت های سایت استفاده کنید.

این ابزار نشانه های زمانی ایجاد می کند که اگر  API را برای سایت خود تنظیم کرده باشید، مارک و اندازه گیری دلخواه خود را می توانید در پیج اسپید گوگل مشاهده کنید.

24. Avoid an Excessive Document Object Model (DOM) Size

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

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

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

در پایان

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