شرکت طراحی دیبا

phone09149747142

آموزش کار با گوگل PageSpeed Insights

آموزش کار با گوگل PageSpeed Insights
سعید رحیمی آموزش, بهینه سازی وبسایت, وبلاگ ۲۰ مرداد ۱۳۹۸

آموزش کار با گوگل PageSpeed Insights

در این سری از آموزش های سایت دیبا پی سی ما قصد داریم شما را با ابزار Page Speed Insights آشنا کنیم، در مقاله برترین ابزار های بررسی سرعت وب سایت ما شما را تا حدودی با این ابزار معروف آشنا کردیم، حال قصد داریم بصورت کاملا تخصصی درباره این ابزار کارآمد بحث داشته باشیم. هدف ما در این آموزش نحوه استفاده درست از ابزار می باشد، پس اگر قصد دارید آموزش کاملی از گوگل Page Speed Insights داشته باشید در ادامه این مقاله همراه دیبا پی سی باشید.

 

 

شروع کار با PageSpeed Insights

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

 

 

دور زدن تحریم های PageSpeed Insights

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

برای دور زدن تحریم ها ما باید ای پی – IP (شناسه هر موجودیت در شبکه اینترنت) خود را تغییر دهیم، برای این کار لازم است از فیلتر شکن ها استفاده کنیم، در این آموزش ما قصد داریم به وسیله فیلتر شکن Tor Browser این تحریم را دور بزنیم. شما برای دانلود این فیلتر شکن می توانید اینجا کلیک نمایید. در صورتی که شما از قبل فیلتر شکن داشته باشید می توانید با باز کردن دوباره سایت کار خود را آغاز کنیم.

 

 

تحلیل کلی اطلاعات سایت

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

 

 

نتیجه آمار سایت

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

 

آمار سایت بر روی موبایل

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

 

 

آنالیز سایت بر روی موبایل

هنگامی که ما بر روی این گزینه کلیک می کنیم اطلاعات کاملی از خطا ها، ارور ها و نکات مثبت سایت به ما نمایش داده می شود که در تصویر زیر می توانید نمایی از آنرا دیده باشید که نمایش دهنده نمره سایت دیبا پی سی به عنوان یک مثال می باشد. سایت دیبا پی سی توانسته است نمره ۹۴ را از ۱۰۰ دریافت کند و همانطور که مشاهده می کنید رنگ این نمره سبز می باشد. رنگ های سبز نشان دهنده وضعیت سرعت بالا می باشد و یک مزیت برای شما محسوب می شوند.

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

 

 

قسمت Lab Data

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

 

 

استپ اول: First Contentful Paint

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

 

استپ دوم: First Meaningful Paint

این بخش همانند بخش اول ما می باشد اما با این تفاوت که این بازه زمانی در موقعی نمایش داده می شود که محتوای ما بصورت کامل بارگذاری شده باشد. مدت زمانی که این محتوا به نمایش داده می شود برابر با ۰٫۶ ثانیه می باشد و رتبه خوبی دارد. با رعایت کردن نکات های قبلی ما می توانیم سرعت بارگذاری را در این بخش افزایش دهیم.

 

استپ سوم: Speed Index

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

 

استپ چهارم: Time to Interactive

این بخش نشان دهنده مدت زمانی است که یک صفحه می تواند بطور کامل تعاملی شود. در این بخش امتیاز سایت سبز رنگ می باشد، و زمان برابر با ۳٫۳ ثانیه می باشد. این بازه زمانی تنها در دو دسته اصلی تند و آهسته قرار گرفته است. این صفحه از قابلیتی برخوردار می باشد که می تواند در مدت زمان ۵۰ میلی ثانیه به کاربران شما پاسخ دهد و یک مزیت مهم به حساب می آید.

 

استپ پنجم: Max Potential First Input Delay

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

 

قسمت Opportunity

این بخش می تواند یک قسمت راهنما برای شما باشد، از این قسمت ما می توانیم خطاها، ارور ها و نکات مثبت خود را مشاهده کنیم و آنها را ویرایش بدهیم. در ادامه با مثال های بیشتر شما را با این نکات آشنا خواهیم کرد.

 

 

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

 

 

حل مشکلات خطا

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

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

 

قسمت Diagnostics

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

 

 

قسمت Passed audits

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

 

 

تحلیل استفاده از گوگل PageSpeed Insights

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

مطالب مرتبط