آموزش رفع خطاهای پیج اسپید در آنالیز سایت توسط سایت GTmetrix
خیلی بدبدمعمولیخوبخیلی عالی

آموزش رفع خطاهای پیج اسپید در آنالیز سایت توسط سایت GTmetrix

آموزش

با سلام خدمت کاربران عزیز . امروز برای شما آموزش رفع خطاهای پیج اسپید در آنالیز سایت را آماده کرده ایم . همانگونه که مستحضرید سایت های مختلفی هستند که آنالیز سرعت سایت شما را انجام میدهند . یکی از این سایت ها GTmetrix میباشد . پس از وارد کردن آدرس سایت خود جی تی متریکس از ابتدای بارگزاری سایتتان آن را آنالیز و نمره ای از لحاظ فنی به سایت شما میدهد . این نمره دارای دو بخش بوده و به PageSpeed و YSlow تقسیم میشود . Pagespeed سیستمی مربوط به گوگل و Yslow نیز مربوط به یاهو میباشد . این دو از مهمترین و معروف ترین سیستم های آنالیز سایت میباشند . در این مقاله میخواهیم به آموزش رفع خطاهای پیج اسپید در آنالیز سایت توسط جی تی متریکس بپردازیم .

آموزش رفع خطاهای پیج اسپید در آنالیز سایت GTmetrix

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

آموزش رفع خطاهای پیج اسپید در آنالیز سایت

آموزش رفع خطاهای پیج اسپید در آنالیز سایت

 

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

معرفی سرتیتر های سایت gtmetrix :

  • Recommendation : نام لیست مواردی که با جی تی متریکس و البته توسط پیج اسپید بررسی شده در این قسمت نمایش داده میشود .
  • Grade : نمره ای است که هر مورد از آنالیز دریافت کرده است . کمترین مقدار صفر و بیشترین مقدار نیز ۱۰۰ میباشد . همچنین ترتیب لیست شدن این موارد به صورت صعودی از مقدار ۰ تا ۱۰۰ میباشد . همچنین در کنار این قسمت شکلی مشاهده میشود . در صورتی که به صورت فلش سبز رو به بالا باشد یعنی بهینه است . در صورتی که به صورت لوزی توخالی زرد رنگ باشد یعنی در حد معمول و وسط قرار دارد و همچنین اگر فلش قرمز رو به پایین باشد یعنی کمتر از حد انتظار است .
  • Type : این بخش میتواند کمک زیادی به شما کند که بدانید مشکلتان در چه قسمتی است . انواع مختلف این لیست به صورت Server , Css , JS , Content میباشد . در صورتی که ایرادی از شما گرفته شده و نوع آن دارای مقدار سرور است میتوانید بفهمید که مشکل از ناحیه سرور است و به مسئول هاست و سرور خود اطلاع دهید تا آن را بررسی کند . البته تمامی مواردی که شما به مسئول سرور میگویید ممکن است قابل انجام نباشد ، در مواردی که تنها سایت خودتان بر روی سرور است میتوانید این کار را انجام دهید . در غیر اینصورت به دلیل اینکه با درست شدن نمره سایت شما ، مشکلی برای سایت دیگری به وجود بیاید ، ممکن است مسئول هاست شما درخواست شما را قبول نکند .
  • Priority : اولویت مورد ذکر شده در اینجا نشان داده خواهد شد . این اولویت به سه دسته High و Low و Medium تقسیم میشود .

برخی از گزارش ها و خطاهای سایت GTmetrix :

خب درباره ستون های مختلف جدول نتایج آنالیز برای شما توضیح دادیم . حال به سراغ توضیح موارد لیست شده میپردازیم :

Enable Keep-Alive : با باز کردن این گزینه لینک هایی از فایل هایی که از سایت شما به آن ایراد گرفته شده را نمایش میدهد . این خطا بیشتر سمت سروری است و کمتر مربوط به سیستم سایت شما میباشد . این مورد مربوط به ارسال و دریافت چندین درخواست از طریق کانکشن های http و tcp میباشد . در صورتی که شما دسترسی به سرور اصلی داشته باشید و بتوانید فایل httpd.conf (البته وب سرور شما آپاچی باشد ) را ویرایش کنید میتوانید مقدار زیر را در آن قرار دهید .

KeepAlive On

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

Header set Connection keep-alive

Combine images using CSS sprites : این بخش بیشتر مربوط به تصاویر و البته طراح قالب شما میشود . اگر بخواهیم به صورت کلی توضیح دهیم باید اینگونه بگوییم که ، برای دریافت هر تصویر باید یک درخواست به سمت سرور ارسال گردد . در صورتی که سایت شما کم بازدید باشد ممکن است این مورد مشکلی برای شما ایجاد نکند ، اما در صورتی که دارای یک سایت پربازدید هستید این بخش اثر زیادی در سرعت سایت شما خواهد داشت . احتمالا دیده اید در برخی سایت ها یک فایل png وجود دارد که تمامی آیکون های سایت در آن قرار دارد . این کار باعث میشود تمامی درخواست های مربوط به این آیکون ها که ممکن است تعداد زیادی هم داشته باشند به یک عدد کاهش یابد ! فقط کافیست کمی با کدهای css کار کرده باشید . میتوانید ابزارهای آنلاین و ساده را استفاده کنید ، اما اگر میخواهید دست شما بازتر باشد و به صورت پیشرفته کار کنید میتوانید از فتوشاپ برای این مورد استفاده کنید .

