موضوع: آموزش سبک وسریع نمودن لودینگ سایت

این اموزش به صورت عمومی برای اغلب سیستم های مدیریت محتوا قابل تغییر وتنظیم می باشدبخصوص دروردپرس واپن کارت

تست سرعت سایت GTmetrix | Website Speed and Performance Optimization
بهینه نمودن تصویر http://www.smushit.com/ysmush.it
Question آموزشی/شناسایی ایرادات سایت با GTmetrix.com
http://www.smushit.com
این ها اکثر ایراداتی هست که سایت gtmetrix.com از وب سایت شما میگیره و به عبارتی این عوامل رو باعث رشد سرعت سایت شما میدونه . به توضیح برخی از اون ها می پردازیم :

1 ـ Serve scaled images : منظورش اینه که این تصاویر رو که برش زدی الکی آپلود کردی و ازش تو صفحه استفاده نمی کنی به خدمت بگیر !

* توضیح : ممکن هست شما توی وردپرس تعیین کردید که از هرعکس یه دونه 4*3 هم برش بزنه ، اما ازش تو قالب استفاده نکردید ، یا اینکه مربوط به مطالب قدیمیه و در صفحه دیده نمیشه ، برای همین سایت به شما تذکر میده که عکس هایی که برش زدید و الکی آپلود کردید ازشون استفاده کنید .

2 ـ Remove query strings from static resources : این رو باید با W3total cash درست کنی .

3 ـ Combine images using CSS sprites : این فایل ها رو با تکنیک اسپرایت بیار کنار هم ، بعد با بکگراند پوزیشن ازشون هرجایی خواستی استفاده کن .

4 ـ Defer parsing of Javascript : هرچی فایل جاوا داری باید فشرده شه ، چه از افزونه باشه چ از قالب ، هم دستی باید انجام بدی هم با w3total cash

5 ـ Use efficient CSS selectors : مربوط به نحوه ی کدنویسی css هست

6 ـ Optimize images : باید عکسی که برای مطلب میذاری از اول بهینه باشه ( با فوتوشاپ save for web بزن )

7 ـ Inline small CSS : این میگه استایل بعضی از افزونه ها که مقدار کدهاشون کم هست رو بیا توی فایل html وارد کن ( یعنی بین دو تگ <style> و <style/> )

8 ـ Remove unused CSS : این همون کدهای سی اس اس بی استفاده است

9 ـ Avoid a character set in the meta tag : این میگه مثل اینکه کارکتر فایل یه افزونه رو تو کدها تعیین نکردی ( مثلا بذاری utf8 )

10 ـ Minify CSS : استایل یکی از افزونه هات هنوز به حد کافی minify نشده ، هنوز جا داره !

11 ـ Avoid bad requests : لینک خراب یا شکسته

12 ـ Inline small Javascript : این میگه چون این فایل جاوا کدهاش کمه ، لینکش رو از تو html بردار و همونجا کدش رو بنویس .

13 ـ Minify Javascript : تقریبا همون گزینه ی 4 هست .

14 ـ Specify image dimensions : باید سایز عکس هایی که میذاری با کد مشخص کنی ، چون اگه سایز تو کد مشخص باشه ، مرورگر به اندازش جا تو صفحه خالی میکنه و صفحه زودتر لود میشه .


_____________________________


Red face آموزش بهینه سازی و سبک کردن سایت

بنده و تعدادی از دوستان در یک انجمن دیگه یه مطلب خیلی عالی درباره بهینه سازی سایت منتشر کردیم و مورد استقبال خوبی واقع شد .
الان هم بنده اون مطلب رو اینجا قرار میدم تا دوستانی که میخوان ازش استفاده بکنند ...
( دوستان این مطلب فقط یک کپی ساده نیست و خودمم تو نگارشش شرکت داشتم پس شما هم لطفا برای پُربارتر شدن این آموزش به ما کمک کنید )

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

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

