زمان کنونی: ۲۹-۱۲-۱۴۰۲, ۰۳:۴۰ عصر درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
كاربردي آموزش بالا بردن سرعت سایت با سایت gtmetrix
۲۴-۱۱-۱۳۹۲, ۰۵:۴۶ عصر
ارسال: #1
آموزش بالا بردن سرعت سایت با سایت gtmetrix
سلام خدمت تمامی کاربران عزیز پارس جوم

با توجه به اطلاعیه قبلی سایت قرار بر این شد که یکی از سایت ها کاملا بهینه سازی بشه و خروجی اون بشه آموزشی برای تمامی کاربران عزیز!
این آموزش بیشتر به مواردی پرداخته که اکثر سایت ها با این موارد درگیر هستند.
بنا بر خواسته مدیر سایتی که کار سئو روش انجام شده نامی از سایت برده نمیشه.

نتایج قبل از کار:

[تصویر:  do.php?img=258]

نتیجه بعد از کار:
لازم بذکر است که سایتی که کار سئو روی آن انجام شده از سرور بسیار ضعیفی استفاده کرده و بقیه موارد که نمره ضعیفی دریافت کردند تماما مشکل از سمت سرور می باشد!
[تصویر:  do.php?img=261]



شروع آموزش:
ایتدا به سایت Gtmetrix رفته و آدرس سایت خود رو وارد کنید
GTmetrix | Website Speed and Performance Optimization
بعد از وارد نمودن آدرس سایت صفحه ای به شکل زیر خواهید داشته
http://gtmetrix.com/reports/gtmetrix.com/3Yboi3Rt
قسمت Page Speed Grade نمره ای از 100 به شما میده که نشان دهنده سرعت سایت شما هست.
قسمت Page load time سرعت لود سایت شمت بر حسب ثانیه .
قسمت Total page size میزان حجم صفحه ایندکس شما.
قسمت Total number of requests تعداد درخواست هایی که به صفحه داده میشه.

در تب PageSpeed چند تب وجود داره:

Priority:این مورد اهمیت موارد رو نشون میده.
Type:نوع مشکل رو نشون میده که میتونه از سمت سرور باشه یا دستورات Css و یا ...
Grade:به نوعی نمره رو از 100 به شما نشون میده

اولین مورد مربوط به Leverage browser caching میشد.
[تصویر:  do.php?thmb=259]

این مشکل از سمت سرور هست.برای رفع این مورد شما فایل .htaccess باز کرده و کد زیر رو بعد از RewriteEngine On قرار دهید:

# Turn off ETags
    FileETag None
    Header unset ETag
    # Set Expires headers
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
    ExpiresByType text/html "access plus 1 second"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    # Remove Last-Modified header
    Header unset Last-Modified

مورد بعدی Avoid a character set in the meta tag هست که خیلی کم پیش میاد سایتی با اون درگیر باشه این مورد بیشتر به عدم تعین نوع کاراکتر فایل مربوط میشه.فایل هایی که لیست کرده رو باید باز و نوع رو درونش مشخص نمایید

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


اینجا میخواد فایل هایی که این سایت به شما میده با فایل های اصلی جایگزین کنید.
برای این سایت 9 فایل رو لیست کرده که هم برای افزونه ها هستند و هم برای خود قالب.
پیشنهاد میشه ابتدا از تمامی فایل ها یک کپی تهیه کنید سپس تغیرات رو اعمال کنید/در اصل فایل هایی که به شما میده نوعی فشرده شده است(در این فایل ها توضیحات پاک میشه و کد ها کمی فشرده میشند!)

مورد بعدی مربوط میشه به Combine images using CSS sprites
این مورد رو خیلی از قالب ها و سایت ها با اون در گیر هستند.
این جا از شما میخواد تا تصاویرتون رو یکی کنید!
برای این کار بنده سایت زیر رو به شما پیشنهاد میدم
SpritePad - Create and edit css sprites
شما ابتدا تمامی تصاویر که سایت gtmetrix گفته رو در این سایت با drag and drop میندازید توی صفحه ای که توی این سایت هست .بعد از قرار دادن تمامی تصاویر در بالای سایت گزینه ای به نام Fit document وجود داره.بعد از زدن این گزینه سپس اقدام به دانلود کنید.

بعد از دانلود به شما یه فایل فشرده میده که حاوی یک تصویر و یک فایل Css هست.
تصاویری که شما sprites کردید(تو سایت بالا اوردید) رو حذف و این تصویر(تصویری که در فایل فشرده بوده) رو قرار بدید.
و بعد به کد های Css رو اصلاح کنید.

گزینه بعدی Enable gzip compression
درصدی که تو سایت gtmetrx به شما نمایش مده تا حدود زیادی بستگی به سرور شما داره.
برای فعال سازی این مورد به مدیریت کلی جوملا رفته -سرور - فعال سازی Gzip رو روی بله قرار دهید.

گزینه Avoid bad requests

