×
دریافت قیمت
+ تخفیف ویژه

آذر 23, 1400
انواع خطاهای ساختاری جی تی متریکس و نحوه رفع آنها

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

لیست کامل خطاهای جی تی متریکس :

  • نحوه رفع خطاهای جی تی متریکس:

    • Avoid a character set in the meta tag

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

      • character set:

      • در هر زبانی حروف و علایم خاص خود آن زبان وجود دارد که برای نوشتن و صحبت مورد استفاده قرار می‌گیرند. برای اینکه در دنیای کامپیوتر از حروف و کاراکترهای زبان‌های مختلف استفاده کنید باید از مجموعه‌ای از کاراکترها و character set ها استفاده کنید. حالا با توجه به اینکه زبان‌های مختلف حروف و کارارکترهای متفاوتی دارند به همین دلیل این مجموعه کاراکترها به یک نوع محدود نمی‌شوند. در صورتی که بخواهید مجموعه کاراکترهای شما تمامی حروف انگلیسی را در برگیرد از مجموعه کارکتر ASCII می‌توانید استفاده کنید و برای زبان‌های دیگر از یک مجموعه کاراکتر جهانی که تمامی زبان‌های دنیا را پشتیبانی می‌کند استفاده می‌کنیم و این مجموعه Unicode نام دارد. از این رو برای اینکه بتوانیم از زبان فارسی استفاده کنیم از این مجموعه کاراکترها استفاده می‌کنیم. برای ذخیره سازی کاراکترها در حافظه، باید کد گذاری انجام شود و در مجموعه کارکترهای unicode از کدگذاری UTF-8 – UTF-16 – UTF-32 استفاده می‌شود. که در فارسی از UTF-8 استفاده می‌کنیم. ولی برای دادده های بزرگتر می‌توان از UTF-16 و UTF-32 استفاده کنیم. در واقع کد گذاری UTF-8 به این معناست که میتوان از داده‌های 8 تا 32 بیت استفاده نمود.

    و حالا رفع خطا:

    قطعا این کد html رو دیده‌اید که در بخش header و با استفاده از متاتگ قرار می‌گیرد و با استفاده از آن مجموعه کاراکترها تعریف شده است.

    
    </"meta http-equiv="Content-Type" content="text/html; charset=utf-8>

    معمولا وقتی سایت با استفاده از جی تی متریکس تست میشه این مورد سبز هست و مشکلی ندارد ولی در صورتیکه این فاکتور برای سایت شما نیاز به رفع خطا داشت. کاری که می‌کنید این هست که مجموعه کاراکتر و یا charatcter set را به صورت درخواست http به کاربر ارسال می‌کنید یعنی اینکه بدون نیاز به متا تگ میتوانید این کار را انجام دهید.

    کاراکتر ست

    کاراکتر ست

    البته این با توجه به سرور و زبان برنامه نویسی که برای سایت استفاده کردید، تفاوت هایی وجود دارد.

    در صورتیکه از زبان برنامه نویسی php استفاده می‌کنید و می‌خواهید مجموعه کاراکترها را داشته باشید با استفاده از کد زیر می‌توانید این درخواست را در هدر و در بالای php file خود اضافه کنید:

    ;header("Content-Type: text/html; charset=utf-8")
    
    

    در صورتیکه از وب سرور Apache استفاده ‌میکنید با افزودن کد زیر در فایل htaccess. می‌توانید کارکترها ست‌ها را داشته باشید

    AddType 'text/html; charset=UTF-8' html

    در صورتیکه از زبان نویسی غیر از php مانند پایتون و یا asp و وب سرور Nginx استفاده ‌میکنید با افزودن کد زیر در فایل config می‌توانید کارکترها ست‌ها را داشته باشید:

    }http

    ; include /etc/nginx/mime.types

    ;charset UTF-8

    
        ...
    {
    
    • Avoid bad requests

      • معمولا اصلی‌ترین دلیل این مشکل در جی تی متریکس به دلیل خطاهای 404 هستند. موردی که سایت جی تی متریکس پیشنهاد داده است این که لینک‌های شکسته سایت که موجب خطای 404 می‌شوند. حالا باید بدانیم که این خطا چه زمانی به وجود می‌آید. فرض کنید در یک صفحه‌ای یک مدیا آبجکت مانند تصویر و یا ویدئو و یا هر فایل دیگری مانند: css و یا جاوا اسکریپت قرار داده‌اید و این فایل باید از سرور لود شود در واقع مرورگر این فایل‌ها را از سرور درخواست می‌کند در صورتیکه این فایل در سرور نیست. برای مثال با تغییر در فایل‌ها آنها را از سرور حذف کرده‌ایم ولی فراموش کرده‌ایم کدهای سایت را تغییر دهیم. در این صورت چون این فایل در سرور وجود ندارد و مرورگز و کاربر منتظر لود هستند در این مواقع علاوه بر اینکه سرعت لود بسیار کند خواهد بود در نهایت خطای 404 و یا صفحه پیدا نشد به کاربر نمایش داده خواهد شد که معمولا یکی از اعصاب خردکن ترین انواع خطاهاست. برای اینکه بتوانید این نوع خطا را در سایت خود مشاهده نمایید علاوه بر ابزار جی تی متریکس می‌توانید از ابزار گوگل وبمستر تولز و همین طور ابزار pingdom استفاده کنید.
        • خب حالا برویم سراغ راه حل:
        • همانطور که گفتیم خطای 404 می‌تواند به دلیل عدم وجود فایلی مانند تصویر و ویدئو و یا قطعه کد باشد. در جی تی متریکس آدرس این فایل‌های نمایش داده می‌شود و می‌توانید با جایگزین کردن تصویر یا ویدئو و یا … در همان آدرس این خطا را برطرف نمایید. برای اینکه بتوانید تمامی خطاهای 404 را مشاهده نمایید می‌توانید از ابزار گوگل وبمستر تولز استفاده کنید.
        • گاها این طور نیست که خطای 404 به دلیل عدم وجود تصویر و یا ویدئو باشد و این خطا می‌تواند در بخشی از کد باشد که در این صورت کمی مشکل تر خواهد بود. معمولا در این مواقع از inspect element خود مرورگر می‌توان کمک گرفت. در این مواقه روی صفحه کلیک راست انجام دهید. سپس inspect element را کلیک کنید و از سپس وارد بخش console شوید. در این صورت می‌توانید خطاها را مشاهده نمایید و به رفع آنها بپردازید.

     

        • گاها اشتباه در آدرس‌دهی‌ها خواهد بود. برای مثال ممکن است شما جدیدا از ssl استفاده می‌کنید ولی آدرس فایل خاص با آدرس http در سایت قرار گرفته است در صورتیکه در حال حاضر باید از آدرس https استفاده شود یعنی این مورد باید در بخش کدها یافت و اصلاح شوند.

     

        • اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید راه‌حل دیگری هم برای شما وجود دارد و آن هم استفاده از افزونه است. افزونه‌ای که در این بخش به درد شما خواهد خورد Broken Link Checke است. که طرفداران زیادی دارد. برای اینکه با نحوه‌ی کار با این افزونه آشنا شوید در این بخش نحوه‌ی نصب و فعالسازی آن را به شما شرح می‌دهیم.
          • مراحل فعالسازی افزونه Broken Link Checker:
            • ابتدا این افزونه را از مخزن وردپرس دانلود و نصب نمایید.
            • پس از اینکه افزونه را نصب کردید وارد بخش افزونه ها شوید و روی گزینه فعال کردن افزونه کلیک نمایید.
            • پس از فعال‌سازی در منوی سمت راست در پیشخوان وردپرس عبارت ” بررسی کننده لینک ” را مشاهده خواهید نمود. روی آن کلیک کنید تا وارد صفحه مربوط به تنظیمات افزونه شوید.
            • پس از ورود به بخش تنظیمات افزونه 5 بخش با عناوین : عمومی ، دنبال پیوندها بگرد در ، بررسی کدام پیوندها ، پروتکل‌ها و رابط‌های برنامه کاربردی و پیشرفته را مشاهده خواهید نمود. حالا این منوها را توضیح می‌دهیم:
              • عمومی :
                • موقعیت : در این بخش می‌توانی لینک‌های بررسی شده و لینک‌هایی که در آنها خطا وجود دارد را مشاهده کنید. سپس با کلیک بر روی “نمایش اطلاعات اشکال زدایی” وارد صفحه‌ای می‌شود که در آن لینک مربوط به خطا قرار داده شده است و می‌توانید نسبت به رفع آن خطا اقدام نمایید.

     

                • بررسی هر کدام از پیوندها: در این قسمت می‌توانید برای بررسی سایت توسط این افزونه زمان تعیین کنید برای مثال هر 72 ساعت.

     

                • آگاه‌سازی از طریق رایانامه: در این بخش دو گزینه را مشاهده می‌کنید در صورتیکه تیک گزینه اول را بزنید در صورت یافتن خطاها در وب سایت شما یک ایمیل حاوی خطا در صندوق ورودی ایمیل خود خواهید داشت. در صورتیکه تیک گزینه دوم را بزنید در صورتیکه خطایی در نوشته‌ی یک نویسنده وجود داشته باشد این خط به صورت یک ایمیل حاوی خطاهای 404 به آدرس ایمیل آن ارسال خواهد شد. دقت نمایید که آدرس ایمیل قرار داده شده برای نویسنده صحیح باشد.

     

                • Notification e-mail address: در صورتیکه در بخش قبل تمایل به دریافت ایمیل داشتید و گزینه مربوطه را تیک زدید. در این بخش باید آدرس ایمیل را وارد نمایید در صورتیکه ایمیلی در این بخش وارد نشود به صورت پیش‌فرض ایمیل حاوی خطاها به ایمیلی که برای راه‌اندازی وردپرس استفاده شده است، ارسال خواهد شد.

     

                • تنطیم پیوند: در این بخش می‌توان تعیین کرد که لینک‌های موجود در قالب سفارشی هم بررسی شوند و در صورت وجود خطا اطلاع داده شود. گزینه دیگری با عنوان “موتورهای جستجو را برای این پیوندها متوقف کن” مشاهده می‌کنید که با زدن تیک در مقابل آن می‌توانید این پیوندها را از دید موتورهای جستجو پنهان نمایید.

     

                • suggestions: همانطور که از عنوان آن مشخص است در این بخش پیشنهادات ارائه می‌شود. در واقه این افزونه پیشنهاداتی جهت رفع خطاهای 404 ارائه می‌دهد که پیشنهادات مفیدی هستند.

     

                • warnings: در صوریتکه این گزینه را فعال کنید در این صورت برخی از مشکلاتی که به صورت جزئی هستند دیگر با عنوان لینک شکسته نخواهند بود و به صورت هشدار نمایش داده می‌شوند ولی اگر تیک نزنید خطاها به صورتی لینک‌های شکسته نمایش داده می‌شود. پینشهاد می‌شود حتی الامکان تیک این گزینه را نزنید.

     

              • دنبال پیوندها بگرد در:
                • دنبال پیوندها بگرد در: در این قسمت می‌توانید تیک بخش‌هایی را که تمایل دارید خطاها در آنها یافت شوند بزنید. برای مثال داخل برگه ها و نوشته‌ها و …
                • وضعیت‌های نوشته: در این بخش برای نوع محتوای تعیین شده وضعیت تعیین می‌کنید. برای مثال:برگه‌های منتشر شده.

     

              • بررسی کدام پیوندها:
                • گونه‌های پیوند: در این بخش هم می‌توان نوع محتوا را تعیین کرد برای مثال لینک‌های تصاویر و یا html , …
                • لیست‌های محروم: اگر تمایل دارید که لینک‌هایی که در آنها نام خاصی وجود دارد بررسی نشود می‌توانید در این بخش لیست‌های محروم آن را وارد کنید. برای مثال شما نمی‌خواهید تصاویری که در لینک آنها کلمه SEO وجود دارد بررسی شوند در این صورتی باید کلکه SEO را در این قسمت وارد نمایید.
              • پروتکل‌ها و رابط‌های برنامه کاربردی

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

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

                • زمان مورد نظر به پایان رسید: باید توجه نمایید که برای بررسی لینک‌های سایت قدرت هاست و سرعت آن نیز از اهمیت بالایی برخوردار است. شما در این قسمت می‌توانید زمان لازم برای بررسی هر لینک را بر اساس ثانیه وارد کنید. برای مثال ممکن است شما 20 یا 30 ثانیه و یا هر طمان دیگری را انتخاب کنید. پس از بررسی کردن لینک‌هایی که بارگذاری نمی‌شوند به عنوان لینک شکسته شناخته می‌شوند.
                • ناظر پیوند: در این بخش دو گزینه با عناوین به طور مداوم اجرا کن وقتی پیشخوان باز است و به طور ساعتی در پس زمینه اجرا کن. معمولا پیشنهاد می‌شود هر دو گزینه تیک زده شوند.
                • show the dashboard widget for:
                  • در این بخش می‌توانید تعیین کنید که کدام یک از کاربران بتوانند لینک‌های خراب را مشاهده نمایند. گزینه administrator برای مدیران سایت است که به طور کامل به تمامی بخش‌ها دسترسی دارند. editor and above برای کاربرانی با دسترسی نویسنده و بالاتر از نویسنده و همچنین در صورتی که nobody تیک خورده باشد امکان مشاهده به طور کلی وجود نخواهد داشت.
                • show link actions: با زدن تیک این گزینه می‌توان تعیین کرد که چه عملیاتی مجاز هستند برای لینک‌ها در نظر گرفته شوند.که این اقدامات عبارتند از :

                  • ویرایش نشانی و یا همان اصلاح لینک 404
                  • بی پیوند کردن و یا از بین بردن حالت لینک
                  • شکسته نیست و یا اینکه این پیوند شکسته و معیوب نیست و احتمالا به صورت اشتباه لینک خراب و یا لینک شکسته در نظر گرفته شده است.
                  • بازبررسی یا بررسی مجدد لینک
                  • fix redirect و یا اینکه لینک ریدایرکت شود.
                • بیشترین زمان اجرا: با زدن تیک این گزینه می‌توانید بیشتریت زمان لازم برای بررسی لینک را براساس ثانیه وارد کنید.
                • محدودیت بارگزاری سرور: در این بخش امکان تعیین محدودیت در بارگزاری برای سرور وجود داردکه براساس ثانبه است. در صورتی که بررسی لینک‌ها زمانی بیش از زمان نیاز داشته باشد، بررسی متوقف خواهد شد.
                • target resource usage: در این قسمت میزان استفاده از منابع را تعیین می‌کنید. پیشنهاد می‌شود این گزینه را تغییر ندهید و اجازه بدهید به صورت پیش فرض باقی بماند.
                • Logging: در صورتی که تیک این گزینه را بزنید یعنی اینکه تمایل دارید نتیجه بررسی لینک‌ها به صورت لاگ نیز ذخیره شود.
                • Log File Location: فایل لاگ در مسیری که این بخش تعیین می‌کند ذخیره می‌شود. مزایای نگهداری فایل log در این است که اگر به هر دلیلی نتوانستید به مدیریت سایت خود دسترسی داشته باشید. بتوانید از طریق هاست این خطاها را بررسی نمایید. معمولا بررسی لاگ آسان نیست بخصوص برای افرادی که مبتدی هستند.
                • وادار به باز بررسی: با استفاده از این گزینه می‌توان به بررسی تمام صفحات سایت پرداخت.
    • Avoid CSS @import

      • فایل‌های Cascading style sheets (CSS) در واقع برای توصیف و قالب بندی صفحات سایت مورد استفاده قرار می‌گیرند. عملیات import@ در واقع فرآیندی است که در آن یک فایل css از فایلی در جای دیگر در یک فایل css دیگر و یا در فایل html فراخوانی می‌شود. در واقع این مورد یک خطا نیست ولی نسانی از استفاده از یک روش غیر استاندارد است. این روش موجب می‌شود که مرور گر امکان بارگیری فایل‌ها را به صورت موازی نداشته باشد و و این مورد به صورت متوالی و وابسه به هم صورت می‌گیرد. برای مثال زمانیکه هنوز فایل css اول لود نشده باشد با توجه به اینکه فایل‌ها به صورت موازی اجرا نمی‌شوند، حتی اگر فایل دوم هم لود شده باشد باید منتظر فایل اول باشیم تا لود شدن کامل شود و پس از لود فایل اول دوباره فایل دوم لود می‌شود که هر کدام یک درخواست جداگانه به سمت سرور ارسال می‌کنند که این خوب نیست. زیرا تعداد درخواست از سرور افزایش می‌یابد و این مورد عملکرد صفحه را با اختلال مواجه می‌کند. بهترین حالت این است که روش‌های دیگری استفاده شود و از روش import@ برای بهبود عملکرد صفحه و رقم زدن تجربه کاربری خوب برای کاربران اجتناب شود. حالا با یک مثال این مورد را بررسی می‌کنیم. فرض کنید یک فایل css با نام style1.css داریم و می‌خواهیم از یک فایل css دیگر با عنوان style2.css در آن استفاده کنیم.برای این کار از کد زیر استفاده می‌شود:
      • <style>
        
        ;import url(style2.css) @
        
        </style>
      • در مثال بالا مرورگر باید ابتدا فایل style1.css را دانلود نماید، سپس تجزیه و اجرا کند. در حین تجزیه فایل اول با فایل دوم مواجه می‌شود که نیازبه import کردن و فراخوانی آن از یک فایل و محل دیگر دارد و پروسه لود و تجزیه و اجرا یکبار دیگر هم باید برای این فایل انجام شود. زیرا همانطور که گفتیم این فرآیند به صورت موازی نیست و باید به صورت متوالی باشد. حالا مثال دیگری از import کردن فایل css در فایل html را با هم بررسی می‌کنیم:
      • <"style type="text/css>
        
        ;import url("style2.css")@
        
        ;font-family: sans serif
        
        ;font-size: 17px
        
        ;font-weight: 300
        
        # more CSS scripts #
        
        </style>

    و اما باید چکارکنیم تا از این روش جلوگیری کنیم؟

    برای اجتناب از import کردن 3 روش وجود دارد که می‌توانید از هر کدام یک از آنها به تناسب موقعیت استفاده نمایید:

    روش اول: ترکیب کردن فایل‌های css

    یکی از روش‌ها ادغام کردن فایل‌های css است. در واقع شما می‌توانید کدهای همان فایل css را در فایل cssای که در داخل آن import@ می‌کنید، کپی نمایید. با این کار دیگر هیچ نیازی به import کردن ندارید.

    روش دوم: استفاده از css داخلی و یا همان inline css:

    معمولا استفاده از css های داخلی پیشنهاد نمی‌شود. ولی گاها بخشی از فایل‌های css مورد استفاده در html تنها در همان صفحه مورد استفاده قرار می‌گیرد و در صفحه دیگری نیست که می‌توان برای آنها از فایل css داخلی استفاده نمود. برای مثال:

    <img src="picture.jpg" /><script type="text/css">…CSS script goes here…</script>
    

    استفاده از فایل‌های css معمولا موجب ایجاد issue دیگری با عنوان put css in the document head می‌شوند. لذا پیشنهاد می‌شود در صورتیکه تمایل به استفاده از فایل‌های css داخلی دارید بهتر است در تگ <head> قرار گیرد.

    روش سوم : استفاده از تگ link در

    استفاده از تگ لینک در هدر صفحه موجب کاهش مسائل ناشی از این impact می‌شوند. برای استفاده از تگ link دو روش وجود دارد:

    روش اول استفاده از<"link rel="stylesheet>:

    به مثال زیر توجه نمایید:

    <"link rel="stylesheet" type="text/css" href="style2.css>

    در این مثال هر جایی نیاز ب قایل style2 باشد به آن لینک خواهد شد. د راین صورت فایل‌ها به ضورت همزمان و در یک خط شرع به دانلود کردن می‌کنند.

     

    روش دوم استفاده از<"link rel="import>:

    <link rel="import" href="style2.css" async>
    
    

    در این روش یک تگ با اسم async اضافه شده است. این تگ زمانی مورد استفاده قرار می‌گیرد که بخواهیم از لود وابسته جلوگیری کنیم و علاوه بر این صفت و یا property برای یک script یا فایل خارجی مورد استفاده قرار می‌‌گیرد. اسکریپت های خارجی که دارای خاصیت async هستند، به محض اینکه به طور کامل لود شدند، اجرا می شوند.خاصیت async در پایان لود اسکریپت خارجی آن را اجرا نموده و منتظر لود کامل سند html یا فایل دیگر نمی ماند. در واقع در این مثال فایل‌های css1 و css2 به یکدیگر وابسته نخواهند بود و از این طریق تعداد درخواست‌های ارسالی به سرور کاهش خواهد یافت.

      • <id=”issue4′ span style=”color: #000000;”>Avoid CSS expressions (deprecated)

        • این مورد هم یکی از خطاهایی است که در رابطه با css می‌باشد. در واقع زمانی که تمایل داشته باشید از یکی از ویژگی‌های جاوا اسکریپت در css استفاده کنید. برای مثال فرض کنیم شما با استفاده از یک قطعه کد به صورت ثابت به هدر سایت خود یک رنگ داده‌اید و این رنگ به صورت استاتیک است. ولی حالا میخواهید از متد‌های جاوااسکریپت در فایل css خود استفاده کنید و کاری کنید به صورت دوره‌ای و خودکار رنگ هدر تغییر یابد. (توجه داشه باشید که این مورد تنها توسط مرورگر اینترنت اکسپلورر قابلیت پشتیبانی دارد.)  حالا استفاده از این کد و استفاده از متدهای جاوااسکرپپت می‌تواند از لحاظ امنیتی برای سایت شما خطرناک باشد. از این برای رفع ان و یا جلوگیری از ایجاد چنین خطایی باید بخش جاوااسکریپتی کد را حذف کنید.
      • <id=”issue5″ span style=”color: #000000;”>Avoid document.write (deprecated)

        • در واقع این خطا برای زمانی است که شما می‌خواهید یک فایل جاوا اسکریپت خارجی را در سایت خود فراخوانی نمایید که معمولا از دستور ()document.write استفاده می‌کنیم. استفاده از این دستور زمان بر و هزینه بر است . برای مثال فرض کنیم در حال فراخوانی فایل second.js هستیم و از کد زیر استفاده می‌کنیم:
    ;document.write('<script src="second.js"></script>')
    
    
        • در واقع مرورگر قبل از اینکه بخواهد به اجرای ()document.write  بپردازد باید فایل first.js را که در بگیرنده کد بالاسات واکشی و اجرا نماید و سپس فایل دوم را اجرا نماید. حالا برای رفع این مشکل باید چکار کرد؟؟
          بهترین کار این است که از این دستور استفاده نشود و بلکه هر فایل و کد جاوا اسکریپتی که در سایت‌های دیگر موجود هستند  شما در سایت خود از انها استفاده می‌کنید. در سایت خودتان اپلود شوند. ئر صورتیکه به هیچ وجه چاره‌ای نداشتید و باید از این فایل‌های جاوااسکریپت خارجی استفاده کنید حتما در تگ <scrpit> آن از ویژگی async استفاده نمایید تا در این صورت مانع از این شوید که مرور زمان زیادی مسدود باشد.  برای اینکه بدانید چگونه می‌توانید از این ویژگی در تگ script استفاده نمایید از شما دعوت می‌کنیم تا انتهای این مقاله با ماه همراه باشید. (این به صورت کامل در بخش‌های دیگر توضیح داده شده است.) کاربران گرامی به این مورد دقت نمایید که برای رفع این مسئله به شدت توصیه می‌کنیم از یک متخصص در این حوزه استفاده نمایید تا مشکلات و مسائل بعدی برای سایتتان پیش نیاید.
      • <id=”issue6″ span style=”color: #000000;”>Avoid Flash on mobile webpages (deprecated)

      • <id=”issue7″ span style=”color: #000000;”>Avoid landing page redirects

        • این خطا در نسخه قبلی جی تی متریکس نام دیگری داشت و هم اکنون به این عبارت تغییر نام داده است. در نسخه قبلی جی تی متریکس حتما در نسخه قبلی با خطای Avoid multiple page redirects سرو گله زده‌اید. دو خطای دیگری که به این خطا مرتبط هستند، عبارتند از Minimize redirects در نسخه جدید و Avoid url redirects هستند.
      • Avoid Plugins (deprecated)

        • افزونه‌ها یکی از مهم‌ترین منابع سایت هستند زیرا با استفاده از انها می‌توان قابلیت‌های جدید را به سایت افزود. ولی مورد مهمی‌ که وجود دارد این است که گاها کدهای موجود در توابع افزونه‌ها با کدهای سایت و یا حتی هسته وردپرس تداخل دارند و مانع از نصب افزونه می‌شوند. مواقعی که کدهای افزونه و کدهای سایت با هم در تداخل هستند نیاز به یک وردپرس کار است تا بتواند این کدهای را بررسی نموده و به رفع مشکل بپردازند. حالا برای اینکه بتوان مشکل وردپرس و یا افزونه را پیدا کرد باید چکار کنیم؟
          • گاها تشخیص اینکه کدما افزونه و یا کدام فایل وردپرس مورد مشکل می‌شود مقداری سخت است و باید زمان زیادی صرف شود. یکی از این راه‌ها این است که تک تک افزونه‌های غیر فعال شوند و سایت مورد بررسی قرار گیرد تا متوجه شویم کدام افزونه مشکل ساز است. فراموش نکنی که قبل از اقدام به هر کاری در این رابطه یک بک‌آپ از سایتتان تهیه نمایید که اگر مشکلی برای سایتتان پیش آمد بتوانید بک ‌آپ برگدانید.
          • یکی دیگر از روش‌هایی که می‌تواند به شما کمک نماید استفاده از دیباگ وردپرس است. دیباگ کمک می‌کند تا اگر خطا یا تداخلی در هسته اصلی وردپرس ، افزونه و یا فایلی وجود داشته باشد بررسی و عیب یابی شوند تا راحت‌تذر بتوان مشکل را برطرف نمود. برای روشن کردن دیباگ وردپرس باید از طریق هاست اقدام نمایید. برای این کار مراحل زیر را طی کنید:
            • ابتدا وارد هاست سایت خود شوید. در صورتی که از هاست دایرکت ادمین استفاده می‌کنید می‌توانید وارد آدرس : www.yousitename.com:2222 شوید و اگر از هاست سی پنل استفاده می‌کنید وارد آدرس www.yoursitename.com:2082 شوید و با وارد کردن نام کاربری و رمز عبور وارد هاست خود شوید.
            • وارد file maneger هاست خود شوید.
            • وارد پوشه public_html شوید.
            • فایل wp-config.php را بیابید.
            • حالا نوبت به ویرایش این فایل رسیده است در هاست دایرکت ادمین روی گزینه ویرایش مقابل فایل کلیک نمایید و در هاست سی پنل بر روی فایل کلیک راست کنید و روی edit کلیک نمایید.
            • در فایل باز شده به دنبال ;define(WP_DEBUG’, true) بگردید و در صورتی که مقدار آن false است ان را به true و یا در واقع همان روشن تغییر دهید تا دیباگ فعال شود.(در صورتی که این خط کد را در فایل wp-config.php پیدا نکردید نگران نباشید خودتان می‌توانید این خط کد را به آن اضافه نمایید.)
            • پس از این کار تغییرات را ذخیره نمایید و به صفحه مربوط به افزونه و یا وردپرس بروید تا بتوانید خطای مربوطه را مشاهده کنید و بتوانید به رفع آن بپردازید.
            • پس از اینکه مشکل خود را رفع نمودید باید مقدار wp-debug را false نمایید تا حالت دیباگ خاموش شود.
          • این نکته را فراموش نکنید که یک وردپرس کار بهتر می‌تواند در رفع این خطاها به شما کمک نماید. از این رو اگر در وردپرس تخصصی ندارید بهتر است از یک وردپرس کار کمک بگیرید.
      • Combine external CSS (deprecated)

        • یکی از انواع فایل‌های مهم که گرافیک سایت را می‌توان با استفاده از آن تغییر داد کدها و  فایل‌های css هستند. ولی آیا استفاده بیش از حد آن صحیح است؟ در پاسخ باید بگوییم خیر صحیح نیست. برخی از افراد تمایلدارند که هر کدام از صفحات آنها گرافیک خاصی داشته باشد. از این رو برای هر صفحه فایل css جداگانه‌ای در نظر می‌گیرند و همین مسیله و تعدد فایل‌های css موجب می‌شود تعداد درخواست‌ها از سرور افزایش می‌یابد. برای اینکه بتوان این درخواست‌ها کاهش داد می‌توان از ترکیب کردن فایل‌های css استفاده نمود. در واقع کدهای css شما با استفاده از class و یا Id مورد استفاده قرار می‌گیرند از این رو شما می‌توانید فایل‌های استایل شیت خود را با یکدیگر ادغام نمایید. در حالت کلی طبق اشاره و استاندارهای گوگل بهتر است از 2 و نهایتا از 3 فایل برای css سایت خود استفاده نمایید.
      • Combine external JavaScript (deprecated)

        • این مورد مثل مورد بالا می‌باشد و نیازی نیست فایل‌های جاوا اسکریپت مختلفی داشته باشیم بلکه امکان ادغام برای برخی از فایل‌ها وجود دارد. توجه نمایید در صورتیکه دانشی از کدنویسی ندارید این موارد را نباید خودتان انجام دهید و باید به کدنویس بسپارید.
      • Combine images using CSS sprites

        • همانطور که می‌دانید تصاویر یکی از مهم‌ترین مدیاهایی هستند که در سایت مورد استفاده قرار می‌گیرند و تاثیر مناسبی بر سئو سایت شما دارند ولی در صورتیکه حجم یا تعداد بالایی داشته باشند باید اصول و قواعدی برای آنها راعایت شود تا بتوان از تاثیر منفی آنها بر سئو سایت جلوگیری کرد و جنبه‌های مثبت آن بر سئوسایت استفاده کرد. برخی از تصاویر وجود دارند که در صفحات مختلف سیت ثابت هستند و به ازای هر درخواست کاربر باید درخواستی برای لود شدن این تصاویر نیز به سرور ارسال شود. در صورتیکه تعداد این تصاویر بالا باشد در این صورت تعداد درخواست‌ها بسیار بالا می‌رود و در ابعاد وسیع برای مثال در سایت‌های پر بازدیدی همچون برخی از سایت‌های فروشگاهی این یعنی فاجعه. و در این موقع جی تی متریکس خطای COMBINATION IMAGE USING CSS SPRITES خواهد داد. در واقع رفع این خطا موجب می‌شود تعداد درخواست‌های HTTP کاهش یابد و از این رو تاثیر منفی بر سرعت سایت نداشته باشد. حالا برویم سراغ اینکه چطور این مسئه را رفع کنیم.
          • معمولا در صورتیکه این 3 بخش در سایت شما بیش از حد باشند با این مسئله مواجه خواهید شد:
            • تعداد آیکون‌های دکوری در سایت شما که شاید واقعا نیازی به آنها ندارید.
            • تعداد تصاویر لوگوهای شبکه‌های شبکه های اجتماعی
            • برخی از تصاویر ثابت در سایت شما
          • این مورد را با یک مثال حل می‌کنیم: فرض کنیم که در سایت در بخش فوتر دو تصویر به صورت ثابت هستند برای مثال یکی لوگوی سایت و دیگری تصویری از یک گواهینامه و این تصاویر در سایت ثابت هستند و به ازای تمامی صفحات لود می‌شوند پس یعنی دو درخواست ثابت. کاری که می‌توانیم بکنیم این است که با استفاده از ترکیب این تصاویر و با استفاده از css کاری کنیم که برخی از تصاویر نمایش داده نشوند. و توجه کنید که در این حالت باید دو عکس یک عکس داشته باشید. در این مواقع از دو روش می‌توان استفاده کرد.
            • روش اول: با استفاده از نرم افزار فتوشاپ یک فایل تصویر ایجاد کنید یعنی دو یا چند عکس را به یک عکس تبدیل کنید و این عکس را در بخش دلخواهتان آپلود کنید و سپس با استفاده از کدهای css و با تعریف نقاطی بر روی تصویر دلخواهتان می‌توانید تنها تصاویر دلخواهتان را در سایت لود کنید و همه تصاویر به نمایش درنیایند. برای مثال تنها تصویر لوگو نمایش داده شود. این نکته را فراموش نکنید که اگر هیچ دانشی در برنامه ندارید به هیچ وجه سراغ این روش نروید.
            • روش دوم: با استفاده از ابزار آنلاین website-performance : در صورتیکه هیچ دانشی از برنامه نویسی نداشته باشید این روش برای شما مناسب خواهد بود. برای این کار وارد سایت https://spritegen.website-performance.org/ شوید سپس با استفاده از گزینه open که در سمت چپ پایین قرار گرفته است تمامی تصاویری که می‌خواهید در یک فایل قرار گیرند را انتخاب می‌کنید و حتی می‌توانید تعیین کنید که می‌خواهید تصاویر به صورت افقی باشند و یا به صورت عمودی. در واقع در بخش css تنظیمات زیادی وجود دارد که می‌توانید اعمال کنید. پس از آن وارد بخش دانلود شوید، که در آنجا می‌توانید فرمت‌های png و فایل css و html را ببینید و در بخش example هم می‌توانید نمونه ای از خروجی همان تصاویری را ادغام شده‌اند مشاهده نمایید. حالا برای استفاده از این فایل‌های ابتدا باید تصاویر png را دانلود و در هاست و یا سایت خود در بخش پرونده‌های چند رسانه‌ای (در صورتیکه که از وردپرس استفاده می‌کنید) آپلود نمایید. سپس باید کدهای css ای را که توسط این ابزار ایجاد شده است در فایل‌های css سایت خودتان کپی نمایید و از ستون html هم می‌توانید کدهایی را قرار است در صفحه شما این تصاویر را نمایش دهند کپی کرده و در بخش html همان صفحه و یا هر بخش که قرار است این تصاویر و یا آیکون‌ها را نمایش دهد کپی نمایید. پس از انجام این کارها دوباره از جی تی متریکس آنالیز بگیرید. خواهید دید که دیگر این مورد برطرف شده است. (تصویر)
      • Defer loading of JavaScript (deprecated)

      • Defer parsing of JavaScript

        • هنگاهی که مرورگر در حال کردن اطلاعات است باید تمامی محتواهای داخل تگ script را خوانده و تجزیه نماید. از این رو بسیار مهم است که فایل‌های جاوااسکریپت بهینه شوند تا بتوان زمان نهایی لود سایت را کاهش داد. مورد مهم دیگر این است که چون حجم فایل‌های جاوااسکریپت نسبت به سایر فایل‌های سایت بالاست از این رو زمان بیشتری نسبت به سایر فایل‌ها لازم است تا این فایل‌ها اجرا شوند. به همین دلیل است که معمولا تاکید می‌شود فایل های SCRIPT در فوتر سایت قرار گیرد تا سایت لود شود و به کاربر نماشی داده شود و سپس فایل‌های جاوااسکریپت اجرا شوند. زیرا زمانی که فایل‌های جاوا اسکریپت در ابتدا قرار دارند مرورگر باید منتظر لود شدن فایل‌های جاوااسکریپت باشد و سپس بتواند سایر کدهای مزبوط به بدنه سایت را بخواند و همین مورد موجب می‌شود که افراد تصور نمایند سایت کند است. برای رفع این موردچندین راه حل وجود دارد که در رابطه با آنها صحبت می‌کنیم:
          • قرار دادن فایل‌های جاوا اسکریپت در فوتر سایت:
            • یکی از بهترین راه‌ها برای رفع این خطا قرار دادن فایل‌های جاوا اسکریپت در فوتر سایت است. برای این کار باید سایت شما به صورت html طراحی شده باشد و به فایل آن دسترسی داشته باشید. در این صورت شما می‌توانید تمامی تگ های <script> را از هدر سایتتان به فوتر سایت منتقل کنید. یعنی قبل از بسته شدن تگ <body> و یا به عبارتی قبل از <body/> در این صورت شما اجازه می‌دهید که ابتدا فایل‌های html و css و فونت‌ها لود شوند و در آخر فایل‌های حاوا اسکریپت لود شوند. در صورتی که از سیستم مدیریت محتوای آماده مانند وردپرس استفاده می‌کنید باید دور این روش را خط بکشید و از روش زیر استفاده کنید.
          • استفاده از افزونه‌ها :
            • در وردپرس قضیه کمی متفاوت‌تر خواهد بود. چون در وردپرس افزونه‌هایی هستند که برای اجرا به فایل‌‌های جاواسکریپت دارند و به صورت خودکار این فایل‌ها در هدر سایت قرار می‌دهند و این مورد کمی کار را سخت تر می‌کند. از این رو بهتر است از افزونه‌هایی استفاده شود که در این کار به ما کمک می‌کنند. برخی از افراد می‌گویند که استفاده از افزونه موجب استفاده بیشتر از منابع سرور و هاست شده و بهتر است این کار را به صورت دستی انجام دهیم .برای انجام دستی این کار باید کدهای مربوط به لود فایل را از داخل کدهای افزونه بردارید و آنها را به فوتر منتقل کنید و هر زمان که افزونه به روزرسانی انجام شد این کار باید مجددا انجام شود که در هر صورت کار آسانی نیست. از این رو پیشنهاد می‌شود از افرونه استفاده کنید که یک روش بی دردسر تر و راحت تر است. افزونه‌های مورد استفاده برای این مورد عبارتند از:
              • افزونه wp rocket
              • افزونه wp deferred javascripts وردپرس
              • افزونه autoptimize وردپرس
              • افزونه Async JavaScript وردپرس
              • افزونه Speed Booster Pack وردپرس
          • استفاده‌ از ویژگی‌هایdefer و async در برخی از تگ‌ها :
            • معمولا از این روش به راحتی و برای هر نوع زبان برنامه نویسی نمی‌توان استفاده نمود برای مثال این مورد در سیستم‌های مدیریت محتوا وردپرسی قابل استفاده نیست و بهتر است از افزونه استفاده شود ولی در حالتی که به کدهای Html به راحتی دسترسی دارید می‌توانید از دو تگ استفاده کنید. با استفاده از این تگ‌ها به مرورگر می‌گوییم که منتظر نباید ابتدا فایل‌هی جاوااسکریپت لود شود و سپس سایر فایل‌ها را لود نماید و می‌گوییم همزمان با لود شدن جاوااسکریپت سایر فایل‌ها را هم لود نماید. این دو تگ ماهیت یکسانی دارند ولی یک فرق با هم دارند و این فرق این است که اگر شما از تگ defer استفاده نمایید مرورگر پس از لود فایل‌های جا اسکریپ منتظر لود فایل‌های html می‌شود و سپس به اجرا می‌پردازند. در صورتی که استفاده از ویژگی async موجب می‌شود که همزمان به لود فایل‌های می‌پزدازد ولی منتظر نمی‌ماند که فایل html به صورت کامل لود شود و این مورد موجب می‌شود سرور زمان انتظار بالایی نداشه باشد و بتواند سریع‌تر به درخواست‌ها پاسخ دهد. برای مثال به شکل زیر می‌توانید از این دو تگ برای سایت خود استفاده نمایید:
                      • <script src="scriptname-defer.js" defer></script>
                        <script src="scriptname-async.js" async></script>
      • Enable text compression

        • در صورتی که با این issue مواجه شدید این به این معنا می‌باشد که شما می‌توانید file های textbase خود را بهینه‌سازی نمایید. فعال‌سازی این مورد چطور می‌تواند موجب بهبود سرعت سایت شود؟
          • به سادگی. در صورتی که فایل‌های متن محور شما مانند html و css و …. از لحاظ سایز کمتر شوند در این صورت وزن صفحات کاهش خواهد یافت و تجزیه و اود شدن آنها توسط مرورگر راحت تر و سریع خواهد بود. لود سریع به مخاطبین شما این فرصت را می‌دهد که با محتوای شما سریع تر و راحت تر تعامل داشته باشند.

    انواع خطاهای ساختاری جی تی متریکس و نحوه رفع آنها

    3 نوع الگوریتم کاهش سایز فایل توسط جی تی متریکس ارائه شده است که عبارتند از :

      • Gzip
      • Brotli
      • Deflate

    دو گزینه اول معمولا رایج‌تر هستند و توانایی بهینه‌سازی تا بالای 70 درصد را خواهند داشت.

    جی تی متریکس چگونه این خطا را نمایش می‌دهد؟

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

     

     

     

    انواع خطاهای ساختاری جی تی متریکس و نحوه رفع آنها

    حالا چگونه باید text compression را فعال نماییم؟

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

    سرور آپاچی :

    تنها کافی است کدهای زیر را در فایل 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>
    • وب سرور NGINX
      • برای فعال‌سازی این مورد در وب سرورهای NGINX باید وارد مسیر file/etc/nginx/nginx.conf. شوید و کد را به صورت زیر اصلاح نمایید:
      • ;gzip on
        ;gzip_vary on
        ;gzip_min_length 10240
        ;gzip_proxied expired no-cache no-store private auth
        ;gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml
        ;gzip_disable "MSIE [1-6]\."
      • وردپرس
      • در صورتی که از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید برای بررسی gzip compression از سایت https://technumero.com/check-gzip-compression استفاده نمایید. و سپس در صورتیکه به مشکل برخوردید و باید این ویژگی را فعال نمایید می‌توانید از یکی از روش‌های زیر استفاده نمایید:
        • بدون استفاده از افزونه :
          • وارد هاست خود شوید : (هاست سی پنل : بعد از آدرس سایت خود 2083: را بزنید و برای هاست دایرکت ادمین بعد از آدرس سایت خود 2222: وارد کنید و با وارد کردن نام کاربری و رمز وارد شوید.)
        • با استفاده از افزونه:
      • Enable Keep-Alive

        • قبل از اینکه شروع به گفتن نحوه رفع این خطا بگوییم باید شما را با مفهوم keep alive آشنا سازیم. keep alive در واقع این امکان را می‌دهد که بتوان جندین فایل را همزمان لود نمود. در واقع زمانی که کاربر سایتی را سرچ می‌کند و یا در سایت وارد صفحه‌ای می‌شود در این صورت درخواست‌هایی به سمت سرور ارسال می‌شود. برای مثال درخواست لود شدن چندین فایل به صورت همزمان و فعال‌سازی keep alive موجب می‌شود که هر بار بتوان بیشتر از یک فایل را از سمت سرور درخواست نمود. در قسمت پایین نمونه‌هایی از فعال نبودن و فعال بودن keep alive را می‌بینید.
          • در این تصویر keep alive فعال نیست و همان طور که مشاهده می‌کنید که فایل‌های css , html و جاوا اسکریپت به صورت جداگانه لود می‌شوند که این سرعت سایت را کاهش می‌دهد. حالا تصور کنید که به صورت همزمان چندین سایت این درخواست‌ها را به سمت سرور ارسال نمایند که در این صورت سایت سرعت نامناسبی خواهد داشت.
          • در این تصویر می‌بینید که خاصیت keep alive فعال شده است و این مورد موجب می‌شود به صورت پایپ لاین این لود شدن ها صورت می‌گیرد و در این صورت سرعت سایت افزایش خواهد یافت.
        • حالا می‌خواهیم یاد بگیریم که چگونه keep alive را فعال کنیم:
          • فعال سازی Keep-alive از طریق فایل .htaccess
            • برای فعالسازی از طریق هاست مهم نیست که هاست شما دایرکت ادمین باشد و یا هاست سی پنل. برای ورود به هاست دایرکت ادمین از آدرس www.yoursite.com:2222 و برای ورود به هاست سی پنل از آدرس www.yousite.com:2083 استفاده نمایید.
            • پس از وورد به هاست در بخش filemanager روی public_html کلیک کنید و دنبال فایل htaccess. بگردید وارد ویرایش این فایل شوید.(در هاست دایرکت ادمین روی گزینه‌ی edit مقابل این فایل کلیک کنید و در هاست سی پنل روی فایل کلیک راست کنید و روی edit کلیک نمایید.)
            • سپس این کد را در انتهای فایل htaccess کپی نمایید و فایل را ذخیره کنید. با استفاده از این کدها فایل‌های شما به صورت همزمان شروع به لود شدن از سرور کرده و این مورد موجب می‌شود سرعت سایت افزایش یابد.

    <ifModule mod_headers.c> Header set Connection keepalive </ifModule>

          • enable keep alive در وردپرس
            • در سایت‌هایی که به صورت وردپرسی هستند نیازی نیست لزوما وارد هاست شوید می‌توانید از بخش پیشخوان وردپرس این کار را انجام دهید. لذا وارد نمایش> ویرایشگر می‌شود و سپس از وارد فایل htaccess. شده و می‌توانید فایل‌ را ویرایش کرده و پرونده را به روز رسانی نمایید.
          • فعال سازی Keep-Alive در Apache
            • در صورتی که به سرور خود دسترسی دارید و از نوع آپاچی است دراین صورت می‌توانید تنظیمات آن را تغییر دهید و به صورت زیر عمل کنید:
            • <IfModule mod_headers.c>
              Header set Connection keep-alive
              </IfModule>

              بعد از ذخیره کردن فایل قابلیت keep alive در سایت فعال میشه و باعث میشه که فایل‌های سایت شما به صورت همزمان شروع به دریافت از سمت سرور بکنند که این کار باعث لود سریعتر و افزایش سرعت سایت خواهد شد.

              فعال کردن Keep Alive در سرور آپاچی

              در صورتی که به سرور دسترسی دارید و از نوع آپاچی است می‌توانید از کد زیر استفاده کنید.

              #
              # KeepAlive: Whether or not to allow persistent connections (more than
              # one request per connection). Set to "Off" to deactivate.
              #
              KeepAlive On
              
              #
              # MaxKeepAliveRequests: The maximum number of requests to allow
              # during a persistent connection. Set to 0 to allow an unlimited amount.
              # We recommend you leave this number high, for maximum performance.
              #
              MaxKeepAliveRequests 100
              
              #
              # KeepAliveTimeout: Number of seconds to wait for the next request from the
              # same client on the same connection.
              #
              KeepAliveTimeout 100
              

    توضیحی در رابطه با قسمت های که در کد بالا به رنگ قرمز نمایش داده شده‌اند توضیح داده می‌شوند که بدانید دقیقا چکار می‌کنند.

          • KeepAlive در صورتی که on باشد در اینصورت شما قادر به استفاده از آن خواهید بود در صورتی که به جای on کلمه off نوشته شود در این صورت خاموش بوده و فایل‌های شما به صورت همزمان دریافت نخواهند شد.
          • MaxKeepAliveRequests در مقابل این نوشته می‌توانید حداکثر تعداد درخواست‌های مجاز در هر اتصال را تعیین کنید که بهتر است به آن عدد بالایی اختصاص دهید. در صورتیکه عدد صفر قرار داده شود به معنای درخواست صفر نیست بلکه دقیقا برعکس یعنی تعداد درخواست‌ها می‌توانند بی‌نهایت باشند.
          • KeepAliveTimeout این معیار میزان ثانیه‌هایی که سرور برای درخواست بعدی در همان اتصال صبر می‌کند را مشخص می‌نماید.
          • فعال سازی Keep-Alive در NGINX
            • در صورتی که وب سرور شما از نوع enginx است در این صورت باید دنبال کد keepalive_disable باشید و آن را enable نمایید تنها موردی که باید به آن توجه کنید این است که چرا disable بوده است که این مورد می‌تواند دلایل مختلفی داشته باشد. زیرا معمولا در این نوع وب سرور باید keep-alive فعال باشد.
      • Improve server response time (deprecated)

        • TTFB و یا همان زمان اولین بایت به server response time و یا زمان پاسخ سرور یکی از موارد بسیار مهم برای رقم زدن یک تجربه کاربری خوب است. جهت مطالعه بیشتر در این رابطه می‌توانید مقاله نحوه استفاده از جی تی متریکس را مطالعه نمایید. زمان اولین بایت به زمانی گفته می‌شود که مرور گر اولین بایت را از سرور دریافت می‌کند. کاهش زمان پاسخ سرور یکی از موارد حیاتی برای سایت و ایجاد تجربه کاربری خوب است.TTFB آهسته و یا کند اثر منفی بر ساست شما خواهد داشت زیرا کاربران تا زمانی که مرورگر اولین بایت از پاسخ سرور را دریافت نماید با صفحه خالی روبرو خواهند شد ازاین رو بهبود زمان پاسخ سرور می‌تواند موجب بهبود performance و یا همان عملکرد سایت شما شود.
          • چگونه زمان پاسخ سرور می‌تواند عملکرد سایت شما را تحت تاثیر قرار دهد؟
            • زمانی که کابری می‌خواهد به یکی از صفحات سایت شما دسترسی داشته باشد در این صورت درخواستس از طرف مرورگر به سرور ارسال می‌شود و سرور باید پاسخ مناسب را به مرورگر برگرداند و این پاسخ به صورت کدهای html به مرورگر بازگردانده می‌شود.(در تصویر زیر مشاهده می‌کنید.)

    انواع خطاهای ساختاری جی تی متریکس و نحوه رفع آنهااین پروسه به فاکتورهای مختلفی بستگی دارد: برای مثال به شرعت انتقال در شبکه اینترنت، تاخیر سرور ، کارآیی کدها ( application code) و عملکرد سرور. هر کدام از این فاکتورها به تنهایی بر روی TTFB تاثیر دارند و وجود مشکل در هر کدام موجب تحت تاثیر قرار گرفتن TTFB و یا زمان اولین بابت خواهد بود. TTFB سریع به این معنا است که کاربران شما پاسخ سریع را از سرور دریافت می‌کنند و به این نکته توجه نمایید که تعاریف مختلفی برای TTFB وجود دارد یکی از آنها فرمول زیر می‌باشد.

    Rediret duration +connection duration + Backend duration = TTFB

     

    انواع خطاهای ساختاری جی تی متریکس و نحوه رفع آنها

      • این خطا زمانی توسط جی تی متریکس اطلاع داده می‌شود که TTFB از 600 میلی ثانیه بیشتر شود.
      • حالا می‌خواهیم بدانیم چگونه می‌توان زمان پاسخ سرور را کاهش داد؟؟؟
        • بهینه سازی کدهای سایت علی الخصوص کدهایی که درخواستی را از پایگاه داده دارند.(که برای این کار باید functionih در بهینه‌ترین حالت ممکن خود باشند و queryهای غیر ضروری حذف شوند. )
        • مورد بعدی کش سمت سرور است.
        • و مورد آخر هم این است که اگر می‌توانید هزینه انجام دهید بهتر است منابع سخت افزاری خود را ارتقا دهید برای مثال حافظه و cpu بیشتری را به سرور خود اختصاص دهید. پیشنهاد می‌شود از یک سرور قدرتمند استفاده نمایید در این صورت تمامی موارد بالا به خودی خود حذف خواهند شد.
      • Inline small CSS

        • فایل‌های css در اصل فایل‌‌هایی هستند که با استفاده از آنها می‌توان گرافیک یک سایت را تغییر داد. فایل‌های css را می‌توان از چند طریق در سایت خود داشت. یکی از این روش‌ها inline و یا داخلی است یعنی در اصل css های مربوط به هر صفحه در همان صفحه قرار می‌گیرد. یعنی در داخل فایل html می‌توان در داخل تگ style ، کدهای css خاص همان صفحه را داشت. روش بعدی استفاده از css های internal است یعی اینکه در یک فایل جداگانه css ها نوشته شوند و با استفاده از تگ مربوطه در داخل فایل html فراخوانی شوند. روش دیگر استفاده از css های خارجی و یا همان external است و منابع و کدهای آن به هیچ وجه در هاست و دامنه سایت شما قرار ندارد و بر روی هاست دیگری از هاست شما میزبانی می‌شود ولی برای استفاده از قابلیت‌های آن می‌توان در سایت خود از آنها استفاده نمود.
        • حالا در این بخش می‌خواهیم در رابطه با inline css ها صحبت کنیم. در واقع این خطا زمانی توسط جی تی متریکس اطلاع داده می‌شود که css های درونی بسیار کوچک هستند. حالا سوال مهمی که پیش می‌آید این است که استفاده از کدام روش برای داشتن css ها مناسب است. معمولا این مورد به هدف و سیاست شما بستکی دارد ولی این نکته را فراموش نکنید که external css را برای لود شدن و اعمال شدن در داخل صفحه از اولویت آخر برخوردار هستند. زیرا مروگرها برای اینکه بتوانند سریع‌تر سایت را به کاربر نمایش دهند ترجیح می‌دهند که در ابتدا css های inline و internal را لود کنند و بین این دو css هم اولویت اول با inline است. پس اگر سایتی از css خارجی استفاده کند چه اتفاقی خواهد افتاد؟؟؟
    • در پاسخ به این سوال باید بگوییم در ابتدا فایل‌های css خارجی توسط مرورگر مسدود شده و بارگیری نمی‌شوند و پس از اتمام بارگیری css های inline و internal از لحاظ مسدود خارج شده و لود می‌شوند. پس حتی الامکان بهتر است از css های خارجی استفاده نکنید و همان‌ها را در داخل سایت خود بنویسید.
    • حالا سوال دیگری که پیش می‌آید این است که بین فایل‌های stylesheet کدام یک بهتر است inline؟ internal؟
      • سعی کنید بیشتر فایل‌های css شما به صورت internal باشد و در مواقع بسیار خاص از inline استفاده کنید. برای اینکه این موضوع کامل برای شما روشن شود اجازه دهید با استفاده از یک قطعه کد آن را بازگو کنیم. فرض کنید به css ای نیازداریم که اندازه فونت در چند پاراگراف بخصوص small باشد:
        • <html>
            <head>
              <"link rel="stylesheet" href="https://sitesazz.ir/css/smallparagh.css>
            </head>
            <body>
              <"p class="smallparagh>
          کسب و کار زرین با سایت ساز زرین 
              </p>
            </body>
          
          </html>
          
          

    و این فایل css را ایجاد می‌کنیم و در داخل هاست و در فایل‌ css قرار می‌دهیم که نام smallparagh می‌باشد. و به شکل زیر است:

    {;font-size:small}smallparagh.
    
    

    آیا واقعا نیاز بود برای css به این کوچکی یک فایل css جداگانه با نام smallparagh ایجاد شود؟؟؟

    خیر نیازی نبوده است و در این صورت با این خطا روبرو خواهیم شد. برای رفع این مسئله می‌توان این فایل css کوچک را به صورت inline در داخل کدهای html همان صفحه بخصوص فراخوانی نمود و به صورت زیر عمل کرد:

    <html>

    <head>

    <style>

    {;font-size:small}smallparagh.

    </style>

    </head>

    <body>

    </p>کسب و کار زرین با سایت ساز زرین<” p class=”smallparagh >

    </body>

    </html>

    در واقع کاری که انجام شد به این صورت هست که فایل css حذف شد و به صورت یک فایل css درون خطی ایجاد شد. در مقاصد خاص که ازکدهای بسیار کوتاه استفاده می‌شود می‌توان از روش درون خطی استفاده نمود. این نکته را فراموش نکنید که استفاده بالا از css های درون خطی خود مسئله‌ی دیگری را ایجاد خواهد کرد که معمولا اخطار برای این مسئله است که فایل‌های css یا بای به صورت ادغامی استفاده شود و یا در داخل تگ head استفاده شود. پس سعی کنید استفاده از این روش را به حداقل‌ترین حالت ممکن برسانید مگر اینکه مجبور به استفاده از آن باشید.

    • Inline small JavaScript

      • نکاتی که در بخش قبل در رابطه با css ها گفته شد. برای فایل‌های جاواسکریپت نیز صادق است. در واقع درون خطی کردن برخی از فایل‌های جاوا اسکریپت خارجی نیز کمک خوبی به بهبود سرعت سایت شما خواهد کرد. زیرا همانطور که در بخش قبل گفتیم مرورگر منابع خارجی را در ابتدا مسدود می‌کند.
    • Leverage browser caching

      • این خطا نیز یکی از خطاهای رایج در جی تی متریکس است که رفع آن تاثیر خوبی بر سرعت سایت شما خواهد داشت. زیرا این خطا در ارتباط با سرور است و از اهمیت متوسط برخوردار است. قبل از اینکه بدانید چگونه باید این خطا را رفع کنید باید بدانید چه زمانی این مسئله برای سایت شم پیش می‌آید. معمولا وقتی از سیستم‌های مدیریت محتوا رایگان استفاده می‌کنیم مواجهه با این موارد عادی است. البته به این مورد باید اشاره کنیم که اگر از CDN استفاده می‌کنید دیگر این مورد تنها به هاست و سرور مرتبط نخواهد بود و باید تنظیمات CDN نیز بررسی شود. ولی اگر از CDN مناسب و با کیفیت استفاده کنید دیگر نیازی به نگرانی در این رابطه ندارید زیرا این مسئله برای ان پیش نخواهد آمد. حالا بریم سراغ اینکه بدانیم اصلا این issue چیست؟
      • Laverage browser caching به کش مرورگر شما اشاره می‌کند. اگر توجه کرده باشید ما گاها وارد سایتی می‌شویم و در ابتدا سایت کمی دیرتر لود می‌شود، ولی اگر وارد صفحه‌ی دیگر از همان سایت شویم و یا اینکه از همان سایت خارج شویم و دوباره وارد شویم سایت و یا صفحات با سرعت بالاتری لود می‌شوند. در واقع وقتی از سایتی بازدیدی انجام می‌شود نیاز هست که فایل‌هایی مانند css و html و بسیاری فایل دیگر توسط مرورگر لود شود. حالا برخی از این فایل‌ها بین صفحات مشترک هستند و بهتر است در مراجعه به هر صفحه هر بارلود نشوند تا سرعت لود کاهش یابد.

     

      • برای رفع این مسئله فایل‌های مشترک از در کش مرورگر و یا همان کش لوکال و یا کش محلی ذخیره می‌شود و فایل های مشترک از مرورگر لود می‌شود و دیگر درخواست مجدد به سرور ارسال نمی‌شود و همین مورد می‌تواند موجب بهبود سرعت شود. زیرا سرور کمتر درگیر خواهد بود.

     

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

     

      • این خطا به این اشاره می‌کند که یا زمان کش شما کوتاه است و یا اینکه درخواست Http cache headers به خوبی صورت نمی‌گیرد.

     

      • برای رفع این خطا باید بدانید از چه زبان برنامه نویسی و وب سروری استفاده می‌کنید. زیرا روش‌هایی که برای راه حل وجود دارد با یکدیگر متفاوت هستند. و برای رفع این مسئله دو روش با عنوان‌های Expires و Cache-control وجود دارد.
        • روش cache-control یک زمانی مثلا سال ماه و یا هفته و … را تعیین می‌کند.
        • روش expired تاریخ انقضای کش را مشخص می‌کند.
      • معمولا بهتر است از روش اول استفاده کنید ولی با این وجود در این قسمت هر دو روش را با هم بررسی می‌کنیم. قبل از اینکه بخواهیم در رابطه به هر متد صحبت کنیم شما را با چند مفهمو آشنا می‌کنیم که بهتر قادر به رفع این مسئه باشید.
        • Cache-Control: Max-Age
          • که شامل max-age هایی به این صورت است:

    یک دقیقه: MAX-AGE=60(فایل به مدت یک دقیقه در کش مرورگر کاربر ذخیره می‌شود.)
    یک ساعت: MAX-AGE=3600(فایل به مدت یک ساعت در کش مرورگر کاربر ذخیره می‌شود.)
    یک روز: MAX-AGE=86400(فایل به مدت یک روز در کش مرورگر کاربر ذخیره می‌شود.)
    یک هفته: MAX-AGE=604800(فایل به مدت یک هفته در کش مرورگر کاربر ذخیره می‌شود.)
    یک ماه: MAX-AGE=2628000(فایل به مدت یک ماه در کش مرورگر کاربر ذخیره می‌شود.)
    یک سال: MAX-AGE=31536000(فایل به مدت یک سال در کش مرورگر کاربر ذخیره می‌شود.)

        • Cache-Control: No-Cache
          • به این معنی است که یک مرورگر ممکن است پاسخی را در حافظه پنهان نگه دارد، اما ابتدا باید یک درخواست اعتبار سنجی به سرور مبدا ارسال کند.
        • Cache-Control: No-Store
          • به این معنی که مرورگر اجازه ندارند پاسخی را در حافظه پنهان ذخیره کنند و باید هر بار که درخواست می‌شود آن را از سرور فراخوانی کند. و در هر صورت از کش کردن جلوگیری می‌کند. این تنظیم معمولاً برای داده های حساس مانند جزئیات بانکی شخصی استفاده می شود.
        • Cache-Control: Public
          • یعنی اینکه این کش به صورت عمومی بوده و خصوصی نیست و مرورگر اجازه کش دارد.
        • Cache-Control: Private
          • این به معناست که کش برای کاربر خاصی باید اتفاق بیفتد و به صورت عمومی نیست که برای همه کاربرها اتفاق بیفتد.

     

              • نحوه رفع laverage browser caching در زبان‌های مختلف

                • حل مشکل کش با روش Cache-Control در php
                  • باید این کد را در قسمت بالای فایل htaccess. در هاست خود قرار دهید.
                  • # 1 Month for most static assets
                    <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
                    Header set Cache-Control "max-age=2592000, public"
                    </filesMatch>
                • حل مشکل کش با روش expired در php
                  • در این بخش دو روش معرفی می‌شود که می‌‌شود که می‌توانید هر دو آنها را استفاده نمایید. این کدها باید در بالای فایل htaccess. هاست شما قرار گیرد.
                  • روش اول:
                  • ## EXPIRES CACHING ##
                    <IfModule mod_expires.c>
                    ExpiresActive On
                    ExpiresByType image/jpg "access 1 year"
                    ExpiresByType image/jpeg "access 1 year"
                    ExpiresByType image/gif "access 1 year"
                    ExpiresByType image/png "access 1 year"
                    ExpiresByType text/css "access 1 month"
                    ExpiresByType text/html "access 1 month"
                    ExpiresByType application/pdf "access 1 month"
                    ExpiresByType text/x-javascript "access 1 month"
                    ExpiresByType application/x-shockwave-flash "access 1 month"
                    ExpiresByType image/x-icon "access 1 year"
                    ExpiresDefault "access 1 month"
                    </IfModule>
                    ## EXPIRES CACHING ##
                    
                    
                • روش دوم:
                • <IfModule mod_expires.c>
                  
                      ExpiresActive on
                      ExpiresDefault                                      "access plus 1 month"
                  
                    # CSS
                  
                      ExpiresByType text/css                              "access plus 1 year"
                  
                  
                    # Data interchange
                  
                      ExpiresByType application/atom+xml                  "access plus 1 hour"
                      ExpiresByType application/rdf+xml                   "access plus 1 hour"
                      ExpiresByType application/rss+xml                   "access plus 1 hour"
                  
                      ExpiresByType application/json                      "access plus 0 seconds"
                      ExpiresByType application/ld+json                   "access plus 0 seconds"
                      ExpiresByType application/schema+json               "access plus 0 seconds"
                      ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
                      ExpiresByType application/xml                       "access plus 0 seconds"
                      ExpiresByType text/xml                              "access plus 0 seconds"
                  
                  
                    # Favicon (cannot be renamed!) and cursor images
                  
                      ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
                      ExpiresByType image/x-icon                          "access plus 1 week"
                  
                    # HTML
                  
                      ExpiresByType text/html                             "access plus 0 seconds"
                  
                  
                    # JavaScript
                  
                      ExpiresByType application/javascript                "access plus 1 year"
                      ExpiresByType application/x-javascript              "access plus 1 year"
                      ExpiresByType text/javascript                       "access plus 1 year"
                  
                  
                    # Manifest files
                  
                      ExpiresByType application/manifest+json             "access plus 1 week"
                      ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
                      ExpiresByType text/cache-manifest                   "access plus 0 seconds"
                  
                  
                    # Media files
                  
                      ExpiresByType audio/ogg                             "access plus 1 month"
                      ExpiresByType image/bmp                             "access plus 1 month"
                      ExpiresByType image/gif                             "access plus 1 month"
                      ExpiresByType image/jpeg                            "access plus 1 month"
                      ExpiresByType image/png                             "access plus 1 month"
                      ExpiresByType image/svg+xml                         "access plus 1 month"
                      ExpiresByType image/webp                            "access plus 1 month"
                      ExpiresByType video/mp4                             "access plus 1 month"
                      ExpiresByType video/ogg                             "access plus 1 month"
                      ExpiresByType video/webm                            "access plus 1 month"
                  
                  
                    # Web fonts
                  
                      # Embedded OpenType (EOT)
                      ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
                      ExpiresByType font/eot                              "access plus 1 month"
                  
                      # OpenType
                      ExpiresByType font/opentype                         "access plus 1 month"
                  
                      # TrueType
                      ExpiresByType application/x-font-ttf                "access plus 1 month"
                  
                      # Web Open Font Format (WOFF) 1.0
                      ExpiresByType application/font-woff                 "access plus 1 month"
                      ExpiresByType application/x-font-woff               "access plus 1 month"
                      ExpiresByType font/woff                             "access plus 1 month"
                  
                      # Web Open Font Format (WOFF) 2.0
                      ExpiresByType application/font-woff2                "access plus 1 month"
                  
                  
                    # Other
                  
                      ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
                  
                  </IfModule>
                  
              • حل مشکل کش با روش expire در Nginx
                • این کد باید در Nginx قرار داده شود و در نهایت ذخیره شود.
                • }$location ~* \.(jpg|jpeg|gif|png) 
                  ;expires 365d
                  {
                  
                  }$location ~* \.(pdf|css|html|js|swf)$ 
                  ;expires 2d
                  {
                  
                  
            • حل مشکل کش با متد Cache-Control در Nginx
              • این کد را می‌توانید در Nginx قرار دهید و سپس اطلاعات را ذخیره نمایید.
              • }location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ 
                ;expires 2d
                ;"add_header Cache-Control "public, no-transform
                {
                
                
          • نحوه اعمال کش در سایت های asp.net و سرورهای ویندوز
            • همیشه همه سایت‌ها وردپرسی و یا php نیستند که بخواهیم از کدهای بالا استفاده کنیم. زمانی که سایت‌های شما asp.net هستند با استفاده از دو روش این امکان وجود دارد که کش را فعال نمایید. هر دو روش در قسمت پایین توضیح داده خواهند شد:
              • فعال کردن cache از طریق روش web.config
                • همانطور که از نام آن پیداست باید در هاست خود(در کنترل پنل هاستتان وارد فایل web.config) شوید و سپس system.webserver را پیدا کرده و کد زیر را بعد از <system.webserver> کپی کنید.
                • <staticContent>
                     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
                  </staticContent>
                  
                  

    با استفاده از این کد به مدت 365 روز فایل‌های استاتیک کش خواهند شد.

              • فعال کردن cache از طریق IIS
                • قبل از اینکه بخواهیم در رابطه با این روش صحبت کنیم نکاتی وجود دارند که باید از آنها مطلع شوید:
                • شاید برایتان این سوال پیش بیاید که اصلا IIS چیست؟ IIS وب سرور خصوص ویندوز است که سایت بر روی آن قرار می‌گیرد. در هاست‌های اشتراکی شما نمی‌توانید به هاست خود دسترسی داشته باشید و برای اینکه بتوانید کش را فعال کنید باید با پشتیبانی ارائه دهنده خدمات در ارتباط باشید ولی اگر هاست مورد استفاده شما اختصاصی است میتوانید مراحل زیر را طی نمایید:
                  • 1- وب سرور خود را اجرا و بر روی نام سایت خود کلیک نمایید.
                  • 2- سپس HTTP Response Header را انتخاب کنید.
                  • 3- در گوشه سمت راست آن بخش Action، گزینه‌ای با عنوان add می‌بینید. روی آن کلیک کنید.
                  • پنجره‌ای برای شما به نمایش درمی‌آید که باید در بخش نام (name) ، cache-control را وارد نموده و در کادر value باید max-age=31536000 را وارد کنید.
          • نحوه رفع laverage browser caching در وردپرس با استفاده از افزونه

            • معمولا در وردپرس با استفاده از افزونه‌ها به راحتی می‌توان این مشکل را برطرف نمود. برای این کار می‌توانید از افزونه‌های زیر بهره مند شوید که عبارتند از :
              • افزونه WP rocket
              • افزونه سوپر کش
              • cache enabler
      • نکته بسیار مهمی که در رابطه با سایت‌های وردپرسی که از آمار گوگل آنالیتیکس استفاده می‌کنند، باید رعایت شود این است که فایل script ای که در بخش header سایت کپی شده است تنها به مدت 2 ساعت در کش باقی می‌ماند. در صورتی که از سایت وردپرسی استفاده می‌کنید می‌توانید با استفاده از افزونه Complete Analytics Optimization Suite می‌توانید کش فایل js را تغییر دهید. برای این کار مراحل زیر را طی نمایید:
            • وارد بخش تنظیمات افزونه شوید.
            • در کادر اول که همان کادر Google Analytics Tracking ID کد گوگل آنالیتیکس خود را که به صورت UA-xxxxxxx-x هست وارد نمایید.
            • در کادر دوم Position of tracking code را در حالت فوتر قرار دهید. و تنظیمات را ذخیره کنید.

     

          • روش دوم برای سایت‌های php و یا وردپرسی:
            • قبل از شروع ابتدا اطمینان حاصل کنید از کدهای browser caching در هاست خود استفاده می‌کنید. که روش های مختلفی در بالا گفته شد. ولی اگر از هیچ کدام از کدهای بالا استفاده نکردید می‌توانید این کد را در فایل htaccess. سایت خود قرار دهید:
            •  ----------------------------------------------------------------------#
               | Komprimierung und Caching |#
               ----------------------------------------------------------------------#
              
               .Serve resources with far-future expires headers#
              #
               (!) If you don't control versioning with filename-based#
               cache busting, you should consider lowering the cache times#
              .to something like one week#
              #
               https://httpd.apache.org/docs/current/mod/mod_expires.html#
              
              <IfModule mod_expires.c>
              
                  ExpiresActive on
                  ExpiresDefault                                      "access plus 1 month"
              
                 CSS#
              
                  ExpiresByType text/css                              "access plus 1 year"
              
              
                # Data interchange
              
                  ExpiresByType application/atom+xml                  "access plus 1 hour"
                  ExpiresByType application/rdf+xml                   "access plus 1 hour"
                  ExpiresByType application/rss+xml                   "access plus 1 hour"
              
                  ExpiresByType application/json                      "access plus 0 seconds"
                  ExpiresByType application/ld+json                   "access plus 0 seconds"
                  ExpiresByType application/schema+json               "access plus 0 seconds"
                  ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
                  ExpiresByType application/xml                       "access plus 0 seconds"
                  ExpiresByType text/xml                              "access plus 0 seconds"
              
              
                # Favicon (cannot be renamed!) and cursor images
              
                  ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
                  ExpiresByType image/x-icon                          "access plus 1 week"
              
                # HTML
                  ExpiresByType text/html                             "access plus 0 seconds"
              
              
                # JavaScript
              
                  ExpiresByType application/javascript                "access plus 1 year"
                  ExpiresByType application/x-javascript              "access plus 1 year"
                  ExpiresByType text/javascript                       "access plus 1 year"
              
              
                # Manifest files
              
                  ExpiresByType application/manifest+json             "access plus 1 week"
                  ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
                  ExpiresByType text/cache-manifest                   "access plus 0 seconds"
              
              
                # Media files
              
                  ExpiresByType audio/ogg                             "access plus 1 month"
                  ExpiresByType image/bmp                             "access plus 1 month"
                  ExpiresByType image/gif                             "access plus 1 month"
                  ExpiresByType image/jpeg                            "access plus 1 month"
                  ExpiresByType image/png                             "access plus 1 month"
                  ExpiresByType image/svg+xml                         "access plus 1 month"
                  ExpiresByType image/webp                            "access plus 1 month"
                  ExpiresByType video/mp4                             "access plus 1 month"
                  ExpiresByType video/ogg                             "access plus 1 month"
                  ExpiresByType video/webm                            "access plus 1 month"
              
              
                # Web fonts
              
                  # Embedded OpenType (EOT)
                  ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
                  ExpiresByType font/eot                              "access plus 1 month"
              
                  # OpenType
                  ExpiresByType font/opentype                         "access plus 1 month"
              
                  # TrueType
                  ExpiresByType application/x-font-ttf                "access plus 1 month"
              
                  # Web Open Font Format (WOFF) 1.0
                  ExpiresByType application/font-woff                 "access plus 1 month"
                  ExpiresByType application/x-font-woff               "access plus 1 month"
                  ExpiresByType font/woff                             "access plus 1 month"
              
                  # Web Open Font Format (WOFF) 2.0
                  ExpiresByType application/font-woff2                "access plus 1 month"
              
              
                # Other
              
                  ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
              
              </IfModule>
              
              <IfModule mod_deflate.c>
              # Insert filters / compress text, html, javascript, css, xml:
              AddOutputFilterByType DEFLATE text/plain
              AddOutputFilterByType DEFLATE text/html
              AddOutputFilterByType DEFLATE text/xml
              AddOutputFilterByType DEFLATE text/css
              AddOutputFilterByType DEFLATE text/vtt 
              AddOutputFilterByType DEFLATE text/x-component
              AddOutputFilterByType DEFLATE application/xml
              AddOutputFilterByType DEFLATE application/xhtml+xml
              AddOutputFilterByType DEFLATE application/rss+xml
              AddOutputFilterByType DEFLATE application/js
              AddOutputFilterByType DEFLATE application/javascript
              AddOutputFilterByType DEFLATE application/x-javascript
              AddOutputFilterByType DEFLATE application/x-httpd-php
              AddOutputFilterByType DEFLATE application/x-httpd-fastphp
              AddOutputFilterByType DEFLATE application/atom+xml 
              AddOutputFilterByType DEFLATE application/json
              AddOutputFilterByType DEFLATE application/ld+json 
              AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
              AddOutputFilterByType DEFLATE application/x-font-ttf 
              AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
              AddOutputFilterByType DEFLATE font/opentype 
              AddOutputFilterByType DEFLATE image/svg+xml
              AddOutputFilterByType DEFLATE image/x-icon 
              
              # Exception: Images
              SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary
              
              # Drop problematic browsers
              BrowserMatch ^Mozilla/4 gzip-only-text/html
              BrowserMatch ^Mozilla/4\.0[678] no-gzip
              BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
              
              # Make sure proxies don't deliver the wrong content
              Header append Vary User-Agent env=!dont-vary
              </IfModule>
              
              #Alternative caching using Apache's "mod_headers", if it's installed.
              #Caching of common files - ENABLED
              <IfModule mod_headers.c>
              <FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt)$">
              Header set Cache-Control "max-age=2592000, public"
              </FilesMatch>
              </IfModule>
              
              <IfModule mod_headers.c>
                <FilesMatch "\.(js|css|xml|gz)$">
                  Header append Vary Accept-Encoding
                </FilesMatch>
              </IfModule>
              
              # Set Keep Alive Header
              <IfModule mod_headers.c>
                  Header set Connection keep-alive
              </IfModule>
              
              # If your server don't support ETags deactivate with "None" (and remove header)
              <IfModule mod_expires.c> 
                <IfModule mod_headers.c> 
                  Header unset ETag 
                </IfModule> 
                FileETag None 
              </IfModule>
              
              

    پس از اینکه این کدها را در هاست خود قرار دادید حالا باید مراحل زیر را طی نمایید:

    • ابتدا وارد این آدرس شوید : https://www.google-analytics.com/analytics.js و تمامی کدها رو کپی نمایید.
    • سپس وارد هاست خود شوید و یک فایل جدید ایجاد کنید.
    • کدهایی که از آدرس بالا کپی کرده‌اید در این فایل paste کنید و نام فایل را analytics.js وارد نموده و ذخیره نمایید.
    • حالا وارد کد اسکریپت گوگل آنالیتیکس خود را پیدا کنید که معمولا در پوشه header.php قرار دارد و در آن یک url وجود دارد که باید آن را با url جدید با عنوان https://youdomain.com/analytics.js جایگزین کنید.
    • سپس همان کدهای گوگل که تغییرات بالا روی آن انجام شد. باید در فایل footer.php و قبل از wp_footer(); کپی شوند.
    • سپس در public html هست خود یک file ایجاد کنید و کدهای زیر را در آن کپی کنید و نام آن را analytics-update.php قرار داده و ذخیره نمایید.
        • کدهای زیر:
        • <?
          // script to update local version of Google analytics script
          
          // Remote file to download
          $remoteFile = 'https://www.google-analytics.com/analytics.js';
          $localfile = 'Hier kommt der absolute Pfad zum Script hinein';
          //For Cpanel it will be /home/USERNAME/public_html/local-ga.js
          
          // Connection time out
          $connTimeout = 10;
          $url = parse_url($remoteFile);
          $host = $url['host'];
          $path = isset($url['path']) ? $url['path'] : '/';
          
          if (isset($url['query'])) {
           $path .= '?' . $url['query'];
          }
          
          $port = isset($url['port']) ? $url['port'] : '80';
          $fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout );
          if(!$fp){
           // On connection failure return the cached file (if it exist)
           if(file_exists($localfile)){
           readfile($localfile);
           }
          } else {
           // Send the header information
           $header = "GET $path HTTP/1.0\r\n";
           $header .= "Host: $host\r\n";
           $header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";
           $header .= "Accept: */*\r\n";
           $header .= "Accept-Language: en-us,en;q=0.5\r\n";
           $header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";
           $header .= "Keep-Alive: 300\r\n";
           $header .= "Connection: keep-alive\r\n";
           $header .= "Referer: http://$host\r\n\r\n";
           fputs($fp, $header);
           $response = '';
          
          // Get the response from the remote server
           while($line = fread($fp, 4096)){
           $response .= $line;
           }
          
          // Close the connection
           fclose( $fp );
          
          // Remove the headers
           $pos = strpos($response, "\r\n\r\n");
           $response = substr($response, $pos + 4);
          
          // Return the processed response
           echo $response;
          
          // Save the response to the local file
           if(!file_exists($localfile)){
           // Try to create the file, if doesn't exist
           fopen($localfile, 'w');
           }
          
          if(is_writable($localfile)) {
           if($fp = fopen($localfile, 'w')){
           fwrite($fp, $response);
           fclose($fp);
           }
           }
          }
          
          
        • سپس یک فایل دیگر ایجاد کنید و کدهای زیر را در آن کپی نمایید و نام آن را به dir.php تغییر دهید.
        • <?php echo dirname(__FILE__); ?>
          
          
          <?php
          $dir = dirname(__FILE__);
          echo "<p>Full path to this dir: " . $dir . "/analytics.js</p>";
          ?>
    • Leverage proxy caching (deprecated)

    • Make landing page redirects cacheable (deprecated)

      • در واقع این معیار در  رابطه با قابلیت کش شدن برخی از لندینگ پیج‌ها صحبت می‌کند. بسیاری از صفحات، به خصوص صفحات موبایل، کاربران را به یک URL دیگر هدایت می کنند، به عنوان مثال از www.example.com به m.example.com. ایجاد این تغییر مسیر توسط مرورگر کاربر می تواند زمان بارگذاری صفحه را برای بازدیدکنندگان مکرر یک سایت افزایش دهد. گوگل می‌گوید در حالی که بهترین روش در مورد ریدایرکت ها حذف آنها در هر کجای ممکن است، گاهی اوقات حذف تغییر مسیرهای صفحه فرود، به ویژه تغییر مسیر به سایت های خاص تلفن همراه، می تواند دشوار باشد. به عنوان مثال، نسخه موبایل یک سایت ممکن است از یک وب سرور متفاوت ارائه شود، که می تواند نیاز به تغییر مسیر به نام میزبان دیگری داشته باشد. در این موارد، مهم است که تغییر مسیر به سایت مخصوص تلفن همراه قابل کش شود تا زمان بارگذاری صفحه برای بازدیدکنندگان مکرر کاهش یابد. اگر نسخه تلفن همراه وب سایت شما از همان وب سرور نسخه دسکتاپ سایت شما ارائه می شود، باید تغییر مسیرهای خاص تلفن همراه را حذف کنید و از همان URL صفحه دسکتاپ خود ارائه دهید. 
    • Minify CSS

      • صفحات ما در قالب HTML در مروگر نمایش داده می‌شوند و برای زیباسازی صفحات از گرافیکی و ایجاد حرکات انیمیشنی از فایل‌های Css و جاوا اسکریپت برای آنها استفاده می‌کنیم. با توجه به اینکه درصد بالایی از کد معمولا مورد استفاده قرار می‌گیرد از این بهتر است برای این کدها و یا هر کد دیگر بهینه سازی انجام شود و در خلاصه‌ترین و فرشرده‌ترین حالت ممکن باشند . ولی قبل از اینکه این مورد را توضیح دهیم شما را با یک اصطلاح آشنا می‌کنیم.
        • Minifyکردن چیست؟ این مورد را با مثال توضیح می‌دهیم. به کد زیر توجه نمایید:

    }body
    ;font-family: iran
    ;font-size: 100%
    ;direction: rtl
    ;text-align: right

    {

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

    body{font-family: iran;font-size: 100%;direction: rtl;text-align: right;}

    minifyکردن فایل‌های css موجب حذف المان‌هایی می‌شود که مرورگر برای رندرکردن به آنها نیاز ندارد. از این رو سرعت بهبود می‌یابد.

    minify کردن فایل های css

    minify کردن فایل های css

     

    و اما جی تی متریکس چگونه این مورد را ارزیابی و به کاربران اطلاع می‌دهد؟

    جی تی متریکس تمامی فایل‌های css شما را را بررسی و ارزیابی می‌کند و محاسبه می‌کند که هر کدام از فایل‌های css بهینه شده چقدر از پهنای باند را هدر می‌دهند و سپس لیستی مانند لیست زیر به شما ارائه میدهد که با کلیک بر روی impact می‌توانید فایل‌هایی را مشاهده کنید که قابل minify هستند.

     

    impact minify css

    چگونه فایل‌های css خود را minify کنیم؟

    1- روش اول : استفاده از فایل‌های بهینه شده‌‌ای که توسط خود جی‌تیر متریکس ارائه میشود. بعد از آنالیز و فهمیدن اینکه باید فایل‌های css را فشرده سازی‌کنید در بخش audit در کنار هر فایلی که به بهینه‌سازی نیاز دارد می‌توانید فایل بهینه شده و یا optimized version را ببینید که می‌توانید آن را دانلود کنید و با مراجعه به هاست خود از طریق file manager دقیقا در همان آدرسی که جی تی متریکس ارائه کرده‌است فایل خود را آپلود نمایید.

    2- روش دوم: استفاده از ابزار آنلاین https://minifycode.com این مورد به راحتی امکان پذیر خواهد بود. در صورتی که جی تی متریکس فایل‌هایی را برای minify کردن تشخیص داد. تمامی کدهای فایل مربوطه رادر این ابزار کپی نمایید و سپس گزینه minify css را کلیک کنید و پس از فشرده سازی همان کدها را در فایل css کپی نمایید. این کار را برای تمامی فایل‌های css ای که به بهینه سازی و فشرده سازی نیاز دارند انجام دهید.

    minify css

    3- روش سوم: استفاده از CDN. برای به کارگیری این روش نیاز دارید با چند اصطلاح آشما شوید.

    CDN چیست؟
    این کلمه مخفف content delivery network و یا یک شبکه توضیح محتوا می‌باشد. این شبکه‌های به گونه‌ای ساخته می‌شوند که دارای سرورهای مختلف در اقصی نقاط جهان هستند تا داده‌ها را از نزدیک‌ترین سرور به کاربر ارائه دهند. تاکنون با خود فکر کرده‌اید که چرا سایتی همانند گوگل که از کل جهان جستجو دارد در کمترین زمان ممکن به کاربران نمایش داده می‌شود و اطلاعات را به کاربران نمایش می‌دهد؟ بله به دلیل استفاده از cdn است. در واقع وقتی سایتی بر روی cdn قرار می‌گیرد اطلاعات از نزدیک‌ترین سرور جغرافیایی نسبت به مکان و محل قرارگیری کاربر به او نمایش داده می‌شود و این مورد موجب افزایش سرعت سایت می‌شود. معروف‌ترین cdn کلود فلر است. می‌توانید در این سایت حساب کاربری ایجاد نمایید. به زودی آموزشی در رابطه با نحوه‌ی ایجاد حساب و استفاده از کلود فلر برای سایت قرار داده خواهد شد.

    مزایای استفاده از cdn چیست؟

        • افزایش لود صفحات و بهبود سرعت به دلیل نمایش و لود اطلاعات از نزیدک‌ترین سرور به کاربر
        • افزایش امنیت سایت
        • افزایش پهنای باند سایت
        • افزایش سئو سایت(زیرا یکی از معیارهای مهم سئو است.)

    پس از فعال‌سازی cdn برای سایت می‌توانید پس از تنظیم DNS های دامنه بر روی کلودفلر می‌توانید از امکان minify حودکار استفاده کنید. زیرا در آن قسمتی وجود دارد که با کلیک کردن روی فایل‌های css و js و html امکان فشرده سازی وجود خواهد داشت.

    4- روش چهارم: استفاده از افزونه‌ها برای سایت‌های وردپرسی. لیست این افزونه‌های عبارتند از :

        • WP rocket
        • Perfmatter
        • WP Faster Cache
        • Cache Enabler
        • WP Super Cache
        • W3 Total Cache
        • Wp Super Minify

     

    • Minify HTML (deprecated)

      • در رابطه با minify کردن کمی بالاتر صحبت کردیم. روش‌های مورد استفاده برای minify کردن در این بخش نیز مانند بخش‌های قبلی است. اگر در جی تی متریکس توجه کرده باشید کنار این مورد از واژه deprecated و یا منسوخ استفاده کرده است. د رواقع این مورد از معیارها حذف نشده است و همچنان باقی است ولی از توضیح بیشتر در رابطه با آن پرهیز نموده است. روش‌های minify کردن html عبارتند از :

    1- روش اول : عدم استفاده از cssهای داخلی که این مورد کاملا به بخش برنامه نویسی مرتبط است. گاها برنامه نویسان از ظاهر و حرکات خاصی برای یک صفحه از سایت استفاده می‌کنند و همین مورد موجب می‌شود که از css داخلی و یا inline css استفاده نمایند. این روش موجب افزایش حجم فایل html می‌شود. لذا پیشنهاد می‌کنیم که از فایل‌های css استفاده نمایید و با استفاده از class و یا id آن را در صفحه خود فراخوانی کنید. در شکل زیر نمونه‌ای از css داخلی را مشاهده می‌کنید.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Playing with Inline Styles</title>
      </head>
      <body>
        <p style="color:blue;font-size:46px;">
          I'm a big, blue, <strong>strong</strong> paragraph
        </p>
      </body>
    </html>

    همانطور که مشاهده می‌کنید در تگ p از استایل داخلی استفاده شده است که گوگل این مورد را نمی‌پسندد. پس بهتر است از فایل های css استفاده نمایید.

    2- روش دوم: در این روش های قبل از خود جی تی متریکس کمک می‌گیریم و با کلیک بر روی audit فایل‌هایی را که باید بهینه شوند مشاهده می‌کنید که در کنار آنها می‌توانید optimized version را دریافت نمایید و جایگزین همان فایل HTML در هاست خود کنید.

    3- روش سوم : استفاده از سایت minifycode.com که می‌توانید کد html خود را در آن کپی نمایید و با کلیک بر روی گزینه Minify HTML به فشرده سازی و بهینه کردن فایل html بپردازید.

    4- روش چهارم: همانطور که در بخش minify css گفته شد زمان که از cdn استفاده می‌کنید امکان minify کردن فایل‌های css و html و javascript وجود دارد. در صورتیکه بخش های قبلی را مطالعه نکرده‌اید جهت کسب اطلاعات در رابطه با cdn حتما این بخش‌ها را مطالعه نمایید.

    5- روش پنجم: استفاده از افزونه در وردپرس هست که این روش فقط به درد سایت وردپرسی می‌خورد. افزونه‌هایی که در می‌توانید استفاده کنید عبارتند از :

        • WP rocket
        • Minify Html
        • WP super minify
        • Powered minifier
        • و ….
    • Minify JavaScript

      • همانطور که می‌دانید صفخات سایت ما به صورت HTML هستند و شامل‌ فایل‌های جاوا اسکریپت و css و … هستند. در واقع این impact در جی تی متریکس می‌گوید. باید فایل‌های جاوااسکریپت در فشرده‌ترین و بهینه ترین حالت خود قرار بگیرند. در این حالت هم مانند css وجود فضاهای اضافی و … می‌تواند موجب افزایش حجم شود. در صورتیکه با بهینه سازی می‌توان موجب افزایش سرعت لود شد. برای این کار روش‌های مختلفی وجود دارد که عبارتند از :
        • روش اول : وقی با این impact روبرو می‌شوید، می‌توانید فایل‌های جاوا اسکریپتی که نیاز به بهینه‌سازی دارند را مشاهده کنید. در مقابل هر فایل هم ورژن بهینه شده‌ی آن قرار گرفته است. به راحتی می‌توانید این فایل را دانلود کنید و سپس وارد هاست خود شوید و از طریق file manager وارد public-html شوید. سپس دقیقا به همان آدرسی بروید که در جی تی متریکس به شما نشان داده شده است و فایل بهینه‌ی دانلود شده را در همان مسیر اپلود و جایگزین فایل قبلی کنید و سپس ذخیره نمایید.
        • روش دوم:در این روش مراحل زیر را انجام دهید:
          • وارد سایت https://minifycode.com شوید و سپس کد جاوا اسکریپت خود را در بخشJavaScript minifier کپی نمایید.پس از کپی کردن کدها در قسمت پایین روی دکمه minify javascript کلیک کنید و منتظر بمانید تا بهینه سازی انجام شود. پس از اتمام بهینه سازی کد را کپی نموده و وارد هاست خود شوید و دقیقا در همان فایل کدها را کپی نمایید.
        • روش سوم : در سایت های وردپرسی امکان minify کردن کدهای جاوا اسکریپت با استفاده از افزونه نیز فراهم است. این افزونه‌ها عبارتند از :
    • wp rocket
    • wp super minify
    • Minimize cookie size (deprecated)

    • Minimize DNS lookups (deprecated)

      • قبل از اینکه به صورت کامل در رابطه با راه‌حل‌های این خطا صحبت کنیم باید در رابطه با معنای DNS lookup  صحبت نماییم.
        • DNS چیست؟ هر هاست یک آی پی دارد که در سرور پیاده سازی شده است. این آی پی را می‌توانید از شرکت ارائه دهنده هاست خود دریافت نمایید. حالا DNS چکار می‌کند در واقع dns  یا همان Domain Name Server  نام دامن را به آدرس آی پی هست متصل می‌کند. و از این سایت برای شما باز می‌شود.
        • واژه look up به معنای جستجو کردن است و عمل Dns Look up  به معنای پیدا کردن Dns سایت بیت dns های سرور می‌باشد.
        • این مورد از جی تی متریکس در واقع اشاره می‌کند که تعداد جستجوهای dnd در سرور بالاست و باید کاهش یابد. برای رفع این مسئله چندین روش وجود دارد که در ادامه به آنها اشاره می‌کنیم:
          • کاهش تعداد ابزارهای استفاده شده در سایت:
            • در سایت ابزارهای مختلفی مورد نیاز است که معمولا بین بسیاری از سایت ها یکسان هستند. برای مثال فونت‌ها و یا برخی از فایل‌های جاوا اسکریپت و یا فایل‌های css و ای نماد و ابزارهای آمارگیر. این ابزارها صرفا مختص به سایت شما نیست و سایت‌های مختلفی از آنها استفاده می‌کنند. گاها تعداد درخواس به سرور آنها افزایش یافته و ممکن است سرور دیرتر پاسخ دهد از این رو همین مورد روی سایت شما هم تاثیر خواهد گذاشت و سایت شما با سرعت کمتری لود خواهد شد. حالا راه حل چست:
              • در رابطه با ابزارهای آمارگیر سعی کنید تنها از آمارگیرهای معتبر همچون آمارگیر خود گوگل استفاده کنید. زیرا سرورهای گوگل قدرتمند‌تری سرورها هستند و مانع لود سایت شما نخواهند شد.
              • برای استفاده از فونت‌ها سعی کنید از فونت‌های استاندارد استفاده کنید و تعداد انواع فونت‌ها را نیز به حداقل برسانید. فرارموش نکنید که فونت‌های گوگل به درد سایت‌های فارسی نمی‌خورند از این رو بهتر است این فونت‌ها را حذف نمایید.
              • یکی از ابزارهایی که می‌تواند گاها سرعت سایت و حتی آنالیز سایت را با اختلال مواجه نماید. ای نماد است.  درواقع اینماد کدی به شما اختصاص می‌دهد و ان کد در سایت شما قرار می‌گیرد ولی معمولا این کد مشکل آفرین است. برای رفع آن می‌توانید تصویر آن را در سایست خود قرار دهید و تصویر را به همان لینکی که ای نماد به شما اختصاص داده است لینک نمایید.
              • برای نمایش مپ و آدرس نیازی نیست حتما همان آدرس مپ خود را وارد نمایید بلکه می‌توانید  مانند ای نماد از روش تصویر استفاده نمایید و تصویر را به همان آدرس لینک دهید و یا حتی راه بهتر این است که از آدرس خود بر روی گوگل عکس بگیرید و هما ن عکس را در سایت خود آپلود نمایید. برای اینکه حجم صفحه اصلی بالا نرود می‌توانید از صفحه‌ی دیگیری مانند صفحه تماس با ما یا درباره ما استفاده نمایید و تصویر را در آنجا قرار دهید.
            • فایل‌های خارجی را در هاست خود آپلود نمایید:
              • برخی از فایل‌ها و یا کدهایی هستند که در سایت‌های دیگر قرار دارند ولی شما در سایت خود از آنها استفاده می‌کنید. و در این صورت شما نیاز دارید که dns lookup هم در هایت آنها انجام دهید. به جای اینکار می‌توانید همان فایل را در صورت امکان در هاست خودتان قرار دهید و تنها مسیرها‌ی دسترسی به فایل را تغییر دهید و از هاست خودتان به ان فایل‌ها دسترسی داشته باشید. فایل‌های جاوا اسکریپت یکی از این نوع فایل‌های هستند.
          • توجه داشته باشید بسیاری از مواردی که در همین مقاله گفته شده است برای مثال یکی کردن فایل‌های جاوا اسکریپت و css و و بسیاری از موارد دیگر که در نهایت مورد بهینه‌ای به سایت شما تحویل می‌دهد همگی موجب کاهش درخواست از سرور شده  و همین مورد می‌تواند در بهبود و کاهش dns lookup تاثیر بالایی داشته باشد.
    • Minimize redirects

      • قبل از اینکه بخواهیم در رابطه با روش‌های برطرف کردن این issue صحبت کنیم باید شما را با چند اصطلاح آشنا سازیم.
      • ریدایرکت کردن چیست ؟
        • ریدایرکرت کردن به معنای انتقال کاربر به آدرس جدید است. ریدایرکت کردن در زمان‌های مختلفی به درد ما میخورند و معمولا سئو کاران با این مورد همواره سر ور کار دارند. یکی از مهم‌ترین کاربردهای ریدایرکت کردن زمانی است که می‌خواهید چند دامنه برای سایت خود ثبت کنید ولی نمی‌خواهید محتوای تکراری داشته باشید. در این صورت تمامی دامنه‌های را به دامنه اصلی ریدایرکت 301 و یا ریدایرکت دائمی و همیشگی می‌کنیم. با تعدادی از ریدایرکت‌های مهم و ضروری آشنا می‌شویم:

     

          • ریدایرکت 301: این ریدایرکت به معنای انتقال همیشگی و دائمی آدرس قبلی به آدرس جدید است و در صورتیکهبه هیچ وجه به آدرس قبلی نیاز نداشتید باید از این ریدایرکت استفاده کنید با استفاده از ریدایرکت 301 تمامی اعتبار و ارزشی که لینک قدیمی شما به دست آورده است به آدرس جدید منتقل خواهد شد. با ساتفاده از ریدایرکت 301 از مواجهه کاربر و خزنده‌های موتورهای جستجو با خطای 404 جلوگیری خواهید کرد. در صورتیکه سایت وردپرسی دارید با استفاده از افزونه‌های یوست سئو و افزونه‌های رنک مث این امکان برای شما وجود دارد که بتوانید ریدایرکت 301 انجام دهید.

     

          • ریدایرکت 302: نوع دیگری از ریدایرکت‌ها وجود دارند که به ریدایرکت موقت معروف است. در واقع در این نوع ریدایرکت به ربات‌های موتورهای جستجو می‌گوید که آدرسی که هم اکنون دنبال آن هستید به طور موقت در آدرس دیگری قرار دارد. در واقع با استفاده از این ریدایرکت می‌توان بازدیدکنندگان را به یک آدرس منتقل نمود و در آینده مجددا از آدرس قدیمی استفاده کرد. با توجه به گفته‌های جدید گوگل این نوع ریدایرکت نیز تاثیری بر روی ازدست رفتن رتبه دامنه نخواهد داشت. این روش انتقال موقت برای پروتکل HTTP 1 است و با توجه به اینکه اینترنت با دو پروتکل HTTP 1 , HTTP1.1 کار می‌کند ریدایرکت دیگری با عنوان 307 معرفی شد.

     

          • ریدایرکت موقت 307: این نوع ریدایرکت موقت پس از ظهور HTTP1.1 به جای ریدایرکت موقت 302 جایگزین شد به خزنده‌های موتورهای جستجو می‌گوید آدرسی که به دنبال هستید به طور موقت در آدرس دیگر قرار گرفته است و پس از مدتی دوباره به همان آدرس باز خواهد گشت.

     

          • ریدایرکت REGEX: این ریدایرکت‌ها معمولا به درد سئوکاران حرفه‌ای می‌خورد و برای زمانی کاربرد دارد که بخواهند چند صفخه با کلمات کلیدی مشابه را به یک آدرس انتقال دهند.

     

          • ریدایرکت Meta Refresh: این نوع ریدایرکت‌ها معمولا مورد استفاده قرار نمی‌گیرند و علت آن هم عدم انتقال کامل اعتبار صفحه است. یکی از موارد استفاده این نوع ریدایرکت‌ها در صفحات انجمن‌ها و یا پرداخت‌های اینترنتی است. که معمولا پس از ثبت نام و یا پرداخت پیغامی نمایش داده می‌شود که بعد از 5 ثانیه به صفحه x منتقل می‌شوید. این نوع ریدایرکت به دلیل عدم انتقال کامل رتبه برای سئو مناسب نخواهد بود.

        • حالا می‌خواهیم بدانیم آیا ریدایرکت‌ها موجب کاهش سرعت سایت می‌شوند یا خیر؟

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

      • خب حالا که با انواع ریدایرکت آشنا شدیم حالا به سراغ minimize redirection در gtmetrix می‌رویم. در واقع این خطا می‌گوید که تعداد ریدایرکت‌های صفحه شما بالا است و باید کاهش یابند. در واقع برای حل این روش باید ببینید که واقعا نیاز به ریدایرکت هست و یا از راه‌های دیگری مانند ساخت صفحه جدید می‌توان استفاده کرد یا خیر.
        دو مورد دیگر وجود دارند:
    • Avoid URL redirects : زمانی که با چنین خطایی مواجه شدید باید بدانید که ادرسی که به هیچ وجه اجازه ریدایرکت کردن آن آدرس را ندارید.
    • Avoid landing page redirects: این خطا می‌گوید که ریدایرکت کردن لندپیج‌های شما درست نیست و باید از آن خودداری نمایید.
    • Minimize request size

      • همانطور که از نام این خطا واضح است ، باید تعدا درخوا‌ست‌هایی که به سمت سرور ارسال می‌شود کاهش یابد. هنگام درخواست به سرور فایل‌های مختلفی باید لود شوند و اگر تعداد این فایل‌های از حدی بالاتر رود با این خطا موجه خواهید شد. معمولا سایت‌هایی که به صورت اختصاصی طراحی می‌شوند کمتر با این مسئله موجه می‌شوند مگر اینکه کد نویسی آنها به صورت غیر استاندارد صورت گرفته باشد. در سیستم‌های مدیریت محتوای رایگان اگر از قالب‌های رایگان استفاده شود معموملا این مسئله پیش خواهد آمد. ولی در صورتی که قالب به صورت اختصاصی و نیمه اختصاصی باشد و فایل ها و افزونه‌های اضافی از روی آن پاک شوند موجهه با این خطا درصود بسیار کمتری خواهد داشت.
    • Optimize images

      • معمولا در تمامی صفحات سایت از عکس استفاده می‌شود. زیرا تصاویر موجب ایندکس سریع‌تر مطالب سایت می‌شود ولی از طرفی حجم صفحه را مقداری بالا می‌برد. برای اینکه تصایر مورد پسند گوگل باشد باید سئو تصاویر در آنها رعایت شود. بری مثال قرار دادن متن جایگزین تصویر ، عنوان عکس، فرمت عکس، نام عکس ، تصاویر انواع مختلفی دارند ولی معمولا پیشنهاد می‌شود از فرمت‌های png و jpg استفاده کنیم. جی تی متریکس پیشنهاد می‌کند که اندازه تصاویر اندازه همان div مورد استفاده باشد و به جای استفاده از کد برای اندازه از همان ابتدا عکس را در سایز مناسب ایجاد کنید. پس فراموش نکیند که بهینه سازی تصاویر تنها به حجم آنها مربوط نمی‌شود و اندازه و یا همان سایز تصویر هم مهم است. در این قسمت مواردی کامل برای بهینه سازی تصاویر سایت ارائه می‌شود ک با به کار گیری آنها دیگر مشکلی در این بخش نخواهید داشت و رنگ سبز جی تی متریکس را دریافت خواهید نمود.که در ادامه این نکات را بازگو خواهید کرد. قبل از اینکه این نکات را یاد بگیرید به تصویر زیر دقت نمایید. این تصویر مربوط به سایتی است که دارای impact مربوط به optimize image است. با کلیک کردن بر روی بخش audit تصاویری که به بهینه‌سازی نیاز دارند در این بخش لیست می‌شوند. (منظور کاهش حجم است. چون بهینه سازی تصاویر شامل نکات سئو از جمله قرار دادن متن جایگزین و عنوان تصویر و عدم کپی بودن تصویر هم هست.) شما می‌توانید برای بهینه سازی تصاویر یکی از روش‌های زیر را انخاب نمایید. که عبارتند از :
        • در صورتی که سایت شما وردپرسی است. مقداری بهینه سازی پس ازآپلود تصویر در سایت انجام می‌شود ولی این بهینه سازی هم کافی نیست زیرا اگر کافی بود این تصاویر در بخش optimize قرار نمی‌گرفتند. اگر تمایل دارید از افزونه استفاده کنید می‌توانید از افزونه wp smush pro استفاده کنید که بهینه سازی خوبی روی تصاویر شما انجام خواهد داد.
            • استفاده از برنامه‌های ویرایشگر تصویر مانند فوتوشاپ یکی دیگر از راه‌هایی است که می‌توانید استفاده کنید. هنگام ذخیره تصویر در فتوشاپ حتما ان را save for web کنید تا برای web بهینه شود. دو فرمت رایج png و jpg برای تصاویر استفاده می‌شود که معمولا jpg حجم کمتری می‌گیرد. ولی اگر تمایل دارید از فرمت png استفاده کنید می‌توانید تعداد رنگ‌های ذخیره شده و یا رزولوشن را کاهش دهید. در صورتیکه تصویر شما gif است و یا اینکه باید از آیکون و bullet در سایت خود استفاده کنید سعی کنید با کمترین تعداد رنگ به ذخیره آن بپردازید. و فراموش نکنید که حین ذخیره تصویر بر روی optimize باشد.
            • از ابزارها و سایت‌های آنلاین استفاده کنید این سایت‌های عالی هستند و بدون کاهش کیفیت می‌توانید تصاویر با حجم پایین داشته باشید. در دو سایت اول می‌توانید تصاویری با فرمت‌های jpeg و png و WebP قرار دهید.
              • https://tinypng.com/
              • https://tinyjpg.com/
              • https://compressor.io/ (در این سایت امکان بهینه‌سازی تصاویر با فرمت‌های jpeg , png, Svg,Gif ,WEBP, وجود دارد و با سه حالت کاهش کیفیت و بدون کاهش کیفیت و حالت پیش فرض می‌توان تصویر را بهینه سازی نمود.)
        • Optimize the order of styles and scripts (deprecated)

          • این مورد به ترتیب قرار گیری فایل‌های جاوا اسکریپت و css اشاره می‌کند. همانطور که می‌دانید تمامیصفحات سایت دارای فایل های cssو یا جاوا اسکریپت هستند و این موارد می‌توانند شکل ظاهری و حرکات سایت را تعیین نمایند. در صورتی که ترتیب قرار گیری این فایل‌ها و کدها در هدر سایت درست نباشد در این صورت با خطای بهینه سازی چیدمان مواجه خواهید شد. معمولا ترتیب صحیح برای اینکه صفحه بدون این خطا بالا بیاید این است که در ابتدا در بخش head سایت فایل‌های css قرار گیرند و سپس فایل‌های جاوا اسکریپت فراخوانی شوند. به قطعه کد زیر نگاهی بیندازید:
    <head>
    <title> Title </title>
    
    <style>
    کدهای مربوط به css در این قسمت نوشته می‌شوند.
    </style>
    
    <script type=”text/javascript”>
    کدهای مربوط به جاوا اسکریپت در این قسمت نوشته می‌شوند.
    </script>
    
    </head>
    
    
    

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

          • در سایت‌های وردپرسی بهترین روش استفاده از افزونه است و افزونه خود می‌تواند موارد لازم را انجام دهد و این افزونه ها عبارتند از: WP Scripts & Styles Optimizer
          • روش دوم این است که از طریق فایل header.php سایت خود اقدام نمایید. برای اینکار ابتدا باید وارد هاست خود شوید. برای ورود به هاست :
            • در صورتی که هاست شما دایرکت ادمین است می‌توانید از طریق yourdomain.com:2222 و با وارد کردن نام کاربری و رمز عبور وارد هاست خود شوید و در صورتی که هاست سی پنل دارید می‌توانید با وارد کردن yourdomain.com:2082 و با وارد کردن نام کاربیر و رمز عبور وارد هاست خود شوید.
            • پس از ورود به هاست وارد file manager هاست شوید.
            • وارد پوشه public_html شوید.
            • سپس وارد پوشه wp-content و پس از وارد پوشه theme شوید.(در این پوشه فایل‌های قالب شما قرار دارند.)
            • فایل header.php را بیابید و روی edit کلیک نمایید.
            • و سپس طبق چیزی که در بالا گفته شد باید فایل‌های css را بالاتر از فایل‌های جاوا اسکریپت قرار دهید. (این مورد به همین راحتی امکان پذیر نیست و امکان تداخل در برخی کدها وجود خواهد داشت از این پیشنهاد می‌شود برای انجام این مورد حتما از یک کدنویس کمک بگیرید.)
        • Parallelize downloads across hostnames (deprecated)

        • Prefer asynchronous resources

          • بیشترین خطاهایی که از طرف جی تی متریکس وجود دارد مربوط به فایل‌‌های جاوا اسکریپت و css و html است. این مورد نیز از این قاعده مستثنی نیست و به فایل‌های جاوا اسکریپت باز می‌گردد. برای رفع این مورد با روش های زیر می‌توانید این خطا را برطرف نمایید.
            • در صورتی که از cms های آماده مانند وردپرس و یا جوملا استفاده می‌کنید قطعا به راحتی به کدهای سایت خود دسترسی نخواهید داشت از این پیشنهاد می‌کنیم از افزونه استفاده نمایید:
              • برای رفع این خطا در وردپرس از افزونه‌های زیر می‌تواند بهره مند شوید
                • WP Deferred JavaScripts
                • Async JavaScript
              • برای رفع خطا در جوملا از افزونه‌های زیر بهره مند شوید
                • Javascript Async and Defer
                • JCH Optimize
            • در صورتی که به فایل html سایت خود دسترسی دارید می‌توانید برای تگ های <script> از خاصیت defer یا async استفاده نمایید. که به شکل زیر می‌توانید از آنها استفاده نمایید:
                              • <script src=”demo_async.js” async></script>
                                <script src=”demo_defer.js” defer></script>

     

        • روش سوم دوباره نیاز به دسترسی به فایل html و جاوا اسکریپت دارد. به این صورت که به جای قرار دادن فایل‌های جاوا اسکریپت در هدر ان را به پایین ترین قسمت بدنه سایت خود یعنی قبل از بسته شدن تگ <body/> قرار دهید. در واقع با استفاده از این روش مانع از این می‌شودی که زمان زیادی در همان ابتدا صرف لود‌ شدن‌ها و تجزیه و اجرای فایل‌های جاوا اسکریپت شوید.
        • Put CSS in the document head

          • فایل‌های css فایل‌هایی هستند که با استفاده از آنها می‌توان ویژگی‌های زیبایی به گرافیک سایت اضافه کرد. حالا این فایل‌های می‌توانند به صورت داخلی و یا inline باشند یعنی در درون صفحه استفاده شوند و یا اینکه فایل جداگانه‌ی برای آنها در نظر گرفته شود. معمولا برخی از صفحات گرافیکی دارند که مختص همان صفحه است و در صفحات دیگر استفاده نمی‌شود. معمولا در این مواقع برنامه نویسان از css های داخلی استفاده می‌کنند. محل قرارگیری فایل‌های css در داخل body نیست زیرا در بخش body کدهایی قرار می‌گیرند که حالت بصری سایت را رقم می‌زنند ولی گاها برخی از برنامه نویسان به اشتباه کدهای css را در داخل بدنه قرار می‌دهند و این مورد موجب ایجاد این issue در جی تی متریکس می‌شود. به کد زیر دقت نمایید:
          • <"html lang="fa>
            <head>
            
            <title>سایت ساز زرین |خرید سایت ، طراحی وب سایت و فروشگاه ساز</title>
            <head/>
            
            <"style type="text/css>
            
            img.emoji }
            	;display: inline !important
            	;border: none !important
            	;box-shadow: none !important
            	height: 1em !important
            	;width: 1em !important
            	;margin: 0 .07em !important
            	;vertical-align: -0.1em !important
            	;background: none !important
            	;padding: 0 !important
            {
            <style/>
            
            <body>
            <content code>
            
             <body/>
            <html/>
            
            
            
            
            

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

        • در سایت های نوع دوم که ابعاد برای تصاویر مشخص نشده‌اند. در این سایت‌ها هنگام رندر کردن توسط مرورگر جایگاه تصاویر در ابتدا در نظر گرفته نمی‌شود و به مرور با لود شدن بخش‌های مدام باید اسکرول انجام شود که این مورد به هیچ وجه مورد پسند گوگل و کاربران نیست. در صورتی که به کدهای تصاویر این نوع سایت‌ها نگاهی بیندازید با کدی مانند کد زیر روبرو می‌شوید:
                                • < /"  img src="example.png>
      • در سایت‌های وردپرسی معمولا این مسئله وجود ندارد و این امکان وجود دارد که در بخش ویرایش تصاویر اندازه تصاویر را وارد نمایید. و همین طور انواع مختلف برای اندازه‌های تصاویر وجود دارد که عبارتند از : اندازه کامل ، بند انگشتی ، میانه ، اندازه سفارشی ، بزرگ.
    راه‌‌حل‌ها:
    روش اول:
      • در صورتی که از ابعاد برای تصاویر سایت استفاده نکنید با خطایی مانند خطای زیر روبرو می‌شوید:
      • Specify image dimensions

        Specify image dimensions

    همانطور که در تصویر نیز مشخص است، جی تی متریکس ابعاد مناسب برای تصاویر را در کنار تصاویر قرار می‌دهد و شما می‌توانید دقیقا همین اندازه‌ها را به ازای هر تصویری که چنین مشکلی دارد وارد نمایید تا این مورد از جی تی متریکس نیز رفع شود.

    روش دوم:

    اگر در سایت خود از این افزونه استفاده می‌کنید باید بدانید که اخیرا در به روز رسانی بخش media این افزونه، امکان قرار دادن ابعاد تصاویر نیز فراهم شده است برای این مورد باید از طریق بخش تنطیمات وارد ” add missing image dimensions ” شوید و تنظیمات لازم را از طریق همین بخش انجام دهید. Wp rocket، کدهای html را بررسی می‌کند و در attribute سورس (src) به اسکن کدها می‌پردازد و هر جا که دو مورد width و height وجود نداشت آنها را اضافه می‌کند.

    • Use an application cache (deprecated)

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

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

2/5 - (4 امتیاز)
مقالات مرتبط
پیام بگذارید