نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

GTmetrix چیست ؟

GTmetrix یک سایتی است که به بررسی عوامل موثر در سرعت بارگذاری سایت می پردازد.

که در نهایت نتیجه را در دوطبقه بندی قرار میدهد یکی pagespeed  که نمایانگر سرعت بارگذاری صفحات و دیگری yslow  که نمایش دهنده ی کارایی و نحوه ی عملکرد سایت و سرور است .

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

در این مقاله به بررسی عوامل تعیین کننده و مهم می پردازیم با اسپیناس همراه باشید:

افزایش سرعت بارگذاری صفحات سایت (gtmetrix page speed)

Specify a cache validator (تعریف Cache Validator)
Combine images using CSS sprites

دادن اندازه به عکس ها و استفاده از تکنیک css sprites  مشخص نمودن عرض و ارتفاع برای تمامی عکس ها سبب افزایش سرعت بارگذاری سایت می شود.

چون در این صورت دیگر احتیاجی نیست که سایز عکس با توجه به مرورگر تغییر کند.

Optimize images (بهینه سازی عکس ها) :

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

Defer parsing of JavaScript (تعویق انداختن جاوا اسکریپت ها):

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

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

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

Inline small CSS (استفاده نکردن از کدهای css  داخلی و اینلاین)

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

Optimize the order of styles and scripts ( بهینه سازی ترتیب قرارگرفتن CSS وJS):

فشرده سازی کد css سبب کاهش رفت و برگشت اطلاعات بر روی شبکه و افزایش سرعت بارگذاری و اجرای صفحات سایت می گردد.

عوامل افزایش pagespeed در GTmetrix

Leverage browser caching ( بهبود حافظه کش مرورگر ): تعیین تاریخ انقضا و یا حداکثر طول عمر دربخش header http ، برای صفحات استاتیک سبب می شود که مرورگرها مجددا از منابعی که قبلا بارگذاری کرده اند استفاده کنند و نیازی نیست تا دوباره از حافظه ی سرور یا دیسک بخوانند.

که این روش نیز باعث افزایش سرعت بارگذاری صفحات سایت می شود.

Minify css (کوچک نمودن css ها)

فشرده سازی کدهای css  موجب کاهش دریافت و ارسال اطلاعات بر روی شبکه و افزایش سرعت بارگذاری صفحات سایت سایت می شود.

Remove query strings from static resources (حذف نمودن query string ها از منابع ثابت )

اغلب فیلتر شکن ها منابعی که درURL  آنها علامت (؟) وجود داشته باشد را کش نمی کنند.

حتی اگر دستور  Cache-Control : Public header نوشته شده باشد.

برای فعال نمودن کش پروکسی برای این منابع باید query string ها را از منابع استاتیک حذف و بجای آن پارامترها را به نام فایل آنها رمزگذاری کنید!

Specify image dimensions(مشخص کردن ابعاد تصاویر)

Minfy html(کم کردن حجم html)

فشرده سازی کد html  شامل کم کردن تمامی کدهای css  و js  که به صورت inline  تعریف شده می شود.

که باعث کاهش حجم اطلاعات دریافتی و ارسالی روی شبکه و افزایش سرعت بارگذاری صفحات سایت می شود.

Minify JavaScript (کاهش جاوا اسکریپت) :

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

Enable gzip compression(فعال کردن فشرده سازgzip روی سرور )

Avoid a character set in the meta tag (عدم استفاده از character set ها در متاتگ)

استفاده از characterset  در متا تگ ها باعث می شود مرورگر IE8  نتواند محتوا را دانلود کند.

عوامل افزایش pagespeed در GTmetrix

بخاطر بهتر شدن فرآیند دانلود بهتر است که کاراکتر ست ها به بخش محتوایی HTTp  داخل response header منتقل شوند.

Enable Keep-Alive( فعال سازی قابلیت Keep-Alive ) :

با فعال سازی قابلیت HTTP Keep-Alive و یا HTTP Persistent Connections، به خط ارتباطی tcp این امکان داده می شود که برای ارسال و دریافت اطلاعات درخواست های چندکاناله http  را انجام دهد و به اینصورت تاخیر در اجرای فرامین کاربر را کاهش می دهد.

Minimize request size حداقل نمودن تغییر مسیرها:

کوچک کردن کوکی ها و سرآیند ارتباطی سبب می شود که یک درخواست http را در یک بسته ی اطلاعاتی ارسال نمود.

Put CSS in the document head( قراردادن CSS در ابتدای کد)

انتقال بلوک های css داخلی و عناصر <link> ازداخل body به قسمت head سبب افزایش کارایی صفحات خواهد شد.

Specify a Vary: Accept-Encoding header (تعریف یک سرآیند Vary Accept Encoding)

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

تعریف این سرآیند Vary: Accept Encoding سبب می شود که پروکسی هم نسخه ی عادی و هم نسخه ی فشرده شده را ذخیره کند.

Avoid CSS @import (اجتناب از بکارگیری دستور CSS@Import)

استفاده از دستور CSS@Import در یک stylesheet  بیرونی می تواند باعث تاخیر افتادن در هنگام بارگذاری صفحات سایت می شود.

Avoid bad requests ( اجتناب از درخواست های نامناسب )

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

تا اینجا پارامتر pagespeed در طراحی سایت  رو براتون شرح دادیم در مقاله ی بعد درباره ی yslow  در GTmetrix می پردازیم.