این مورد بیشتر مربوط به تصاویر و کد نویسی میشه.
به طور مثال تصویری به نام joomedia.png در پوشه تصاویر وجود نداره ولی در کد نویسی امدیم از کد زیر استفاده کردیم:
body{background-image:url(../images/joomedia.png)
شما باید مواردی که در gtmetrix به شما گفته رو برید اصلاح و یا حذف کنید!

گزینه بعدی Specify image dimensions
این مورد تماما مشکل از کد نویسی هست.البته کمتر پیش میاد در کد های Css یه قالب باشه بشتر میشه گفت به تصاویری مربوط میشه که در مطالب،موقعیت ها و... استفاده کردید و به اون اندازه ندادید!
البته اندازه دادن تصاویر خیلی مهم هست و گوگل از این کار شما لذت میبره
در این قسمت Gtmetrix از شما میخواد تا تصاویرتون رو اندازه هاش رو مشخص کنید.که چندان سخت نیست!

گزینه بعدی به Optimize images مربوط میشه

در این مرحله از شما میخواد تصاویرتون رو بهینه کنید.
خود Gtmetrix تصاویر بهینه شده رو دراختیار شما قرار میده که باید با تصاویر قبلی جایگزین کنید.
این مرحله تو بالا بردن load صفحه بسیار تاثیر داره و توصیه میشه حتما تصاویر رو replace کنید!
توجه داشته باشید که در این مرحله ممکن پسوند برخی از تصاویر تغیر کنه که باید در کد های Css همین تغیرات رو لحاظ کنید!

گزینه Minify JavaScript

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

گزینه Remove unused CSS

در این گزینه از شما خواسته میشه که کد های اضافی Css رو حذف کنید.
تو این مورد زیاد نمیشه کار کرد چون این امکان وجود داره که شما کدی نوشته باشید که تو جاهای دیگه از اون استفاده شده باشه ولی Gtmetrix اون رو کد اضافی حساب کنه!


'گزینه Use efficient CSS selectors هم تقریبا شبیه به مورد بالا هست.اما کمی پیجده تر
البته این گزینه هم شدنی هست ولی کمی کار زیاد میبره که باید روی همه موارد کار کنید!


گزینه Serve scale
در این قسمت می بایست تصاویرتون رو با اندازه واقعی به کار ببرید!
به صورت مثال تصویری در مطالب داریم با اندازه واقعی 900*900 خب ما امدیم تو کد ها اندازه عکس رو از 900*900 به 500*400 تغیر دادیم که باید شما خود عکس رو با فتوشاپ و.. به 500*400 تبدیل کنید و مجدد آپ کنید!

مورد بعدی گزینه ای به نام Inline small CSS هست.
این مورد بیشتر به فایل های Css کم حجم(مقدار)اشاره میکنه.
در این گزینه به شما میگه که فایل های Css که حجم کمی دارند رو داخل یک فایل بیارید و یک فایل Load بشه!

گزینه Inline small JavaScript هم شبیه به Inline small CSS هست با این تفاوت که این گزینه برای فایل های جاوا هست!

گزینه Specify a cache validator
این مورد نیز از سمت سرور شما می باشد.
این مورد نیز میبایست با قرار دادن کد بالا در htaccess بر طرف بشه.

پایان آموزشـــ
موفق باشید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
امضاء shaban532
فقط خدمت به جوملای ایران.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط Pourdaryaei ، hsmtech ، mohi ، سعید حمزه زاده
۲۱-۳-۱۳۹۳, ۰۷:۳۲ صبح
ارسال: #2
RE: آموزش بالا بردن سرعت سایت با سایت gtmetrix
ممنون از آموزشتون چند تا سوال داشتم
1-
نقل قول: SpritePad - Create and edit css sprites
این سایت رو میشه آدرسش رو بزارید
من سرچ کردم خیلی سایت اومد اما نمیدونستم کدوم رو باید انتخاب کنم تا انجام بدم
2-
در قسمت Specify image dimensions
در این قسمت چطوری میتونم اندازه تصاویر رو قرار بدم؟چون در قسمت مطالبم از طریق قسمت تصاویر و لینک ها ، تصویر اولین نوشته و تصویر در کل مطالبم رو میگذارم حالا چطوری میتونم بهش اندازه بدم؟
3-
نقل قول: Optimize images
توجه داشته باشید که در این مرحله ممکن پسوند برخی از تصاویر تغیر کنه که باید در کد های Css همین تغیرات رو لحاظ کنید!
چطوری میتون کدهای css رو این تغیرات بدم اسم عکسها عوض میشه و پر میشه عدد و وقتی اون عکس رو میزارم کیفیتش خیلی میاد پایین

من عکس رو از قسمت قسمت تصاویر و لینک ها ، تصویر اولین نوشته و تصویر در کل مطالبم رو میگذارم

joomla 3.0Rose ممنون میشم راهنمایی کنید
امضاء mohi
وجدان بزرگترین فیلسوف است(روسو)
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۳-۳-۱۳۹۳, ۰۴:۴۷ صبح
ارسال: #3
RE: آموزش بالا بردن سرعت سایت با سایت gtmetrix
این سوالا رو هم میشه جواب بدید حالا که هستید یه سوال دیگه اینکه
نقل قول: گزینه Specify a cache validator
توی منبعی که معرفی کردید یه سری کد گذاشته بود منم گذاشتم ولی هیچ فقی نکرد

سوال زیاد دارم اینا میشه جواب بدید تا بقیه رو بپرسم؟
امضاء mohi
وجدان بزرگترین فیلسوف است(روسو)
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان