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

3/5 - (2 امتیاز)

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

در این قسمت هم مثل قسمت دوم به ادامه مباحث موجود در بخش PageSpeed واقع در قسمت Breakdown سایت 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 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 اضافه کنین.

# 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

خوب این قسمت هم تا اینجا کافیه، تا شما این موارد رو تست کنین منم در سریعترین زمان ممکن قسمت بعدی رو آماده میکنم.

بخش اول آموزش بهینه سازی PageSpeed سایت با GTMetrix
بخش دوم آموزش بهینه سازی PageSpeed سایت با GTMetrix

3/5 - (2 امتیاز)

دیدگاه‌ها در "آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش سوم)"

مهدی

ممنون … عالی بود
امینی

هر سه قسمتت ناب بود
نیما

دمت گرم داداش استفاده کردم
نمیا

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

گذاشتن تبلیغات شبکه anetwork عینه خودکشیه .. کل ارورهام برا اون بودش
هادی

سلام
من ۳ تا ارور ۴۰۴ پیدا کردم برا سایتم که مربوط که سه عکسه
از قسمت Avoid bad requests ادرس عکسا داده شده . خب نمیخام عکسارو جایگزین کنم دوباره که مشکل حل شه . چون اون عکسا اضافی بودن
حالا چطوری اون ۳ تا خطارو از بین ببرم؟
ممنون میشم کمک کنید .
1. MONJE
  
  سلام
  به محلی که عکس ها از اون مکان فراخوانی میشن برین و اون قسمت رو پاک کنین
RaaD

سلام
ممنون از آموزش خیلی خوبتون.
فقط یه مشکلی دارم. من از سیستم وردپرس استفاده میکنم و تو این قسمت مشکل دارم Inline small CSS
وقتی کد رو قسمت اضافه میکنم، قالب بهم میریزه. چجوری باید بذارم؟ یا کجا باید بذارم؟
head قالب من تو خو header هست
MONJE

سلام
کافیه برید به فایل header.php و قبل از بسته شده تگ تگ استایل رو اضافه کنید و محتوای اون فایل استایل رو بین اون دو تگ منتقل کنین
1. RaaD
  
  سلام.
  بالا هم توضیح دادم که رفتم و قبل از head گذاشتم. ولی اون موقع قالب بهم ریخته میشه.
  1. MONJE
    
    مهم نیست در تگ head قرار بدین یا هر جایی،فقط اگه در تگ head باشه هم سرعت بالا میره و هم استایل سایت سرعتر لود میشه.
    احتملا در هنگام درج خطایی به وجود می آد وگرنه جا به جا کردن استایل مشکلی رو ایجاد نمیکنه
مهسا

سپاس عالي بود
حسین

سلام. برای ذخیره سازی بخش های ثابت در cach مرورگر کاربر، یکسری بخش‌های ثابت سایت رو پیشنهاد داده و تصاویر آپلودشده درون پست‌؛ و هر روز به لیست عکس‌ها اضافه می‌شه. باید چیکار کرد؟
حسین

من به جواب سؤال کامنت قبلی‌ام رسیدم. آموزش‌هاتون خیلی روشن و کامل هست.
با آرزوی سربلندی روزافزون برای شما
علی یوسفی

سلام یک پیام قبلا دادم الانم این رو مینویسم میتونید شما کمکم کنید تا سئو کنم قالبم رو یا همین موارد رو درست کنم چون بلد نیستم شما برای من انجام نمی دهید بجای اون تبلیغاتتون رو 1 ماه بزارم داخل سایتم هرچه باشه شما استادید
Mohammad

java.js kojas :))
مرتضی

سلام. ممنون بابت آموزش خوبتون. در مورد Leverage browser caching که فونت رو مثال زدین حالا اگه بجای فونت کد آنالیتیکس گوگل باشه چی؟ بجای font/woff چی بذاریم؟
1. MONJE
  
  سلام
  شما تنها میتونید چیزهایی رو کش مرورگر ذخیره کنید که سرور اون ، همون سرور سایت خودتون باشه و سرویس های آنلاینی که سایر سایتها عرضه میکنند امکان کش شدن توسط شمارو ندارن و خود سرویس دهنده باید تو سایت خودش این کار رو انجام داده باشه.
