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

بیاید
GTmetrix | Website Speed and Performance Optimization
آدرس سایتتون ر وبدین
بعد در قسمت اول سرعت لود سایت رو نشونتون میده و زیرش ایراد هارو میگه بهتون
مثلا در مورد سایت دانلود من
این شکلیه
Latest Performance Report for: http://www.downloadpersian.com/ | GTmetrix
حالا کافیه
مثلا برید
Optimize images
تمام تصاویری که حجمشون بالاست رو با تصاویر اصلاح شدشو گذاشته میتونید جایگزین کنید درون هاست خودتون
و بعد قسمت های دیگه هم داره واسه کم حجم کردن فایل های css و ...
و بعد قسمتی دیگر برای اینکه چک کنید آیا اروری داره یا نه
ملا چیز خوبیه
خیلی ها با همین سایت سئو میکنند
اولین کاری که میتونید انجام بدید و نتیجه خوبی رو معمولا بگیرید
رفتن به تب timel line هستش

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

http://aryapdf.com/pic/images/ufr11cu22prlomnoaugs.gif


در مرحله بعد به خاطر راحتی در مایش صفحه به مانند شکل زیر عمل کنید

http://aryapdf.com/pic/images/5943hgmjioofhqkg7em.gif



این بخش مهمترین بخش هستش که معمولا اکثریت سایت ها مورد دارند
برای دیدن بهتر عکس روش کلیک کنید
http://aryapdf.com/pic/images/290ezxrrb75th5jm9xi3.gif


این صفحه را با دقت فروان نگاه کنید
تعداد ری***ت های سایت شما در اینجا قرار داره
موارد قرمز یعنی این آدرس اصلا وجود نداره و فقط داره جلوی لود سایت شما رو میگیره
در این صفحه مثلا نمونه ای از این آدرس میبینید که برای تبلیغات گذاشته شده و لود صفحه رو واقعا گرفته و برای خودم با سرعت 512 چند ثانیه طول کشید تا باز بشه
http://ashiyane.org/banner/navid.gif
البته ممکنه بعضی مواقع هم سریع باز بشه و به سرعت سایت و داون های سایت های مختلف بستگی داره

پس گام اول شناسایی عکس ها و کد های رنگ قرمز و بهینه کردنشون
اگه در این صفحه به جز خط اول آدرس صفحه اول سایت خودتون یا جای دیگه بودش بدونید که داره ریدایرکت میشه
یعنی مثلا وقتی سایت شما داره باز میشه انگار که سایت خود شما یا دیگری توش داره چند بار باز یشه و بازدید کننده بیچاره اندازه باز شدن چند سایت و صفحه باید تحمل کنه
به خاطر همین عرض کردم که فعلا کد 404 رو از سایت خودتون بردارید
در اینجا قرار دادن کد های تبلیغاتی و خصوصا جاوا از سایت های دیگه خیلی تاثیر داره
باز هم عرض میکنم که با دقت فراوان کل این صفحه رو ببینید و آدرس ها رو چک کنید
ممکنه ادرس های باشه که خودتون هم خبر ندارید و بعضا تو قالب هم نباشه اما تو فلان فایل جاوا هستش و از اونجا فراخوانی میشه اما باز نمیشه و لود سایت شما رو میگیره
در این مرحله انشاءالله موفق باشید

---------- Post added at 01:22 AM ---------- Previous post was at 01:20 AM ----------

در اموزش بعدی به بهینه سازی اولیه عکس های سایت میپردازیم
با توجه به عکس پیش میرید و تقریبا برای همه سایت ها این وضعیت کم یا زیاد هستش
http://aryapdf.com/pic/images/gdfuewqx9r8qv2a7mo.gif

با کلیک کردن رو گزینه optimize images مواردی رو به این شکل برای شما نشان میده که بستگی به تعداد عکس و مشکلاتش هستش
http://aryapdf.com/pic/images/ec95kswi1gaadqrufgjm.gif

