آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت سوم)

خانه / آموزشی / آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت سوم)

آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت سوم)

سلام خدمت شما دوستان عزیز، با قسمت سوم آموزش بهینه سازی PageSpeed سایت با GTMetrix در خمتتون هستم.

در این قسمت هم مثل قسمت دوم به ادامه مباحث موجود در بخش PageSpeed واقع در قسمت Breakdown  سایت GTMetrix خواهیم پرداخت.

gtmetrix-logo

Optimize the order of styles and scripts : چینش صحیح فایلهای استایل و جاوا اسکریپت کنار یکدیگر

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

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

 <title>title</title>
 <style>
 // CSS Code
 </style>
 <script type="text/javascript">
 // javascript Code
 </script>
</head>

Inline small CSS : فراخوانی فایلهای استایل کوچک از داخل سایت

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

index

Inline small JavaScript :  فراخوانی فایلهای جاوا اسکریپت کوچک از داخل سایت

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

inline-js

Enable Keep-Alive : زنده نگاه داشتن فایل بین سرور و مرورگر!

در این مورد GTMetrix از شما میخواهد مواردی که به شما نشان میدهد را به صورت زنده بین سرور و مرورگر خود قرار دهید. برای این کار کد زیر رو به فایل .htaccess موجود تو شاخه اصلی سایتتون اضافه کنید.

<ifModule mod_headers.c>
     Header set Connection keep-alive
</ifModule>

Leverage browser caching : ذخیره سازی بخش های ثابت در cach مرورگر کاربر

در این بخش GTMetrix لیستی از فایلهایی که بهتر از در مرورگر کاربر ذخیره شود رو نشون میده. مثلا فرض کنید GTMetrix  آدرسی مثل “http://…/font/nassim.woff” رو نشون بده، این آدرس نشون دهنده نوع فایل از نوع فونت با پسوند woff هست. حالا اگه بخوایم کاری کنیم این نوع فایل تو مرورگر کاربر کش بشه کافیه کد زیر رو در فایل .htaccess قرار بدین.( اطلاعات بیشتر در مورد فایل htaccess و موضوع کش )

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/woff "access plus 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Avoid bad requests : فایلهایی که وجود خارجی ندارند

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

Avoid a character set in the meta tag :  عدم تعیین نوع کاراکتر

این میگه مثل اینکه کارکتر فایل یه افزونه رو تو کدها تعیین نکردی ( مثلا بذاری utf8 )، البته این مورد به ندرت تو سایتی دیده میشه ولی اگه بود خیلی ساده با اضافه کردن کد زیر به ابتدای فایل .htaccess برای همیشه از شرش خلاص بشین  :D

# pass the default character set
AddDefaultCharset utf-8

Avoid landing page redirects : ریدایرکت نامناسب

این گزینه تو بیشتر سایتها ۱۰۰% هست و خیلی دیده نمیشه سایتی از این مورد مشکلی داشته باشه. اصولا این مورد تو سایتهایی دیده میشه که بارگزاری سایتشون رو به بدون www به کمک فایل .htaccess قفل کردن. درسته این کار با الگوریتم هایی که برای سئو ارائه میشه کاملا هماهنگ هست ولی در بعضی موارد از لحاظ گوگل تخلف محسوب میشه. زیاد نگران این گزینه نباشین و بهتره بیخیالش باشین.

Avoid CSS @import : مدیریت فراخوانی فایلهای CSS خارجی

خیلی مواقع دیده میشه که وبمسترها مثلا اگه چند فایل استایل خارجی داشته باشن اونی که اصلی هست رو در سمت HTML سایت فراخوانی میکنن و بقیه با دستور “(“import url(“your file adress.css@” از داخل اون فایل استایل اصلی بارگزاری میکنن. اینکار یکی از اشتباهاتی هست که گوگل اون رو یکی از خطاهای اصلی میدونه. برای رفع این مشکل کافیه به آدرسی که GTMetrix داده برین و اون بخش مربوط به @import رو حذف کنین و فایل رو ذخیره کنید. بعد به بخش Head سایتتون برین و با دستور زیر اون هارو جداگانه فراخوانی کنین و یا اینکه اگه امکانش بود با هم ادغام کنین.

<link rel="stylesheet" href="your file adress.css" />

Put CSS in the document head : فراخوانی فایل CSS خارج از بخش head سایت

GTMetrix  زمانی با این گزینه به شما اخطار میده که فایل استایل خودتون رو در بخشی خارج از head سایتتون فراخوانی کرده باشین مثلا در بخش body. برای حل این مشکل کافیه بخشی رو که اخطار داده رو به قسمت head سایت منتقل کنین و خطای موجود در این بخش رو برطرف کنین.

Enable gzip compression : فعال کردن قابلیت gzip

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

view source

print

# BEGIN Compress text files
<ifModule mod_deflate.c>
  <filesMatch "\.(css|js|x?html?|php|woff|ttf|png|jpg|gif)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>
# END Compress text files

 

 

نظرات