فعال سازی کش مرورگر :
یکی از مشکلات اکثر وب سایت ها این مورد هست که کش مرورگر رو برای فایل ها فعال نمیکنند . فرض کنید سایت شما 10 عکس ثابت داره و با هر بار لود قالب سایت ، این عکس ها هم لود میشه . حالا اگر قرار بر این باشه که بار این لود از سمت سرور انجام بشه و کاربر تمام فایل رو دریافت کنه خب مسلماً سرعت لود سایت بسیار کند خواهد بود . بنابراین بهترین راه اینه که این فایل ها مدت زمان خاصی روی کامپیوتر بازدید کننده ذخیره بشه و در هر بار لود سایت این عکس ها بجای لود از سرور از سایت خود کاربر لود بشه .
انجام این کار خیلی ساده هست . کافیه کدهای زیر رو به فایل htaccess سایتتون اضافه کنید .
کد:

کد HTML:

    ## EXPIRES CACHING ##
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
    ## EXPIRES CACHING ##

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

بهینه سازی عکس های سایت :
بهینه سازی عکس های سایت با توجه به اینکه هرکدوم یک درخواست لود از سرور محسوب میشه و همچنین حجم بالای عکس ها در یک سایت و تاثیر مستقیمش بر لود سایت میتونه فاکتور مهمی در سئو و بهینه سازی باشه و یکی از پارامترهای مهم در نظر گرفته برای بهینه سازی سایت در اکثر سایت های رتبه سنجی هست . بطوری که 3-4 پارامتر رتبه بندی ارتباط کاملا مستقیمی با عکس ها دارند . حالا این سوال پیش میاد که بهینه سازی عکس ها رو چطوری و از کجا شروع کنیم . . .

ابتدا باید با تگ عکس آشنا بشید :
کد:

<img scr="آدرس عکس" alt="نوشته جایگزین عکس" width="عرض عکس" height="ارتفاع عکس" title="با نگه داشتن موس بر روی عکس ظاهر می شود" />

ویژگی ALT : این قسمت بعنوان توضیح عکس محسوب میشه و اگر عکس شما لود نشه (به هر دلیلی) این نوشته جایگزین عکس

خواهد شد. این قسمت باید حتماً مرتبط با عکس باشه.

ویژگی Title : این قسمت در واقع وقتی موس روی عکس قرار بگیره لود میشه . میتونید مقدارش رو برابر alt در نظر بگیرید .

ویژگی های Width و Height عکس : در صورتی که در سایت خودتون عکس رو قرار میدید اگر طول و عرض عکس مشخص نباشه مرورگر

باید عکس رو لود کنه تا بتونه به بقیه قسمت ها برسه . چون مقدار فضای مورد نیاز عکس رو نمیدونه . اما اگر به مرورگر بگید که سایز

عکستون چقدره اونوقت مرورگر جای عکس رو خالی میزاره . متن ها رو لود میکنه و در ادامه میاد عکس ها رو لود میکنه . اینطوری

کاربرتون به متن مورد نظرش به سرعت دسترسی پیدا میکنه و مجبور نیست تا لود کامل سایت صبر کنه


این بخش رو هم حتماً دقت کنید در کد نویسی بهینه تگ تمام عکس ها باید به مقدار زیر ختم بشه. این نکته رو هیچوقت فراموش نکنید
کد:

/>


بهینه سازی عکس های سایت + معرفی افزونه مفید :
اگر تا الان بهینه سازی عکس ها رو انجام نمیدادی و از الان میخواید این کار رو شروع کنید یک راه میان بر برای این کار هست . بله . طبق معمول افزونه ها برای راحت کردن کار هستند . افزونه SEO Friendly Images میتونه قسمت های TITLE و ALT عکس رو با توجه به عنوان مطلبتون ویرایش کنه . استفاده از این افزونه رو به شدت توصیه میکنیم .
کد:

Page Not Found

دوستانی که برای مطالب خود عکس قرار میدن . برای سایز بندی عکس در مرورگر فایرفاکس (در کروم نشد اما تو IE تست نکردم) کافیه بر عکس کلیک کنید تا کادر دورش برای تغییر سایز ظاهر شه . در انتها کافیه بر روی مربع کوچک گوشه عکس (فرق نمیکنه کدوم گوشه) فقط یک کلیک کنید .



