آموزش کامل GTMetrix (قسمت دوم)

about us page title image
  • آموزش کامل GTMetrix (قسمت دوم)

    آموزش کامل GTMetrix (قسمت دوم)

    به نام ایزد منان

     در قسمت اول این آموزش شما با کلیاتی از سایت GTMetrix آشنا شدید . از این قسمت به بعد با بهینه سازی در Breakdown آشنا خواهید شد . دوستانی که قسمت اول آموزش را نخوانده اند لطفا به این آدرس رفته و قسمت اول را مطالعه بفرماییند .

    بعد از این که سایت خود را اسکن کردید اولین گزینه Breakdown مربوط به خطای Specify image dimensions خواهد بود .

    Specify image dimensions

    این خطا یک خورده وقت گیر است . چون در این خطا GTMetrix از شما میخواهد تا برای عکس های سایتتان width و height تعریف کنید . اگر شما در تصویر بالا دقت کنید میبینید که در مقابل لینک عکس ها عبارتی مانند این نوشته شده است :

    (Dimensions: 320 x 240)

    که اولی width و دومی height عکس مورد نظر میباشد . برای رفع این خطا شما باید آدرس عکس را پیدا کنید .

    اگر شما از انجمن ساز ویبولتین استفاده میکنید برای پیدا کردن تصویر به مسیر : کنترول پنل مدیریت ==> استایل&قالب ==> جستجود در قالب ==> آدرس عکس را جستجو کنید و ادامه مطلب زیر را بخوانید .

    اگر شما از وردپرس استفاده میکنید به این مسیر بروید : کنترول پنل مدیریت ==> نمایش ==> ویرایشگر ==> حال در ویرایشگر به دنبال آدرس عکس بگردید .

    آدرس عکس در قالب شما به صورت زیر خواهد بود :

     

    <img src="آدرس عکس" alt="توضیحات عکس" />


    شما باید تغییرات زیر را در کد اعمال نمایید :

     

    <img src="آدرس عکس" alt="توضیحات عکس" width="320px" height="240px" />


    همانطور که میبینید ما برای عکس مورد نظر پهنا و ارتفاع تعیین کردیم که باعث میشه این عکس در GTMetrix بهینه شود .

    و این خطا در GTMetrix از بین برود .

    خطای بعدی که در GTMetrix ممکنه با آن مواجه شوید Leverage browser caching (ذخیره سازی فایل های ثابت در کش مرورگر کاربر) است .

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

     

    </span>
    <span style="color: #000000;"># 480 weeks</span>
    <span style="color: #000000;"><FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"></span>
    <span style="color: #000000;">Header set Cache-Control "max-age=290304000, public"</span>
    <span style="color: #000000;"></FilesMatch></span>
    
    <span style="color: #000000;"># 2 DAYS</span>
    <span style="color: #000000;"><FilesMatch "\.(xml|txt)$"></span>
    <span style="color: #000000;">Header set Cache-Control "max-age=172800, public, must-revalidate"</span>
    <span style="color: #000000;"></FilesMatch></span>
    
    <span style="color: #000000;"># 2 HOURS</span>
    <span style="color: #000000;"><FilesMatch "\.(html|htm)$"></span>
    <span style="color: #000000;">Header set Cache-Control "max-age=7200, must-revalidate"</span>
    <span style="color: #000000;"></FilesMatch></span>
    <span style="color: #000000;">


    با قرار دادن این کد در فایل .htaccess باعث میشود که این خطا از بین برود . و فایل های ثابت در مرورگر کش شود .

    خطای بعدی که ممکن است شما با آن مواجه شوید Combine images using CSS sprites یا همان ( ترکیب تمامی تصاویر شما به یک تصویر) است .

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

    شما برای رفع این خطا در GTMetrix بهتر است که از سایت زیر استفاده نمایید

     

    http://spriteme.org/


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

    به طور مثال ما میخواهیم که تصاویر سایت IcSeo را Sprite کنیم . به صفحه اصلی میریم و روی Sprite me  کلیک میکنیم .   سپس روی Make all کلیک میکنیم

    sprite all

    منتظر میمانیم تا تمامی تصاویر Sprite شده و تبدیل به یک تصویر گردد سپس روی export css کلیک میکنیم تا css های رو ببینیم .

    export css

    حالا شما هم عکس را دارید و هم css ها رو . بعد از کلیک بر روی export صفحه ای مانند زیر را میبینید .

    css

    که در این صفحه به شما گفته شده که مثلا شما کلس

     

    .tp-loader.spinner0 {


    را در استایلتون پیدا کرده و به جای

     

      background-image: url("../assets/loader.gif");


    از کد زیر استفاده نمایید .

     

      background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/068b455101/spriteme1.png");background-position: -2px -2px;


    قسمت دوم  آموزش بهینه سازی GTMetrix هم با موفقیت به پایان رسید . امیدوارم که استفاده کامل را برده باشید .

    لطفا از قسمت سوم آموزش بهینه سازی سایت در GTMetrix نیز دیدن بفرمایید.

    از این که این مقاله را خواندید از شما تشکر میکنیم .

    هر گونه سوال و یا مشکل را در انجمن ما مطرح نمایید . برای ورود به انجمن روی این نوشته کلیک کنید .

    حق نگهدارتان .

    Tweet about this on TwitterShare on FacebookShare on Google+

    ICSeo

    امیررضا هستم . ۵ سال است در ضمینه سئو فعالیت میکنم . و تمامی موتور های جستجوگر را در این مدت آنالیز کرده ام . گروه ایمیلی icseo افتتاح گردید .

    More Posts - Website

    Follow Me:
    TwitterGoogle Plus

    تعداد دیدگاه (33)

    • فقط icseo .
      حرف نداره کارتون .

      Reply
      • رضا
      • ۱۳۹۳/۰۷/۲۹ at ۰۰:۲۶

      سلام ممنونم ازتون

      من مشکل Specify a cache validator دارم

      چطور میتونم اون رو حل کنم ؟

      http://gtmetrix.com/reports/bax2movie.ir/jn62S6do

      از این ها هم استفاده کردم ولی فرقی نکرد

      # ۴۸۰ weeks

      Header set Cache-Control “max-age=290304000, public”

      # ۲ DAYS

      Header set Cache-Control “max-age=172800, public, must-revalidate”

      # ۲ HOURS

      Header set Cache-Control “max-age=7200, must-revalidate”

      ممنونم از وبسایت خوبتون

      Reply
        • ICSeo
        • ۱۳۹۳/۰۷/۲۹ at ۱۴:۴۵

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

        http://www.icseo.ir/wordpress-seo-training/

        سپس آموزش آموزش تنظیم W3 Total Cache را ببینید . اون افزونه رو برای وردپرس نصب کنید و طبق آموزش تنظیمش کنید ، مشکلتون حل میشه .

        موفق باشید .

        Reply
    • سلام
      خیلی ممنون از مقاله بسیار کاربردی شما.
      با احترام
      وحید شهبازپور

      Reply
      • samira
      • ۱۳۹۴/۱۰/۲۹ at ۰۰:۲۳

      سلام
      خیلی ممنون از سایت خوبتان
      ممنون میشم در مورد این موارد هم راهنمایی کنید
      Remove query strings from static resources
      Use a Content Delivery Network (CDN)

      خیلی ممنون

      Reply
        • ICSeo
        • ۱۳۹۴/۱۰/۳۰ at ۱۸:۳۸

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

        Reply
      • reza
      • ۱۳۹۴/۱۲/۱۰ at ۱۵:۱۱

      با سلام
      بنده طبق آموزش به مسیر معرفی شده شما یعنی:کنترول پنل مدیریت ==> نمایش ==> ویرایشگر ==> حال در ویرایشگر رفتم ولی تصاویر موردنظر را پیدا نکردم لطفا راهنمایی نمایید
      با تشکر

      Reply
        • ICSeo
        • ۱۳۹۵/۰۱/۲۱ at ۲۲:۳۰

        سلام . متاسفانه متوجه نشدم لطفا واضحتر توضیح بفرمایید.

        Reply
      • Atil
      • ۱۳۹۴/۱۲/۲۶ at ۲۱:۴۴

      سلام..کدی که دادی رو گذاشتم تو htaccess ولی مشکل داره سایت ارور ۵۰۰ داد
      میشه چک کنی؟

      Reply
        • ICSeo
        • ۱۳۹۵/۰۱/۲۱ at ۲۲:۰۰

        سلام . این مشکل از پشتیبان شما میباشد . دلیل ایجاد ارور ۵۰۰ کانفیگ نادرست وبسرور شما توسط میزبان میباشد.

        Reply
        • ICSeo
        • ۱۳۹۵/۰۱/۲۱ at ۲۱:۵۰

        با سلام . برای رفع مشکل ارور Specify a cache validator از کد زیر استفاده کنید :

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

        این کد ها رو در داخل اچ تی اکسس روت قرار دهید و تست نماید.
        موفق باشید.

        Reply
      • saeed
      • ۱۳۹۵/۰۳/۲۱ at ۱۲:۰۸

      سلام من از افزونه visual compossesor استفاده میکنم و خطای Specify image dimensions را میدهد .

      آموزش شما مربوط به قالب وردپرس است برای visual composseor باید چه کار کنم ؟

      Reply
        • ICSeo
        • ۱۳۹۵/۰۴/۱۵ at ۱۴:۳۹

        تصاویر رو پیدا کنید و طبق آموزش بالا انجام دهید.

        Reply
      • حامد
      • ۱۳۹۵/۰۴/۰۳ at ۱۰:۲۶

      با سلام و عرض احترام خدمت شما ، و تشکر از اینکه سوال ها رو پاسخ میدین ؛
      در مورد خطای Specify image dimensions تو سایت من مربوط به تصاویر شاخص هست ولی من هر چی تو قالب تو صفحات مختلفش دنبال میگردم پیدا نمیکنم لینک عکسارو که بهشون اندازه بدم لطفا اگه امکان داره دقیق راهنمایی کنید ، ممنونتون میشم ، تو کدوم صفحه رو باید دنبال لینک عکسای شاخص باشم .
      سایت من با ورد پرس و قالب اون Pytheas هست .
      با تشکر .

      Reply
        • ICSeo
        • ۱۳۹۵/۰۴/۱۵ at ۱۴:۳۴

        سلام لطفا یک لینک از صفحه مربوطه قرار بدید تا کامل تر راهنمایتون کنیم .

        Reply
          • حامد
          • ۱۳۹۵/۰۴/۱۷ at ۰۹:۲۲

          با تشکر از شما این لینک یکی از صفحات که عکس اون در gtmetrix خطای Specify image dimensions داره و من تو قالب وب سایت تمام فایل هارو گشتم و نتونستم پیداش کنم ،http://khayyamconex.skyf.ir/
          مربوط به تصاویر قسمت “نمونه کار اخیر” که تصاویر شاخص هستند و کل تصاویر شاخص دیگر سایت .
          با سپاس فراوان از شما .

          Reply
            • ICSeo
            • ۱۳۹۵/۰۴/۱۸ at ۱۰:۴۲

            سلام .
            لطفا با استفاده از فتوشاپ اقدام به تغییر اندازه و سایز عکس ها کنید . سپس سیستم وردپرس خود به مسیز زیر بروید :
            رسانه ==> کتابخانه ==> روی عکس مورد نظر کلیک کنید == > ویرایش جزئیات بیشتر ==> ویرایش تصویر ==> مقیاس تصویر را با ابعاد جدید جایگزین کنید.

            موفق و سربلند باشید.

            Reply
              • حامد
              • ۱۳۹۵/۰۴/۲۳ at ۱۱:۰۴

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

              Reply
                • ICSeo
                • ۱۳۹۵/۰۴/۲۶ at ۲۲:۴۳

                این تصاویر ممکن است در کد html ای باشد که در قسمت نماییش ==> ویرایشگر باشد.
                و یا در قالب سایتتون باشه که در قسمت برگه ها ==> برگه خانه . موجود میباشد.

                Reply
    • سلام سایت من alishkala.com هست دوسه روزه تغییراتی که خواسته رو انجام دادم ولی کادرهای gtmetrix تغییری نکردن مثلا قسمت Optimize images که باید عکسهای پیشنهادی خودشو دانلود وجایگزین کنم انجام دادم ولی نمیدونم چرا تغییری نکرد کادرش هنوز قرمزه؟؟؟ ممنون میشم کمکم کنید

      Reply
        • ICSeo
        • ۱۳۹۵/۰۴/۱۵ at ۱۴:۳۱

        سلام . از سرور کلود استفاده میکنید؟ اگر بله باید چند روز صبر کنید تا کش ها به سرور کلود منتقل شوند و تغییرات اعمال شود.

        Reply
    • چرا کامنتم حذف کردین؟؟؟

      Reply
        • ICSeo
        • ۱۳۹۵/۰۴/۱۵ at ۱۴:۰۹

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

        Reply
    • ممنون بابت پاسختون ببخشید این سایت spriteme که معرفی کردین هرچی رو make all کلیک میکنم تصویرجدید ایجاد نمیکنه چکارکنم؟؟ هم بدون فیلتر شکن امتحان کردم هم با فیلتر شکن

      Reply
        • ICSeo
        • ۱۳۹۵/۰۴/۱۸ at ۱۰:۳۵

        سلام . مشکلی ندیدم . ارور میبینید ؟

        Reply
        • ارور که نه عکس ها رو که باید تو یه عکس نشون بده اینکارو نمیکنه

          Reply
            • ICSeo
            • ۱۳۹۵/۰۴/۲۶ at ۲۲:۴۲

            سلام .
            با مرورگر دیگری تست فرمایید .

            Reply
      • reyhane
      • ۱۳۹۵/۰۷/۲۹ at ۱۰:۲۰

      با سلام
      بنده مشکل Specify image dimensions رو دارم. سایتم مجنتو هست . میشه کمکم کنید چه جوری میتونم این مشکل رو حل کنم ؟

      Reply
        • ICSeo
        • ۱۳۹۵/۰۸/۱۸ at ۰۹:۳۱

        سلام . آدرس دقیق سایت رو ارسال کنید تا بررسی شود.

        Reply
          • reyhane
          • ۱۳۹۵/۰۸/۱۸ at ۱۲:۱۹

          با سلام
          irancharkh.com

          Reply
            • ICSeo
            • ۱۳۹۵/۰۸/۲۸ at ۰۰:۰۲

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

            Reply
    • سلام وقت بخیر
      کدی که باید در قسمت hatccess بزاریم،کدوم قسمت کد باید قرار بگیره؟؟؟

      Reply

    دیدگاه خود را بنویسید

    لطفا توجه کنید که پس از تایید نظر شما توسط مدیر , برای شما ایمیل تایید ارسال خواهد شد*

Optimization WordPress Plugins & Solutions by W3 EDGE