دانیال

متاسف هستم که از بنده کپی کردید و منبع رو هم ذکر نکردید
joomlaforum.ir/showthread.php/15513-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%87%D8%A7%DB%8C-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%AC%DB%8C-%D8%AA%DB%8C-%D9%85%D8%AA%D8%B1%DB%8C%DA%A9%D8%B3
خدا خیرتان دهد
1. MONJE
  
  دوست عزیز فکر نمیکنم محتوای شما اولا به کاملی محتوای قرار گرفته بر در این بخش باشه، ثانیا تنها ارائه دهنده این مطلب نیستید یا یک سرچ ساده در گوگل به بیشمار سایت انگلیسی و فارسی برخورد خواهید کرد که محتوای مشابهی دارن.
  هدف موضوع یک پارچه سازی و جمع آوری یک آموزش کامل و ساده با محتوایی غنی بود که شاید در محتوای کلی اون بالغ بر 20 سایت به زبان های مختلف دخیل بودن.
Mirzaiee

سلام . تمام این کد ها برای من مفید بود و تغییراتشون توی GTmetrix به وضوح دیدم ، اما نه plugin های Gzip نه کدی که باید در htaccess می زدم برای من کار نکرد.لطفا راهنمایی کنید.
1. MONJE
  
  سلام
  با استفاده از سایت زیر تست کنید ببینید که اصلا این امکان در هاست شما پشتیبانی میشه یا خیر
  http://www.gidnetwork.com/tools/gzip-test.php
نوین

ممنون از توضیحتون
پری مهر

سلام دوست عزیز من یک سوال در موردEnable keep alive داشتم وقتی فایل مورد نظر رو باز میکنم واین کد رو بهش میدم خطا میده البته من در ابتدار صفحه این کدو گذاشتم میشه دقیقتر بگیر در چه خطی یا نسبت به کدهای موجود در ایت=ن فایل کجا باید بذارمش
1. MONJE
  
  سلام
  ببینید دوست عزیز بجز چند تکه کد خاص بقیه کدهایی که در فایل htaccess قرار میگیرن مهم نیست که در چه خطی قرار بگیرن.
  احتمال داره هاست شما از این تکه کد پشتیبانی نکنه و به همین علت باعث تولید خطا شه، ولی علاوه بر این کد راه های خیلی زیادی برای حل این مورد وجود داره
  با یک سرچ ساده عبارت Enable Keep-Alive در گوگل میتونید به نتایج خیلی جالبی دست پیدا کنید.
ali

سلام.
درمورد گزینه Optimize the order of styles and scripts
اون کد ها رو در کدام فایل جابجا کنیم . لطفا کمی واضحتر توضیح بدید.
ممنون از شما
ali

سلام .
در مورد گزینه Inline small CSS . . از جا بدونیم که کدام کد ها رو باید به هدرانتقال بدیم ؟
لطفا کمی بیشتر و مبتدیانه تر توضیح بدید. ممنون از شما
ایمان عباسی

من که وبلاگ دارم کدی که برای رفع ارور Leverage browser caching دادین رو در کجای وبلاگ قرار بدم؟
1. امیر خلجی مهر
  
  روی سرویس های وبلاگدهی شما دسترسی برای ایجاد چنین تغییراتی رو ندارید
saied

سلام و عرض ادب:
بنده نه از وزدپرس استفاده میکنم نه از جوملا. یه اسکریپتی هستش که با php کار شده.
قایل .htaccess فقط یه جمله توی اون به صورت پیش فرض نوشته : deny from all
یکی از خطاهایی که بهم داده همچین لینکی هستش: mysite.com/assets/css/bootstrap.css
بفرمایید شکل صحیح وارد کردن این دستوری که برای Leverage browser caching عرض کردید چه طور میشه؟
من هر کاری میکنم ارور رفع نمیشه!
مرسی.
saied

در ضمن، کدی هم که برای Enable gzip compression داده بودید گذاشتم، اینم عمل نکرد! دلیلش چیه؟
1. امیر خلجی مهر
  
  این کد تو وب سرور آپاچی کار میکنه
