سایت آنالیزگر GTmetrix یک آنالیزگر حرفه ای طراحی سایت است که زمان بارگذاری یک سایت را می سنجد.
با ارائه آدرس سایت مورد نظر به این آنالیزگر ایراد های سایت را که باعث کاهش سرعت لود شدن سایت می شود را پیدا و راه کارهایی برای برطرف کردن آن پیشنهاد می کند که در افزایش سرعت بارگذاری صفحات سایت بسیار موثر است.
بخش اول: summaey و Breakdown
GTmetrix چیست؟
یک سایت آنالیزگر حرفه ایست که سایت ها را از نظر ظاهری و سرعت بارگذاری تحلیل می کند. GTmetrix سایت ها را با معیار های مفید و کاملی پارامترهای اصلی که بر سرعت بارگذاری تاثیر گذار هستند را بررسی می کند.
پس از وارد شدن به سایت در قسمت “Analyze Performance of” آدرس سایت مورد نظر را در این قسمت وارد کنید و سپس بر روی دکمه "Go" کلیک کنید تا آنالیز شروع شود. بعد از چند دقیقه صفحه ای به صورت زیر باز می شود و نتایج را نمایش می دهد.
صفحه تازه باز شده شامل دو بخش است Breakdown و Summary.
1.Summary: همانطور که از نامش مشخص است خلاصه ای از Breakdown را به صورت درصدی بازگو می کند.
Page Speed Grade: درصد آماری میزان بهینگی را در قسمت Breakdown را نمایش می دهد.
YSlow Grade: در اینجا هم مانند قسمت قبل درصدی آماری نمایش می دهد با این تفاوت که استاندارد های یاهو را مد نظر گرفته است.
Page load time: مدت زمان بارگذاری سایت را بر حسب ثانیه نمایش می دهد.
Total page size: حجم صفحه بارگذاری شده را نمایش می دهد.
Total number of requests: تعداد درخواست هایی که به سرور برای بارگذاری عناصر مختلف سایت ارسال شده را نمایش میدهد.
نکته: هرچه رقم این تعداد کمتر باشد سرعت سایت بیشتر خواهد بود.
2.Breakdown : از چهار قسمت زیر تشکیل شده است.
Page Speed : اطلاعاتی را که از بررسی سایت با الگوریتم گوگل یافته است را به نمایش می گذارد.
Yslow: اطلاعاتی را که از بررسی سایت با الگوریتم یاهو یافته است را به نمایش می گذارد.
Timeline: در این قسمت بررسی هایی که بر روی سایت انجام شده را مقایسه و به صورت یک نمودا ر نمایش می دهد.
History: در این قسمت نمودار هایی وجود دارد که زمان بارگذاری هر قسمت را نمایش می دهد.
در مقالات بعدی طراحی سایت به بررسی تک تک زیر شاخه های 4 بخش Breakdown می پردازیم.
بخش دوم: زیر شاخه هایPage Speed
در این مقاله از طراحی سایت اطلاعاتی رادر مورد زیر شاخه های page speed ارائه خواهیم کرد.
Specify image dimensions: باحذف نیازغیر ضروری به reflows و repaintsعرض و ارتفاع تصاویر را طوری تعیین می کند تا رندر سریعتر عمل کند.
Defer parsing of JavaScript: مرورگر باید همه ی محتویات <اسکریپت> تگ ها تجزیه کند که این بر زمان باراگذاری صفحه میافزاید. با به حداقل رساندن مقدار کد جاوا اسکریپت برای رندر صفحه و به تاخیر انداختن تجزیه جاوا اسکریپت های غیر ضروری تا زمانی که نیازی به اجرا آن ها نیست، می توان زمان بارگذاری اولیه صفحه را کاهش داد.
Optimize images:
کاهش زمان لود صفحه با بارگذاری تصاویری که اندازه مناسب دارند.
- · کاهش اندازه فایل تصویر بر اساس مکان و جایی که تصاویر درآن نمایش داده خواهد شد.
- · تغییر اندازه فایل های تصویری themeselves از طریق CSS.
- · بر اساس نوع کاربر تصاویر در فرمت مناسب ذخیره شوند.
Serve scaled images: می تواند بسیاری از بایت داده ی تصاویر را به طور صحیح ذخیره کنید.
Remove query strings from static resources: بیشتر پروکسی ها حتی مهمترین آن ها که Squid نسخه 3، منابعی که علامت "؟" در URL آن ها موجود است ا کش نمی کنند حتی اگر دستور Cash-Control تعریف شده باشد. برای راه اندازی کش پروکسی برای این منابع query string ها را در منابع استاتیک پاک کنید و در عوض آن ها پارامترها را با نام فایل آنها رمزگذاری کنید.
Serve resources from a consistent URL: برای جلوگیری از دانلود بایت تکراری و RTTs اضافی باید برای منایع از یک URL جداگانه استفاده کنید.
Specify a Vary : Accept-Encoding header: بعضی از اشکالات در پروکسی های عمومی ناشی از این است که پروکسی ها محتویات سایت را فشرده میکنند و به مرورگر کاربر که از نسخه ی فشرده شده پشتیبانی نمی کند می فرستد. تعریف Vary: Accept Encoding باعث می شود که پروگسی هر دو نسخه فشرده و غیر فشرده را ذخیره و پشتیبانی نماید.
Enable gzip compression: با کاهش حجم فایل هایی که از سرور شما منتقل می شود باعث افزایش سرعت مرورگر می شود.
Leverage browser caching: کاهش زمان بارگذاری صفحات با ذخیره سازی فیل ها از سایت شما در مرورگر کاربر بازدیدکننده. این امر باعث کاهش زمان بارگذاری برای تکرار بازدید می شود.
Minify HTML: فشرده سازی کد های HTML از جمله کد های جاوا اسکریپت و CSS موجود در آن باعث صرفه جویی در ارسال داده به شبکه و افزایش سرعت بارگذاری صفحات سایت می شود.
Minify JavaScript: فشرده سازی کد های جاوا اسکریپت باعث کاهش اندازه داده های اطلاعاتی و سرعت بخشیدن به بارگذاری سایت می شود.
Avoid bad requests: حذف لینک های شکسته و یا در خواست هایی که منجر به خطای 404/410 میشوند. همچنین از تولید درخواست های بیهوده خوداری کنید.
Avoid a character set in the meta tag: استفاده از character set در یک meta tag باعث توقف دانلود داده در مرورگر IE8 می شود. برای بهبود بخشیدن دانلود موازی منابع بهتر است از character set به قسمت HTTP در Response Header منتقل شود.
Avoid landing page redirects: تاییدیه برای صفحات فرود به تاخیر و افزایش زمان لود صفحه می افزاید در حالی که تاییدیه به طور خودکار اعمال می شود. هیچ یک از این اتفاق ها برای کاربر قایل رویت نمیباشد. در اکثر موارد می توان تاییدیه را بدون تغییر توابع عملکرد یک صفحه حذف کرد.
Enabele keep-Alive: با فعال سازی HTTP Keep-Alive ویا Connections HTTP Peresistentبه TCP اجازه اتصال برای ارسال و دریافت اطلاعات داده می شود تا درخواست های متعددHTTP را انجام دهد و بنابراین باعث کاهش تاخیر اجرای درخواست های بعدی میشود.
Inline small CSS: استفاده نکردن از CSS داخلی و ذخیره سازی همه ی کدهای CSS در یک فایل style.
Inline small JavaScript: ذخیره سازی فایل های کوچک جاوا اسکریپت در یک فایل.
Minify CSS:فشرده سازی کد های CSS باعث می شود ارسال و دریافت اطلاعات بر شبکه کاهش یابد و سرعت لود صفحه افزایش میابد.
Minimize redirects: به حداقل رساندن تغییر مسیر HTTP از یک آدرس به آدرس دیگری باعث کاهش RTTs اضافی و زمان انتظار می شود.
Minimize request size: کوچک نگهداشتن کوکی ها و در خواست ها تا حد امکان باعث میشود یک درخواست HTTP را بتوان در یک بسته اطلاعاتی ارسال کرد.
Optimize the order of styles and scripts: فشرده سازی کد CSS باعث کاهش حجم اطلاعات ارسالی بر روی شبکه میشود. از طرف دیگر این عمل نیز باث افزایش سرعت بارگذاری سایت می شود.
Put CSS inthe socument head: انتقال بلوک CSS داخلی و اجزای <link> از قسمت body به قسمت head چرا که یاعث افزایش سرعت عمل سایت خواهد شد.
Specify a cach validator: تمامی منابع باید آخرین اصلاح یا Etag هدر را داشته باشند. این امر به مرورگرها اجازه می دهد که از مزایای کامل کش بهره ببرند.
Specify a character set early:تنظیم مجموعه کاراکتر در سطح سرور پردازش مرورگر را کاهش می دهد.
Avoid CSS @import: بکارگیری دستور CSS@import در یک style sheet بیرونی می تواند تاخیرهای اضافی در حین بارگذاری صفحات سایت بوجود اورد.
Combine image using CSS sprites: تعیین کردن عرض و ارتفاع برای تمامی تصاویر باعث اجرای سریعتر سایت می شود زیرا در این حالت نیازی به تغییر سایز تصاویر توسط مرورگر نیست.
Prefer asynchronous resources: جذب منابع asynchronously مانع از مسدود کردن بارگذاری صفحه می شود.
بخش سوم: زیر شاخه های YSlow
در این بخش از مقالات طراحی سایت قصد داریم در مورد زیر شاخه های YSlow صحبت نماییم.
Compress components with gzip: با فشرده سازی منابع سبب میشود که از پهنای باند استفاده بهینه شود و در نتیجه سرعت بارگذاری سایت افزایش میابد.
Make fewer HTTp requests: کاهش در خواست های HTTP با تلفیق نمودن فایل ها و بلوک بندی و CSS ممکن است.
(Use a Content Delivery Network (CDN: برای فعال کردن Cash شدن CSS و جاوا اسکریپت به وسیله مرورگر آنها را از فایل های بیرونی بارگذاری کنید.
Add Expires headers: برای کنترل نحوه کش سایت می توان از Expire header در مرورگر کاربران استفاده کرد.
Reduce the number of DOM elements: یک صفحه ی پیچیده به معنای بایت بیشتر برای دلنلود و بارگذاری است همچنین به معنای دسترسی کندتر DOM در جاوا اسکریپت نیز می باشد.
Minify JavaScript and CSS: غیر فعال کردن کاراکتر های غیر ضروری در جاوا اسکریپت و CSS برای افزایش سرعت بارگذاری.
Use cookie-free domains: اندازه کوکی ها را تا حد امکان کوچک نگه دارید تا باعث کوچک شدن اندازه سرآیند شود.
DNS lookup: Reduce lookups DNSها باعث افزایش تاخیر درخواست های اولیه ارسالی بسوی یک میزبان می شود. ارسال درخواست به تعداد زیادی از میزبان ها ی گوناگون باعث کاهش عملکرد سایت می شود.
Avoid URL redirects: از تغییر مسیر URL جلوگیری کنید چرا که باعث اضافه شدن یک تاخیر به براگذلری یک صفحه می شود.
Avoid empty src or href: خالی بودن اتربیوت های scr ویاhref باعث بروز مشکلات متعددی می شود.
Make AJAX cacheable: با فعال سازی قابلیت cache درخواست های AJAX می توان از تاخیر در بارگذاری سایت ممانعت کرد.
Put CSS at the top: قراردادن و نگهداشتن style sheetها در سر صفحه برای اطمینان خاطر از روند رندر شدن.
Remove duplicate JavaScript and CSS: فایل های تکراری جاوا اسکریپت وCSS با ایجاد در خواست های غیر ضروری از HTTP باعث بروز اختلال در عملکرد اینترنت اکسپلورر (IE) و اجرای بیهوده جاوا اسکریپت در Firefox و IE می شود.
Put JavaScript at bottom: برای آنکه به سایر اجزا کد اسکریپت اثر مخرب نگذارد آن را به آخر کد انتقال دهید.
Avoid AlphaImageLoader filter: فیلتر AlphaImageLoader اینترنت اکسپلورر وجود دارد باعث افزایش مدت زمان بارگذاری سایت می شود.
Avoid HTTP 404 (NOT Found) error: برطرف کردن هرگونه خطای 404 برای جلوگیری از جذب کاربران برای مطلبی که وجود خارجی ندارد.
Do not scale image in HTML: مقیاس کردن تصاویر در HTML باعث بروز اشکال در بارگذاری تصاویر برزگ و ایجاد پهنای باند غیر ضروری می شود.
Use GET for AJAX requests: استفاده ازGET برای درخواست های AJAX به جای POST برای تطبیق دادن هدر و داده.
Avoid CSS expressions: استفاده از عبارت های CSS روشی نا مطلوب برای تنظیم خواص CSS ها است. چرا که باعث تولید هزاران سنجش CSS می شود.
Reduce cookie size: بای کوچک کردن اندازه هدر HTTP تا آنجایی که ممکن است کوکی ها را کوچک نگهدارید.
Make favicon small and cacheable: ساختن favicon کوچک و پیکربندی آن به صورتی که قابلیت کش شدن را داشته باشد.
Configure entity tags-Etags: برای جلوگیری از نمایش خطای 304 چندین سرور را با استفاده از تنظیمات Etag راه اندازی کنید.
Make JavaScript and CSS external: ساختن جاوا اسکریپت وCSS خارجی به منظور بهره برداری از کش مرورگر.
بخش چهارم:Timeline
در Timeline شما می توانید نموداری از بررسی های انجام شده بر روی سایت و مقایسه آنها را به صورت یک نمودار مشاهده نمایید.
با قرار دادن موس بر روی نمودار ها جدولی نمایان می شود که معانی رنگ های استفاده شده در نمودار ها را باز گو می کند.
با کلیک بر علامت + شما قادر به مشاهده جزئیات بیشتری می شوید.
بخش پنجم: History
در قسمت History نمودار هایی وجود دارد که زمان بارگذاری هر قسمت را نمایش می دهد.
در نمودار اول (page load time)سرعت بارگذاری را در بازه زمانی دلخواه می توانید مشاهده کنید.
در نمودار دوم (Page sizes and request counts) اندازه صفحه و تعداد درخواست را در بازه زمانی دخلواه قابل رویت می باشد.
در نمودار سوم (Page Speed and YSlow Scores) نموداری بر اساس درصدPageSpeed و رتبه های Yslow در بازه زمانی دلخواه وجود دارد.