Optimize images : این بخش کاملا مربوط به تصاویر سایت و البته طراح گرافیکی تصاویر شما میباشد . هر تصویر (به عنوان مثال تصاویر درون مطالب یا صفحه اصلی ) دارای حجم منحصر به فرد خود میباشند . اگر تصاویر موجود درون صفحه شما زیاد باشند باعث میشود سرعت بارگزاری سایت شما خیلی کند و زمان آن طولانی تر شود . برای رفع این مشکل و داشتن تصاویر بهینه تر میتوانید از نرم افزارهای کاهش حجم تصویر استفاده کنید (البته نرم افزارهایی که کیفیت تصویر شما را خراب نمیکنند ) . یکی از این نرم افزار ها Advance Jpeg Compressor میباشد .

Avoid bad requests : برخی اوقات لینک مربوط به فایل های درون سایت (تصاویر و یا سی اس اس و جاوا اسکریپت ) با خطای ۴۰۴ همراه میشد . به صورتی میتوان نام آن را لینک خراب نامید . با کلیک بر روی نام این گزینه (البته در صورتی که مقدار نمره آن ۱۰۰ نباشد ، یعنی لینک خرابی داشته باشد ) لینک های موجود در سایت که پاسخ به درخواست آنها با جواب ۴۰۴ یا ۴۱۰ همراه است را به شما نشان میدهد که میتوانید آنها را اصلاح کنید .

Defer parsing of JavaScript : این خطا معمولا مربوط به خواندن فایل های جاوا اسکریپت ، در زمان بارگزاری سایت میباشد . در صورتی که از سیستم مدیریت محتوای وردپرس استفاده میکنید میتوانید از افزونه Async Javascript به صورت رایگان درون سایت خود استفاده کنید تا مشکل رفع شود .

Specify image dimensions : مشخص کردن ابعاد تصاویر باعث میشود سرعت بارگزاری صفحات شما بیشتر شود . در صورتی که این ابعاد را در فایل css قالب خود تنظیم کرده باشید ، دیگر نگرانی از بابت این مورد نخواهید داشت .

Leverage browser caching : یکی دیگر از موارد درون لیست که مربوط به سمت سرور میشود همین گزینه است . در واقع این مورد به مرورگر شما میگوید فایل های دریافت شده از سایت تا چه زمانی قابل استفاده مجدد خواهد بود . این کار به سرعت بارگزاری هر چه بهتر و بیشتر وبسایت شما کمک خواهد کرد . برای حل این مشکل میتوانید از کد زیر درون htaccess در ریشه سایت خود استفاده کنید :

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Specify a cache validator : هر فایل ایستا درون سایت شما باید دارای ETAg در هدر ارسالی سایت و یا اینکه Last-Modified باشد . اگر سایت شما نیز در این مورد خطایی میدهد میتوانید از کدهای زیر در htaccess سایت خود استفاده کنید :

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"
    </FilesMatch>
</IfModule>

در کد بالا به جای مقدار روبه روی Header set Last-Modified تاریخ آن را میتوانید تغییر بدهید .

Minify CSS و Minify JavaScript و Minify HTML : ما این سه مورد را در کنار هم نوشتیم . اما در اصل در سایت جی تی متریکس این سه مقدار از هم جدا هستند . این گزینه مربوط به کم کردن و فشرده کردن کد های اچ تی ام ال و البته یکی کردن فایل css  و یکی کردن فایل های js میباشد . برای وردپرس افزونه های متعددی چه به صورت رایگان و چه تجاری وجود دارد که یکی از افزونه های رایگان در این زمینه Fast Velocity Minify میباشد . شما میتوانید این افزونه را دانلود و بر روی سایت خود نصب و پس از آن نتیجه را مشاهده کنید . البته به این مورد توجه کنید که یکی کردن فایل های جاوا اسکریپت و حتی سی اس اس در برخی اوقات به دلیل تداخل ممکن است باعث خرابی ظاهر سایت و عملکرد سایتتان شود . به همین دلیل در مورد این سه گزینه باید پس از تست و اطمینان از صحت عملکرد سایت آن را انجام دهید .

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

<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>

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

Inline small CSS و Inline small JavaScript : این دو مورد را نیز هم به دلیل تشابه موجود در توضیح و راه حل در کنار هم نوشتیم . در توضیحات جی تی متریکس گفته شده که بهتر است فایل های سی اس اس و جاوا اسکریپتی که دارای خط کد کمتری هستند و در اصطلاح کوچک تر هستند ، درون همان صفحه به صورت کد های style و script نوشته شوند . با این کار دیگر درخواست اضافی ارسال نمیشود و سایت شما نیز سرعت مناسبی در لود خواهد داشت .

Minimize redirects : در حالت معمول و اکثر سایت ها این مورد روی ۱۰۰ درصد است . اما اگر دیدید مقدار این مورد کمتر از ۱۰۰ میباشد به دلیل وجود ریدایرکت در سایت شما میباشد . سعی کنید ریدایرکت درون سایت خود را کمتر کنید تا نمره شما هر چه بیشتر بالا برود .

Avoid CSS @import : سعی کنید از ایمپورت کردن فایل سی اس اس درون فایلی دیگر خودداری کنید . در غیر اینصورت این انتظار را نداشته باشید که جی تی متریکس نمره ای از شما در این مورد کم نکند .

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

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

دیدگاه شما عزیزان
  • هنوز دیدگاهی ارسال نشده است.