مهندس میرزاییان

ممنون
عالی بود
سایت بسیار زیبایی دارید
از کسایی که تو کارشون جدی هستن خیلی خوشم میاد
مشتری پرو پا قرص شما آگهی90
saied

مرسی از آموزش های خوبتون.
داداش کدی که واسه Enable gzip compression واسم چیزیو عوض نمیکنه؟ سرورم هم از نوع آپاچیه.
میشه لطفاً راهنمایی بفرمایید؟ این ارورهاییه که جی تی متریکس داده بیشتر از نوع جی کوئری هستند.
باید چی کار کنم؟
saied

داداش مرسی از آموزش های خوبتون.
فقط این کدی که واسه Enable gzip compression هست واسم چیزیو تغییر نداد. سرورم هم از نوع آپاچیه.
بیشتر ارورهایی که توی این قسمت gtmetrix به هم داده از نوع jquery هستن.
ممنون میشم راهنمایی بفرمایید که باید چیکار کنم؟
saied

جواب نمیدید؟!
عرض مردم کدی که واسه Enable gzip compression هست، بهم کار نمیده و چیزیو عوض نمیکنه.
دلیلش چی میتونه باشه؟
1. امیر خلجی مهر
  
  سعید جان
  زمانیکه وارد محیط پیشخوان شدید، مسیر زیر رو با دامنه خودتون دنبال کنید
  your.com/wp-admin/options.php
  و مقدار یک (1) رو برای گزینه زیر وارد کنید و تغییرات رو ذخیره کنید
  gzipcompression
boqche.com

سلام،ممنون از مطالب خوبت
در قسمت gzip من اون کد گذاشتم،اما هنوز یکی از ارور ها رو میگیره،چیکار کنم؟لطفا جواب بدید
1. امیر خلجی مهر
  
  تو دیدگاه بالایی توضیح دادم
بهمن

عالی بود ….واقعا ممنون
iran

ممنون از مطالب مفیدتون
میخواستم ببینم در بخش combine image seing css sprite غیر از اون عکسهایی که گفته بقیه عکسهایی تو سایتم که کم حجم هستن را این شکلی ترکیب کنم یا مشکلی پیش میاد ؟
saeid

سلام از آموزش بی نظیرتون
من دراینجاSpecify image dimensions طول وعرض عکسا رو هم در تگتغییر دادم .هم در فایل css ولی باز در gtmetrix همون ارورSpecify image dimensions برای این عکسا میده خواهش میکنم منو راهنمایی کنید
1. امیر خلجی مهر
  
  اگه سایتتون وردپرسی هست رو این قسمت نمیتونید مانور زیادی داشته باشید چرا که تگها توسط وردپرس ساخته میشه
مهدی

با سلام
آقای خلجی مهر من از ترفند های آموزشی gtmetrix سایت شما استفاده کردم . خوبه . ولی برای شخصی که اولین بارشه این کار رو انجام میده کمی سخته . ای کاش آموزش همراه با مثال های کاربری و واضحی بود . مثلاً بعضی جاها کد های جاوا هستش که خود gtmetrix پیشنهاد میکنه که این کد رو بردار و این کدی که من پیشنهاد میکنم رو بزار . من این کار رو کردم ولی کل اطلاعات هاستم رفت و مشکل دار شدم و مجبور شدم قالب و کلیه اطلاعاتم رو دوباره از نو بیارم بالا . میشه ازتون خواهش کنم در این مورد gtmetrix که خیلی بحث مهمی است آموزش رو کمی ریز تر کنید و حرفه ای تر . وب سایت شما خیلی عالیه . یعنی من روزی نیست که به وبسایتتون سر نزنم . در ضمن شما پکیج و یا آموزش به صورت فیلم برای مبحث آوردن سایت به صفحه اول گوگل رو دارید و تمامی ترفندهایی که برای سئوی سایت تأثیر گذار باشند . از بخش دیدگاه نمی شه سوالات رو طوری مطرح کرد که به بهترین پاسخ رسید . امیدوارم منظورم رو فهمیده باشید . یا اینکه یک منبع دقیق و کاربردی تر برای آموزش GTmetrix برام ارسال کنید تا در مورد هر یک از تیتر های آموزشی بیشتر توضیحات داشته باشه .
ممنون میشم اگه ارسال کنید
با تشکر
1. امیر خلجی مهر
  
  درود دوست خوبم
  نویسنده‌ی این نوشته تقریبا خیلی کامل و ساده توضیح داده، مشکلی که براتون پیش اومده هم احتمالا از یک جای دیگه بوده چون این آموزش ها رفتی به از دست رفتن اطلاعات هاست و… نداره
  خیر فعلا هیچ پکیجی در این سایت ارایه نشده دوست من، اگه نیاز به راهنمایی و یا مشاوره در رابطه با آموزش های سایت جی‌تی‌متریکس دارید، درخواست هاتون رو در انجمن مطرح کنید.