این پست توسط عبارت زیر به روز شده است :

بهینه سازی عکس ها - کاهش حجم تصاویر :
همونطور که قبلاً هم عنوان کردم بهینه سازی عکس ها بسیار لازمه و فاکتورهای مهمی در مورد عکس ها در بهینه سازی سایت نقش داره . مورد دیگه ای که باید در مورد عکس ها در نظر گرفت حجم تصاویر سایت هست . بسیاری از دوستان عکس ها رو در نرم افزار های مختلف آماده می کنند اما در مورد حجم و فرمت تصاویر اصلاً اقدامی نمیکنند . در صورتی که به راحتی میتونید حجم تصاویر رو کاهش بدید . در اینجا من دو ابزار براتون معرفی میکنم که میتونید توسط اون حجم عکس ها رو تا حد زیادی کاهش بدید .

استفاده از نرم افزار فتوشاپ

در فتوشاپ این امکان هست که عکس ها رو کم حجم کنید . کافیه بجای استفاده از دکمه save as برای ذخیره سازی تصاویر از دکمه save for web استفاده بشه . در پنجره بعد هم باید فرمت عکس رو jpg انتخاب کنید که کمترین حجم رو برای تصاویر بزرگ ایجاد میکنه . در ادامه میشه با زدن تیک گزینه Optimized و تغییر مقدار Quality عکس رو تا حدی کاهش حجم داد که کیفیتش آنچنان خراب نشه .

برای دیدن سایز بزرگ روی عکس کلیک کنید نام: size-mohandesyar.jpg مشاهده: 9 حجم: 29.2 کیلو بایت

- اون بالا سمت راست یک قسمت کوچکی هست که با کلیک بر روی اون منویی باز میشه . با انتخاب Optimize to fiile size می تونید تنظیمات رو برای حجم خاصی در نظر بگیرید . به عنوان مثال در نظر دارید حجم عکس 30 کیلوبایت باشه . میتونید این مقدار رو وارد کنید تا تنظیمات بطور اتوماتیک به نحوی انجام بشه که عکس شما 30 کیلوبایت بشه.

- اون پایین سمت راست هم میتونید سایز عکستون رو مشخص کنید . مسلماً با کم کردنش از حجم عکس هم کاسته میشه .

- پایین سمت چپ هم حجم عکس و فرمتش رو بصورت زنده نمایش میده .

استفاده از ابزار آنلاین Smushit

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

کد:

http://www.smushit.com

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

این پست توسط عبارت زیر به روز شده است :

از دیگر نرم افزارهای تحت وب برای بهینه سازی تصاویر می توان به سرویس های زیر اشاره کرد:
http://kraken.io/
http://www.punypng.com/
http://tinypng.org/
tinypng یکی از قدرتمندترین سرویس هاست ، این سرویس با حفظ transparency تصاویر آن ها را بهینه می کند...
این پست توسط عبارت زیر به روز شده است :

فعال سازی GZIP :

GZIP قابلیت سمت سرور هست که این امکان رو میده که فایل های درخواستی کاربر قبل از اینکه به مروگر فرستاده بشه برای افزایش سرعت ، فشرده بشه . این ابزار میتونه کمک زیادی در افزایش سرعت لود صفحات کنه و یکی از فاکتورهای مهم در بررسی سرعت سایت هاست . برای فعال سازی اون میتونید کد زیر رو که سایت GTMetrix ارائه کرده در داخل فایل htaccess خودتون قرار بدید .

کد:

کد HTML:

    # compress text, HTML, Javascript, CSS, and XML
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    # remove browser bugs
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent

و راه دوم مثل همیشه استفاده از افزونه هست . میتونید افزونه زیر رو با خیال راحت نصب کنید . افزونه های GZIP Enable و WordPress Gzip Compression از این قبیل هستند .

دوستانی که از IIS استفاده میکنند هم میتونن از این قابلیت استفاده کنند . کافیه این توضیحات از مایکروسافت رو بخونن

کد:

http://technet.microsoft.com/en-us/l...8WS.10%29.aspx

این پست توسط عبارت زیر به روز شده است :

Minify کردن فایل های جاوااسکریپت ، CSS و HTML :
یکی دیگه از مواردی که تاثیر زیادی در کاهش حجم سایت و افزایش لود داره فشرده سازی فایل های جاوا ، شیوه نامه ها و خرجی HTML سایت هست . اگر از افزونه W3 TOTAL CACHE استفاده میکنید این افزونه قابلیت MINIFY کردن رو داره اما اگر از این افزونه استفاده نمیکنید ابزارهای انلاین زیادی هاست که این کار رو برای شما انجام میده.
کد:

http://jscompress.com/
http://www.minifycss.com/

این صفحه هم 7 ابزار فشرده سازی آنلاین رو به شما معرفی کرده که توسط اونها میتونید فایل هاتون رو MINIFY کنید .

کد:

http://www.devcurry.com/2009/11/7-fr...ripts-and.html


Remove query strings from static resources یا حذف ؟ از انتهای لینک ها :

یکی از مواردی که توی خیلی از سایت ها بهش بر میخورم اینه که در انتهای فایل های استاتیک علامت سوال "؟" قرارداده شده . دقت کنید وقتی در انتهای یکی آدرس علامت سوال قرار میگیره کل محتویات ان ادرس بصورت کامل لود میشن و هیچ فایل کش شده ای به شما نمایش داده نمیشه .

کاری که Ctrl + F5 میکنه دقیقاً همین کاره . تمامی فایل های استاتیک دوباره از سرور درخواست میشن و باعث دیر لود شدن اون ادرس / فایل میشه .

بنابراین سعی کنید از افزونه هایی که باعث این کار میشن استفاده نکنید و یا بصورت دستی ادرس دهی کنید و علامت "؟" رو از انتهای فایل های استاتیک (عکس ها ، ویدئو ها ، CSS ها ، جاوا اسکریپت ها و . .. ) - بردارید تا قابلیت کش پذیر بودنشون رو از دست ندن .

دقت بفرمایید در صورتی که در انتهای لینک ها این علامت باشه توسط نرم افزهای کش قوی مثل w3 total cache هم نمیتونید فایل ها رو کش کنید . به این مورد حتماً اهمیت بدید .

معجزه با نرم افزار PNGGauntlet

نرم افزار فوق العاده پرکاربرد اما با رابط کاربری اسان با نام "PNGGauntlet" رو بهتون معرفی میکنم که میتونید از سایت زیر به رایگان دریافت کنید

pnggauntlet.com

فقط کافیه تصویر مورد نظر رو بهش بدید و دکمه " Optimize! " رو بزنید
-
بنده حجم یکی از سایتهای خودم رو با این نرم افزار که 900 کیلوبایت بود به 400 کیلوبایت رسوندم .

مهمترین نکته اینه که حتی 1% هم از کیفیت تصاویرتون تغییری نمیکنه و فقط حجم تصاویر کمتر خواهد شد .

نمونه تصویر بهینه شده با این نرم افزار :

این تصویری هست که تو قالبم بکار رفته بود (12 کیلوبایت) : http://s1.picofile.com/file/7700210321/search.png

اما تصویری که با این نرم افزار بهینه کردم (822 بایت یا 1 کیلوبایت) : http://s1.picofile.com/file/7700210428/search2.png

استفاده از css sprint

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

از طریق این خاصیت css3 شما می تونید در قالبتون به جای قرار دادن 10 عدد عکس تمام این 10 عدد عکس رو در یک عکس قرار بدید و از طریق سی اس اس اون رو استخراج کنید اینطوری به جای این که 10 تا درخواست به سرور زده بشه 1 درخواست داده می شه(دوستان این مورد کار افراد حرفه ای هستش و آموزشش کمی سخته و در این تاپیک مجالی براش نیست)

آیاآموزش بسیارخوب دراین پست برای تمام نسخه های اپن کارت صدق میکندیاخیر؟

لطفاادامه رادرهمین پست مندرج فرماید