در فلش شماره دوم آدرس عکس فعلی که رو سایت شما هستش رو نشون میده و در فلش شماره سه عکس بهینه شده رو به شما میده
مثلا الان برای سایت میلاد جان اولین عکس رو میتونید ببینید و بهینه شده اش رو
حجم عکس فعلی حدود 60 کیلوبایت و بهینه شده اش فکر کنم 35 کیلوبایت بودش و نکته مهمش این هستش که کیفیت عکس هیچ افتی نکرده و قابل تشخیص هم نیستش
حالا یه حساب ساده بکنید که اگه ده تا عکس به این شکل باشه و ترمیم بشه چقدر تو سرعت سایت شما میتونه تاثیر بزاره
در help خود این سایت گفته شده که اولویت همیشه به png هستش و بیشتر عکس ها رو با این فرمت یا jepg به شما میده که میتونید تغییر بدید و اگه عکس قالب هستش میتونید اپلود بکنید با همون اسم آدرس اصلی و در قالب پسوند عکس رو مثلا از gif به png تبدیل بکنید و نتایج رو ببینید
هر دفعه هم میتونید بگید این سایت براتون دوباره انالیز بگیره و ببینید که کدوم عکس ها هنوز میتونن تغییر بکنن

به شخصه از این بخش خیلی بهره بردم و حجم عکس های سایتم رو از حدود 300 کیلوبایت به 180 کیلوبایت رسوندم و میگن قطره قطره جمع میشه

یه نکته هم هستش که همیشه ادرس اولین آنالیز خودتون رو نگه دارید و در اخر که کارها رو انجام میدید با اولیه مقایسه کنید و لذت ببرید
موفق باشید


---------- Post added at 01:24 AM ---------- Previous post was at 01:22 AM ----------

امیدوارم سر فرصت و با حوصله موارد قبلی رو انجام بدید
این آموزش یکی از چیزهای هستش که ممکنه اولش همه شک کنند و یا فکر کنن سر کاری هستش اما وقتی خودم تست کردمش به نتیجه بسیار عالی اون پی بردم
در این آموزش به این اشاره میشه که برای عکس ها حتما طول و عرض مشخص بشه
حتی برای عکس های که با اندازه واقعی خودشون دارن اجرا میشن
مثلا عکسی باطول و عرض 16 * 16 هستش و در قالب هم با همین اندازه استفاده شده و به نوعی resize نشده هم باید توسط کد های مخصوص طول و عرض براش تعیین بشه
بعضی دوستان میفرمائید که این کار باعث حجیم تر شدن حجم قالب در کد نویسی مبشه
اما چیز که در عمل اجرا میشه واقعا بر عکس این گفته هستش و سرعت لود بسیار بهتر میشه
بنده بارها عرض کردم که برنامه نویسی بلد نیستم و در این مورد صحبتی هم نمیکنم و همیشه بر اساس تجربه و چیزی که میبینم نظر میدم
نتیجه ای که با این کار من دیدم به این شکل بودش که برای بعضی از عکس های سایتم طول و عرض انتخاب کردم و به بقیه دست نزدم
نتیجه این شد که هر وقت سایت باز میشدش و یا ctrl + f5 زده میشد عکس های که طول و عرض براشون مشخص شده بسیار سریعتر باز میشدن
و نکته جالبتر اینکه اگه طول و عرض مشخص نشده باشه و شما سایت رو باز کنید مروگر شما لحظه ای اونجا صبر میکنه تا عکس باز بشه و بعد سراغ کدها و عکس های دیگه میره که زمان نسبتا زیادی رو صرف میکنه
در صورتی که با این روش کل سایت بخش بخش و به سرعت باز میشه و در ادامه اون عکس ها باز میشن

با این توضیح به عکس زیر توجه بفرمائید
http://aryapdf.com/pic/images/tdmffhv8aroaseqmla.png

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

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


---------- Post added at 01:25 AM ---------- Previous post was at 01:24 AM ----------

اموزش بعدی قرار گرفتن کدهای ریدایرکت هستش که چه در سایت شما باشه و یا در سایت های دیگه که تو وب شما داره فراخوانی میشه
http://aryapdf.com/pic/images/irvjgenxu9688s1dngd.png