مهدی

ممنون ، واقعا عالی بود
حسین

با سلام. کدی که در بخش Enable Keep-Alive : معرفی کردین رو به قایل .htaccess اضافه می‌کنم و درصد سرعت نزیک صد می‌رسه اما بعد از یه مدت کوتاه، این کد خودبه‌خود از قایل .htaccess حذف می شه و دوباره درصد سرعت رو که چک می‌کنم پایین میاد. چیکار کنم این کد خودش حذف نشه؟
1. امیر خلجی مهر
  
  درود
  احتمالا افزونه‌ای نصب کردید که بر روی این فایل تغییراتی رو ایجاد میکنه، مثله افزونه های امنیتی، سئو و….
  برای رفع مشکل میتونید سطح دسترسی این فایل رو روی 444 تنظیم کنید
حسین

سلام و درود بر شما
با افزودن کدی که در بخش Enable Keep-Alive : معرفی کردین به قایل .htaccess ، باعث می‌شه داخل وب‌مسترتولز ارور 500 سرور ایجاد شود. هیچ راهکاری وجود داره که ارور سرور نده؟ تعداد ارورها هم کم نیست! ضمن اینکه با برداشتن این کد از قایل .htaccess ، درصد سرعت سایت از 95 به 60 کاهش پیدا می‌کنه.
بهترین تصمیمی که می‌تونم بگیرم چیه؟
با آرزوی بهترین‌ها برای شما
1. امیر خلجی مهر
  
  درود
  اگه مطمئن هستید که خطاهای شما در گوگل وبمستر برای همین کد هست، از کد استفاده نکنید
افشین

سلام
عالی بود ممنون
پدرام

سلام
ممنون از توضیحات کاملتون ، مطالب خیلی مفید و کارا بودند.
فقط من یک مشکل کوچیک دارم ، ممنون می شم اگر راهنماییم کنید.
در رابطه با Leverage browser caching توضیحاتی که دادین مربوط به برنامه نویس های php هست که از فایل htaccess استفاده میکنند.
من برای کش کردن فایل هام از چی استفاده کنم ؟
من طراحی html5 , css3, jquery انجام میدم و قراره پروژم رو با C# در محیط ویژوال استدیو داینامیک کنم.
ممنون میشم بگید چطوری فایل های استاتیک رو کش کنم.
پیشاپیش از توجه شما کمال تشکر را دارم
1. امیر خلجی مهر
  
  درود پدرام جان
  اطلاعی در این رابطه ندارم، پیشنهاد میکنم تو انجمن‌های مرتبط مطرح کنید
Amirhossein

درود تشکر از مطالب مفید
تو بخش Inline small CSS وقتی کد رو کپی میکنم و میام فایل اصلی رو حذف کنم ارور Avoid bad requests میده و میگه فایل پاک شده..درصورتی هم که پاک نکنم باز ارور قبلی”Inline small CSS” هست
این فایل css به هر حال تو هدر سایت من با فراخوانی میشه..چیکار میتونم بکنم؟!
1. امیر خلجی مهر
  
  درود امیر عزیز
  لطفا تو انجمن مطرح کنید این مشکل رو، نویسنده‌ی این نوشته در دسترس نیست.
  سپاس از شما

دیدگاه‌ها بسته شده‌اند.