آموزش کار با Page Speed Insights

طراحی سایت

..آموزش کار با Page Speed Insights..
طراحی سایت

آموزش کار با Page Speed Insights

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

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

آشنایی با Page speed google

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

Google PageSpeed Insights

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

Google PageSpeed Insights score

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

Google PageSpeed Insights recommendations

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

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

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

Pingdom Tools speed test results

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

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

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

Mobile tab in Google PageSpeed Insights

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

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

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

Google PageSpeed Insights Field Data
FCP چیست ؟

فاصله زمانی بین دستور بازکردن سایت تا ظاهر شدن اولین نوشته یا تصویر روی صفحه است.

FID چیست ؟

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

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

Google PageSpeed Insights Lab Data

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

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

۱. Eliminate Render-Blocking Resources

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

Eliminate render-blocking resources recommendation

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

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

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

۲. Avoid Chaining Critical Requests

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

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

Avoid chaining critical requests recommendation

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

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

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

۳. Keep Request Counts Low and Transfer Sizes Small

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

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

Keep request counts low and transfer sizes small recommendation

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

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

۴. Minify CSS

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

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

Minify CSS recommendation

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

۵. Minify JavaScript

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

Minify JavaScript recommendation

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

۶.  Remove Unused CSS

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

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

Remove unused CSS recommendation

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

۷. Minimize Main-Thread Work

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

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

Minimize main-thread work recommendation

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

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

۸. Reduce JavaScript Execution Time

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

Reduce JavaScript execution time recommendation

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

۹. Reduce Server Response Times

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

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

Server response times are low message

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

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

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

۱۰. Properly Size Images

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

Properly size images recommendation

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

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

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

مثلا اگر یک تصویر برای هدر دارید می توانید سه نسخه در اندازه ۸۰۰، ۴۸۰ و ۳۲۰ پیکسل آپلود کنید و ویژگی srcset را به آن اعمال کنید تا بر اساس اندازه صفحه در سه حالت (حداکثر عرض و ارتفاع در حالت خودکار ) استفاده شوند.

۱۱. Defer Offscreen Images

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

Defer offscreen images recommendation

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

۱۲. Efficiently Encode Images

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

Efficiently encode images recommendation

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

۱۳. Serve Image in Next-Gen Formats

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

Serve images in next-gen formats recommendation

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

۱۴. Use Video Formats for Animated Content

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

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

Use video formats for animated content recommendation

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

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

FFmpeg file format conversion tool for video and audio

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

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

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

۱۵. Ensure Text Remains Visible During Webfont Load

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

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

Ensure text remains visible during webfont load recommendation
font-display: swap

۱۶. Enable Text Compression

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

Enable text compression recommendation

در هر صورت شما می توانید روش های زیر را بکار بگیرید. به عنوان یک راه حل مناسب از افزونه 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;
GiftOfSpeed GZIP compression check

۱۷. Preconnect to Required Origins

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

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

Preconnect to required origins recommendation

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

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

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

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

۱۸. Preload Key Requests

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

Preload key requests recommendation

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

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

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

۱۹. Avoid Multiple Page Redirects

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

Avoid multiple page redirects recommendation

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

۲۰. Serve Static Assets With an Efficient Cache Policy

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

Server static assets with an efficient cache policy recommendation

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

استفاده از افزونه های 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"; }

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

همچنین اگر از سرورهای 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. وارد کنید.

۲۱. Reduce the Impact of Third-Party Code

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

Reduce the impact of third-party code recommendation

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

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

۲۲. Avoid Enormous Network Payloads

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

Avoid enormous network payloads recommendation

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

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

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

۲۳. User Timing Marks and Measures

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

User Timing marks and measures recommendation

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

۲۴. Avoid an Excessive Document Object Model (DOM) Size

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

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

Avoid an excessive DOM size recommendation

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

در پایان

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

121
31 خرداد 1399
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

18817
24 فروردین 1398
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

3937
27 آذر 1398
سئو

چگونه ویدیو کلاس های آنلاین (وبینار) را ضبط کنیم؟| آموزش ۳ روش

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

3786
08 اردیبهشت 1399