با سلام خدمت کاربران و بازدیدکنندگان گروپ دیزاین!در این پست میخواهیم سایتمان را سرعت لودش را بالا ببریم که این کار در سئو هم تاثیر مثبتی دارد!
برای شروع به آدرس زیر بروید:
http://gtmetrix.com
بعد از ورود با سایت آدس سایت خود را مانند مانند نمونه وارد کنید و دکمه Go را بزنید.
حالا منتظر بمونید سایتتون داره آنالیز میشه!حالا صفحه ی اطلاعات بهینه سازی باز شد!
در قسمت Summary دو قسمت هست:
۱-Page Speed Grade
۲-YSlow Grade
مهمترین این دوتا گزینه بالا گزینه ی ۱ هست!
در جلوی این دو گزینه ۳ تا گزینه ی دیگه هم هست!
Page load time: نشاندهنده زمان لود صفحه اصلی وب شماست که ممکن است بر اساس سرور های جی تی متریکس هر بار یک زمان را نشان دهد پس زیاد اهمیتی ندارد!
Total page size: که نشاندهنده حجم صفحه اول شماست که بسیار مهم بوده و با انجام فرآیندهای بهینه سازی سایت باید حجم را کاهش دهید!
Total number of requests: نشاندهنده تعداد درخواست های انجام شده برای بالا آمدن صفحه اصلی سایت شماست!
خوب یکی یکی از قسمت ها را که پشت سر هم دیگه هست معرفی میکنم و میگم که هرکردوم چیه به چه درد میخوره!
RECOMMENDATION:
۱-Combine images using CSS sprites:
در این بخش از شما خواسته میشه تا عکس های موجود در فایل های css را را با یکدیگر میکس و مخلوط کنید و به جای چند عکس از یک لینک عکس استفاده کنید! این بخش یکی از سخت ترین بخش ها و وقت گیر ترین بخش های بهینه سازی سایته که برای برطرف کردن این خطا شما نیاز به فتوشاپ و همچنین مهارت در کدنویسی css دارید اما میتوانید از سایت زیر برای اینکار کمک بگیرید که عکس ها را به طور اتوماتیک یکی کرده و تغییرات لازم در فایل های css را نیز به شما نشان میدهد.
۲-Specify image dimensions:
در این بخش از شما میخواهد که برای تمامی عکس های سایتتون طول و عرض تعریف کنید.
۳-Leverage browser caching:
این در مورد کش وب سایت هست!
۴-Optimize images:در این بخش نیز gtmetrix از شما میخواهد تا عکس های بهینه شده توسط این سایت را جایگزین لینک عکس های خود بکنید برای این کار نیز در جلوی لینک هر عکس بر روی گزینه optimized version کلیک کرده و سپس عکس داده شده توسط gtmetrix را بر روی سیستم خود ذخیره کنید و سپس با همان نام و همان پسوند عکس اصلی در همان آدرسی که عکس اصلی شما قرار داشت آپلود کنید!
۵-Minify CSS:
در این بخش باید با استفاده از optimized version که در این قسمت هست یک css را دریافت کنید که این css همان css سایت خودتونه ولی بهینه شده البته از css فعلی سایت خودتون قبل از این کار یک پشتیبان بگیرید یعنی css فعلی را داشته باشید!
۶-Minify HTML:
این قسمت از شما میخواهد که فایل html که داده را با قالب خودتون جایگزین کنید اینو بگم که این کارو اصلا نکنید ، این قسمت رها کنید!
۷-Avoid bad requests:
این قسمت هم از شما میخواهد که فایل هایی که در قالب هستند و آپلود نشدند یا ارور not found میدهند را حذف کنید مثلا آدرس یک عکس داخل سایته و آپلود نشده یا خراب شده!
۸-Avoid a character set in the meta tag:
این قسمت هم معمولا از همه ۱۰۰ هست!
۹-Avoid landing page redirects:
این هم معمولا ۱۰۰ هست!
۱۰-Defer parsing of JavaScript:
این قسمت هم میخواهد از شما که کد های جاوا اسکریپت قالب خودتونو تجزیه و کوچک نکنید!
۱۱-Enable gzip compression:
این گزینه برای فشرده کزدن سایت و افزایش سرعت هست که وردپرس یک افزونه با همین نام دارد!
۱۲-Inline small CSS:
این بخش از شما میخواهد که css هایی که کوچک هستند را از داخل فایل css در بیارید و به صورت مستقیم در سایت نشون بدید برای این کار css را بین دو کد استایل در بین دو Head قالب قرار بدید!(منظور از Css استایل است!!!)
۱۳-Inline small JavaScript:
این قسمت میگوید که یک فایل جاوا اسکریپت (js) در قالبتون وجود داره که کوچک هست!برای این کار کد جاوا اسکریپت کوچک را با استفاده از دو کد اسکریپت بین دو Head قرار دهید!
۱۴-Minify JavaScript:
این بخش از شما میخواهد که فایل js داده شده را با فایل js سایت خودتون عوض کنید!به نظر من این کارا نکنید بهتره!ببعضو وقتا هم خیلی خوب میشه!فایل js فعلی قالبتونو نگه دارید اگه میخواید js را عوض کنید!
۱۵-Minimize redirects:
این بخش میگه که اگر قسمتی از سایتتون وجود داره که ریدایرکت میشه را حذف کنید یعنی جایی نباشه که انتقال بده سایتو به جایی دیگه!
(redirect)
۱۶-Minimize request size:
این قسمت هم معمولا ۱۰۰ درصد هست!
۱۷-Optimize the order of styles and scripts:
این بخش از شما یخواهد که استایل ها و جاوا اسکریپت ها را بهینه و کوتاه کنید!
۱۹-Put CSS in the document head:
این بخش از شما میخواهد که استایل ها و جاوا اسکریپت ها را در بخش head قرار دهید!
۱۸-Remove query strings from static resources:
این بخش هم حذف منابع و کپی هاست!
۱۹-Serve resources from a consistent URL:
این بخش هم میگه لینک های سایت و لینک های خروجی باید سالم باشند!
۲۰-Serve scaled images:
این بخش از شما میخواهد که عکس هایی که طول و عرضان را معلوم کردید طول و عرض را اندازه عکس واقعی کنید یا عکس واقعی را اندازه طول و عرض کدتون کنید!مثلا شما عکس دارید با اندازه ۲۵۰*۱۵۰ و اندازه طول و عرض را با کد معلوم کردید که ۳۵۰*۵۰! این دو باید یکی باشند سایز کد و عکس شما!
۲۱-Specify a cache validator:
این فسمت هم برای اعتبار سنجی وب شما هست که w3 در سایتش یک قسمت برای اعتبار سنجی دارد!
۲۴-Specify a Vary: Accept-Encoding header:
این بخش از شما میخواهد که هدر سایتتون را رمز گذاری کنید!(در css قرار دهید یا رمز گذاری کنید!)
۲۲-Avoid CSS @import:
این قسمت هم منظورش css های مشکل دار هست فکر کنم!(این قسمتو مشکل داشتم ولی خودش ۱۰۰ بود نیشخند )
۲۳-Prefer asynchronous resources:
این قسمت هم مربوط به js هست که اگر بهینه نباشد درصدش کم میشود!