كاربردي آموزش بالا بردن سرعت سایت با سایت gtmetrix
|
۲۴-۱۱-۱۳۹۲, ۰۵:۴۶ عصر
ارسال: #1
|
|||
|
|||
آموزش بالا بردن سرعت سایت با سایت gtmetrix
سلام خدمت تمامی کاربران عزیز پارس جوم
با توجه به اطلاعیه قبلی سایت قرار بر این شد که یکی از سایت ها کاملا بهینه سازی بشه و خروجی اون بشه آموزشی برای تمامی کاربران عزیز! این آموزش بیشتر به مواردی پرداخته که اکثر سایت ها با این موارد درگیر هستند. بنا بر خواسته مدیر سایتی که کار سئو روش انجام شده نامی از سایت برده نمیشه. نتایج قبل از کار: نتیجه بعد از کار: لازم بذکر است که سایتی که کار سئو روی آن انجام شده از سرور بسیار ضعیفی استفاده کرده و بقیه موارد که نمره ضعیفی دریافت کردند تماما مشکل از سمت سرور می باشد! شروع آموزش: ایتدا به سایت Gtmetrix رفته و آدرس سایت خود رو وارد کنید GTmetrix | Website Speed and Performance Optimization بعد از وارد نمودن آدرس سایت صفحه ای به شکل زیر خواهید داشته کد: (انتخاب همه) http://gtmetrix.com/reports/gtmetrix.com/3Yboi3Rt قسمت Page load time سرعت لود سایت شمت بر حسب ثانیه . قسمت Total page size میزان حجم صفحه ایندکس شما. قسمت Total number of requests تعداد درخواست هایی که به صفحه داده میشه. در تب PageSpeed چند تب وجود داره: Priority:این مورد اهمیت موارد رو نشون میده. Type:نوع مشکل رو نشون میده که میتونه از سمت سرور باشه یا دستورات Css و یا ... Grade:به نوعی نمره رو از 100 به شما نشون میده اولین مورد مربوط به Leverage browser caching میشد. این مشکل از سمت سرور هست.برای رفع این مورد شما فایل .htaccess باز کرده و کد زیر رو بعد از RewriteEngine On قرار دهید: کد: (انتخاب همه) # Turn off ETags مورد بعدی 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) گزینه بعدی 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 بر طرف بشه. پایان آموزشـــ موفق باشید. دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. |
|||
|
۲۱-۳-۱۳۹۳, ۰۷:۳۲ صبح
ارسال: #2
|
|||
|
|||
RE: آموزش بالا بردن سرعت سایت با سایت gtmetrix
ممنون از آموزشتون چند تا سوال داشتم
1- نقل قول: SpritePad - Create and edit css spritesاین سایت رو میشه آدرسش رو بزارید من سرچ کردم خیلی سایت اومد اما نمیدونستم کدوم رو باید انتخاب کنم تا انجام بدم 2- در قسمت Specify image dimensions در این قسمت چطوری میتونم اندازه تصاویر رو قرار بدم؟چون در قسمت مطالبم از طریق قسمت تصاویر و لینک ها ، تصویر اولین نوشته و تصویر در کل مطالبم رو میگذارم حالا چطوری میتونم بهش اندازه بدم؟ 3- نقل قول: Optimize imagesچطوری میتون کدهای css رو این تغیرات بدم اسم عکسها عوض میشه و پر میشه عدد و وقتی اون عکس رو میزارم کیفیتش خیلی میاد پایین من عکس رو از قسمت قسمت تصاویر و لینک ها ، تصویر اولین نوشته و تصویر در کل مطالبم رو میگذارم ممنون میشم راهنمایی کنید |
|||
۲۳-۳-۱۳۹۳, ۰۴:۴۷ صبح
ارسال: #3
|
|||
|
|||
RE: آموزش بالا بردن سرعت سایت با سایت gtmetrix
این سوالا رو هم میشه جواب بدید حالا که هستید یه سوال دیگه اینکه
نقل قول: گزینه Specify a cache validatorتوی منبعی که معرفی کردید یه سری کد گذاشته بود منم گذاشتم ولی هیچ فقی نکرد سوال زیاد دارم اینا میشه جواب بدید تا بقیه رو بپرسم؟ |
|||
|
کاربرانِ درحال بازدید از این موضوع: 1 مهمان