راهنمای جامع افزایش سرعت در Google pagespeed insights

افزایش سرعت سایت وردپرس | آموزش پروژه محور

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

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

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

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

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

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

این ابزار قدرتمند نسبت به سرعت سایت در موبایل و دسکتاپ امتیازی بین 0 تا 100 می دهد که اگر این امتیاز 100 باشد یعنی سرعت سایت شما بالاست.

آیا سرعت سایت در سئو تاثیر دارد

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

اگر سرعت سایت شما هم سطح 10 وب سایت اول در صفحه اول نتایج جستجو نباشد، نمی توانید به رتبه های اول صعود کند.

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

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

حالا دیگه وقتشه بریم سراغ اصل مطلب!

برای اینکه سرعت سایتتان را در این ابزار دقیق تست کنید وارد وب سایت pagespeed insights شوید.

پس از ورود، url صفحه مورد نظرتان که قصد دارید سرعت آن را مشاهده نمایید را در قسمت input صفحه وارد نمایید.

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

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

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

معرفی ارور ها و پارامتر های google pagespeed insights

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

First Contentful Paint

First contentful paint یا همان FCP یکی از مهم ترین معیار های گوگل برای سنجش سرعت سایت می باشد. FCP میزان زمانی است که طول میکشد اولین المان در صفحه، در دیوایس کاربران تان لود شود.

Lighthouse چگونه FCP شما را اندازه می گیرد؟

سنجش FCP بر اساس مقایسه و امتیاز این آیتم سایت شما با وب سایت های واقعی دیگر می باشد که در آرشیو و بایگانی http گوگل ذخیره شده اند اندازه گیری می شود.

برای مثال اگر وب سایت های دیگر امتیاز 99 درصد دارند و FCP آن ها 1.5 ثانیه است، در صورت اینکه FCP سایت شما هم 1.5 ثانیه باشد، امتیاز 99 درصد را از گوگل دریافت خواهید کرد.

امتیاز FCP	رنگ امتیاز	زمان FCP
75-100	سبز (سریع)	0-2 ثانیه
70-74	نارنجی (متوسط)	2-4 ثانیه
0-49	قرمز (کند)	بیشتر از 4 ثانیه

چگونه FCP را در صفحات سایت بهبود دهیم

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

  طراحی سایت در کرمان

speed index

speed index یکی دیگر از معیار های اندازه گیری سرعت سایت توسط pagespeed insights می باشد. این معیار، سرعت نمایش محتوا در هنگام بارگذاری و لود صفحه را اندازه گیری می کند.

speed index چگونه توسط گوگل بررسی می شود

گوگل ابتدا از بارگذاری صفحه در مرورگر فیلمی ضبط می کند. سپس پیشرفت بصری یا همان لود موارد موجود را با استفاده فریم های فیلم ضبط شده محاسبه می کند. در پایان با استفاده از ماژول Speedline Node.js امتیاز speed index را اندازه می گیرد.

امتیاز speed index	رنگ و سرعت	زمان speed index
75-100	سبز _ سریع	0 – 4.3 ثانیه
50-74	نارنجی _ متوسط	4.4 _ 5.8 ثانیه
0-49	قرمز _ کند	بیشتر از 5.8 ثانیه

چگونه speed index را بهبود دهیم؟

هرگونه اقدامی که شما برای افزایش سرعت انجام می دهید باعث بهبود speed index می شود.

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

Largest Contentful Paint

Largest Contentful Paint یا همان LCP معیار میزان زمانی است که طول میکشد پرحجم ترین و بزرگترین محتوا یا عکس شما بارگزاری شود. برای ایجاد سهولت در تجربه کاربری کاربران سایتتان باید سعی کنید بزرگترین المان های صفحه در 2.5 ثانیه اول، بارگزاری شود.

چه المان هایی برای LCP در نظر گرفته می شود

• تصاویر
• تصاویر svg
• ویدئو ها

چگونه LCP را بهبود دهیم

• تا جایی که مقدور است حجم تصاویر را کاهش دهید.
• از فرمت های بهینه مانند webp برای تصاویر استفاده نمایید.
• تصاویر را با توجه به سایز هر سکشن استفاده نمایید. برای مثال اگر در یک صفحه از تصویری استفاده کرده اید که سایزش 500px می باشد اما در یک سکشن 200 پیکسلی قرار داده شده است، سایز آن عکس را اندازه آن سکشن یعنی 200px نمایید.

Time to Interactive

Time to Interactive یا همان TTI یکی دیگر از معیار های گوگل برای سنجش سرعت می باشد. این معیار اندازه می گیرد چه میزان زمانی طول میکشد یک صفحه تعاملی شود. به عبارت دیگر پس از لود کامل صفحه، مقدر طول میکشد تا کاربر بتواند تعاملی در صفحه داشته باشد.  چه سایت هایی برای بک لینک گرفتن مناسب هستند؟

چگونه یک صفحه به طور کامل تعاملی می شود

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

این موارد باعث افزایش سرعت تعامل کاربر می شود.

Total Blocking Time

Total Blocking Time یا همان TBT یکی دیگر از موارد بسیار مهم در معیار های پیج اسپید اینسایتس گوگل می باشد. TBT مجموع زمان هایی که طول میکشد کار های طولانی بین FCP و Time to Interactive انجام شود (یعنی فاصله زمانی بین لود اولین المان و اولین اقدام کاربر که این فاصله بر اثر مشغول شدن سرور و افت سرعت لود بین این دو معیار اتفاق می افتد) و مدت زمانی که بین تعامل و اکشن کاربر مانند کلیک کردن و… و پاسخ وب سایت می باشد است.

نکته: منظور از کار های طولانی، کارهایی می باشد که در صفحه بیش از 50 میلی ثانیه طول میکشد.

Lighthouse چگونه TBT را اندازه گیری می کند

گوگل با کمک ابزار Lighthouse، فاصله میان TBT سایت شما و TBT هزار سایت برتر را مقایسه می کند و به شما امتیاز می دهد.

زمان TBT بر اساس میلی ثانیه	رنگ و سرعت
0 _ 300	سبز _ سریع
300 _ 600	نارنجی _ متوسط
بیش از 600	قرمز _ کند

Cumulative Layout Shift

Cumulative Layout Shift یا همان CLS آخرین فاکتور Google pagespeed insights برای اندازه گیری سرعت سایت می باشد. CLS میزان زمانی است که طول میکشد در هنگام دانلود المان های صفحه، هر المان در جایگاه خودش قرار بگیرد. برای مثال گاهی پیش می آید که پس از ورود به یک سایت، ابتدا متن ها در بالای صفحه لود می شوند، سپس عکس ها در پایین نوشته لود می شوند و در پایان از آنجایی که طراحی سایت، عکس ها را در بالای نوشته قرار داده است، این جا به جایی صورت می گیرد و توشته ها به پایین عمس منتقل می شوند. مدت زمانی که طول می کشد این جا به جایی ها انجام شود را CLS می گویند.

چه عواملی باعث ایجاد CLS می شوند

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

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