تکــــنو

دایار نگرشی نو

آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش سوم)

توضیحات
  اخبار
03 آذر 96
814

بهینه سازی با GTMetrix یکی از ابر جستجوهای وب‌مستران ایرانی تو گوگل هست.

آموزش بهینه سازی سایت با GTMetrix – بخش سوم

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

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

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

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

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

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

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

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

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 قرار بدین.

## 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 برای همیشه از شرش خلاص بشین.

# pass the default character set
AddDefaultCharset utf-8

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

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

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

خیلی مواقع دیده میشه که وب‌مسترها مثلا اگه چند فایل استایل خارجی داشته باشن اونی که اصلی هست رو در سمت HTML سایت فراخوانی میکنن و بقیه با دستور “(“import url(“your fileadress.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 اضافه کنین.

# 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

 

اولین نفری که مطلع می شود، باشید!

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

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