در این تصویر مشاهده می فرمائید که چه آدرس های داره بر اساس کد 404 به صفحه اول ریدایرکت میشه که داخل فایل htaccess قرار گرفته است
و به این معنی هستش که اون آدرس ها در سایت شما وجود نداره ولی داره فراخوانی میشه !
که باعث این میشه در ساده ترین حالت که اگه عکس یا fram باشه داخل خودش یک بار دیگر سایت شما رو باز بکنه و لود سایت شما رو شدیدا کاهش میده
در این تصویر یک مورد آموزشی هم هستش که در تاپیک های قبل بهش اشاره کرده بودم
آدرس عکسی که با فلش نشان داده شده را اگر ببینید متوجه میشید که کد ریدایرکتی که در سایت های دیگر لحاظ شده و شما استفاده میکنید هم چقدر میتونه تو لود شما تاثیر گذار باشه

یک بار دیگه به عکسی که در تاپیک های اول نشان دادم دقت بکنید که همین کد ریدایرکت چقدر تو زمان باز شدن شما تاثیر منفی میتونه داشته باشه
http://aryapdf.com/pic/images/290ezxrrb75th5jm9xi3.gif

خط یکی مانده به اخری ک همان عکس هستش و حدودا 6 ثانیه از 14 ثانیه کلی سایت مربوط به تنها همین عکس هستش


---------- Post added at 01:26 AM ---------- Previous post was at 01:25 AM ----------

قدم بعدی برای بهینه سازی ، آرایش درست کد های جاوا شما هستش
یکی از قابلیت های جالب این سایت این است که کد های جاوا شما را بهینه میکنه و مقدار درصدی که مشکل داره رو بر اساس الگوریتم خودش میگه
بنده این بخش و کدهای که برای جایگزینی به شما ارائه میدهد را تست کردم و صد در صد و بدون مشکل کار کرده و شما هم میتونید با گرفتن پشتیبان از فایل هاتون اونها رو تست کنید و اگه مشکلی نبودش استفاده کنید و بعد از گذاشتن کد های پیشنهادی این سایت اون قابلیت ها رو در سایتتون تست کنید و ببینید که بدون ایراد کار خواهد کرد
تنها مشکلی که بعضا پیش میاد پشتیبانی نکردن کد ارائه شده این سایت با زبان فارسی هستش ( اونم نه در تمام موارد )
البته کدهای که ما هم استفاده میکنیم عموما انگلیسی هستن و فارسی نداره که مشکل داشته باشه
و مطمئنا دوستانی که برنامه نویسی بلد هستن میتونن راهنمایی کنن که چه کاری برای تکمیلش باید انجام داد

با توجه به تصویر میتونید عمل کنید
http://aryapdf.com/pic/images/aerv3ugf5y320c0novh.gif

مشخص هستش که ادرس کد جاوا شما کدوم ها هستن و کد بهینه شده کدام است
البته قابل ذکر هستش که تا میتوانید از گذاشتن کد های جاوا داخل سایت پرهیز کنید و مثلا برای گذاشتن یک امکانات بیخود که سالی یک بار هم بدرد نمیخوره چندین کد جاوا و بعضا سنگین داخل سایت قرار ندید

موضوع بعدی هم که در help این سایت بودش ( با انگلیسی دست و پا شکسته ترجمه شدش ) اموزش این نکته بود که کد های جاوا و.. رو ته قالب و سورس قرار بدید که مانع باز شدن سایت نشه
نکته جالی بودش که نمیدونم بدرستی در سایت های بزرگ اجرا میشه یا نه


---------- Post added at 01:27 AM ---------- Previous post was at 01:26 AM ----------

گزینه بعدی برای بهینه سازی css سایت هستش
با توجه به تصویر انالیزی از css های مورد دار شما قرار داده میشه و نسخه بهینه شده رو هم تحویلتون میده که میتونید باز هم عرض میکنم با گرفتن نسخه پشتیبان از سایت اونها رو ازمایش بکنید
و الان مثلا در این مثال اولین موردی که گفته شده چون کاملا فارسی هستش نسخه بهینه شده درست نیستش
اما بقیش قابل استفاده هستش

http://aryapdf.com/pic/images/hyju844iq2k7ing9cyr.gif


این آموزش تخصصی هستش و عزیزانی که با کد نویسی css آشنایی دارن میتونن کمک کنن
در این مرحلهT این سایت ایرادات css شما رو از نظر کد های اضافی مورد بررسی قرار میده
برای مثال به عکس زیر دقت بفرمائید
http://aryapdf.com/pic/images/tqybvsecyqdabkdoh6ez.gif

به معنی ساده تر کد ها و خط های اضافی که در css شما وجود داره اما جای استفاده نمیشه به شما معرفی میشه
برای مثال در این عکس گفته شده که 2.2 کیلوبایت از 10 کیلوبایت فعلی اضافی هستش و خط های اون هم گفته شده که میتونید پیگیری کنید و نتیجه اش رو ببینید


---------- Post added at 01:37 AM ---------- Previous post was at 01:27 AM ----------

Parallelize downloads across hostnames
برای موارد بالای 80 درصد نیاز نیستند
اما تحقیق میکنم و حتما همینجا کاراییشو میذارم

---------- Post added at 01:38 AM ---------- Previous post was at 01:37 AM ----------

کل سی اس اس ها رو بریز توی additional.css بقیه css ها رو کلاً پاک کن در وی بی . البته این کار اصلاً اصلاً درست نیست .

Parallelize downloads across hostnames
این مورد باید شما باز کنی ببینی کجا زده مثلا زده
images
برای این کار میرید یک ساب دامین میسازید بعد میرید در استایل ادرسو عوض میکنید که مثلا عکس های پوشه images از ادرس
www.xxx.yyy.com
خونده بشن کار سختی نیست در ویبی هم میشه انجام داد

ممنونم از پست تکمیلیتون

ببینید دوستان
شرمندم که مپرم وسط

شما می تونید توسط فایل .htaccess سئو ی خودتون رو با لود سریع تر بیارید بالا

یعنی چه کار کنیم؟

این کد رو که در زیر هست در فایل .htaccess هاست خودتون قرار بدید { در سی پنل قابل دیدن نیست با اف تی پی ببینید}

کد PHP:

---

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP 


---

یا اون فایلی رو که در لینک زیر هست دانلود کنید و در هاست خود قرار دهید!

http://up.iranblog.com/images/jklej7uvh4mz7nisx7ev.zip
این می تونه درصد قابل توجهی لود سایت رو بیاره بالا {سرعت بگیره} و رتبه رو هم افزایش بده!

مربوط به این گزینه Compress components with gzip

نقل قول:

---

نوشته اصلی توسط vbsupport

Parallelize downloads across hostnames
این مورد باید شما باز کنی ببینی کجا زده مثلا زده
images
برای این کار میرید یک ساب دامین میسازید بعد میرید در استایل ادرسو عوض میکنید که مثلا عکس های پوشه images از ادرس
www.xxx.yyy.com
خونده بشن کار سختی نیست در ویبی هم میشه انجام داد

---

با تشکر از مطالب مفید.
امکان داره این مورد رو بیشتر شرح بدید ؟
چه نیازی هست تا فرضا عکس ها و یا js ها در یک سابدامین باشن ؟

وقتی که تصاویر مثلا از ادرس دیگری جز ادرس اصلی بود بشن یا حتی فایل های جاوا اسکریپت بعث میشه لود بره بالا چون اونا دیگه توی لود خود ادرس اصلی تاثیر ندارن

سلام
واقعا عالی بود مرسی

اگر امکانش هست در مورد بهینه کردن گزینه Combine images using CSS sprites زیر مجموعه Page Speed یه توضیح یا آموزش بدید چون با سایتهایی که رنک بالایی دارن مقایسه کردم این گزینه روی A بود فکر کنم تاثییر زیادی داره.

نقل قول:

---

نوشته اصلی توسط 0060

سلام
واقعا عالی بود مرسی

اگر امکانش هست در مورد بهینه کردن گزینه Combine images using CSS sprites زیر مجموعه Page Speed یه توضیح یا آموزش بدید چون با سایتهایی که رنک بالایی دارن مقایسه کردم این گزینه روی A بود فکر کنم تاثییر زیادی داره.

---

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

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

عالی بود من که استفاده کردم برای سایتم ممنون
ولی جدیدا این سایت ، سایت رو با مرورگر فایرفاکس 9 بررسی میکنه که دقت بیشتری داره
من در بررسی قبلی به رتبه 97% رسیدم ولی الان روی 73% هستم
لطفا دوباره آموزش های مربوطه رو بفرمائید
ممنون