چگونه سرعت بارگذاری سایت را چند برابر کنیم؟

[Opera 36]

سلام به همه دوستان خودم

مهم نیست که حجم سایت شما چقدر باشه

مهم نیست سرعت اینترنت کاربر سایت شما کم باشه

مهم نیست که سایت شما از چه افکت های جاوااسکریپتی سنگینی استفاده کرده باشه

مهم نیست که چند تا عکس سنگین داشته باشید

مهم نیست که ...

مهم اینه که شما بتونید عناصر سایتتون رو بر اساس اولویت بارگذاری کنید که:

1)کاربر ببینه در عرض چند ثانیه سایت شما بالا اومد

2)مشکل به هم ریختگی عناصر سایت کم بشه(با لود شدن یه عکس همه چیز جابجا نشه)

3)اون بخش هایی که فعلا لازمشون نداریم لود نشن

مهم اینه که شما اطلاعات سایتتون رو با مدت زمان بالایی روی سیستم کاربران ساییتون ذخیره کنید که:

1)مرورگرنخواد اطلاعات تکراری رو هر بار بارگذاری کنه

2)به سرور شما فشار نیاد

3)پهنای باند سرور رو دخیره کنید

مهم اینه که شما فایل های جاوا اسکریپتتون رو دست کاری کنید که:

1)نخواد از سایت های مختلف لود بشه

2)نخواد با حجم بالاتری استفاده بشه(حجمشو کم کنید)

3) از یه جاوااسکریپت برای چند تا افزونه استفاده کنید

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

---

اولین و ساده ترین راه برای کاهش حجم صفحاتتون، فعال کردن Gzip هست

در سرور های لینوکسی این قابلیت وجود داره و شما کافیه اون رو جوملاتون استفاده کنید

برای این کار به تنظیمات کلی سایتتون برید(administrator/index.php?option=com_config...) و در سربرگ سوم عبارت GZIP Page Compression رو فعال کنید

میتونید با افزونه FireBug این موضوع رو به عینه ببیندی که چقدر حجم سایت کم میشه

نکته: حداقل 50KB از حجم سایتتون با این مورد کم میشه

---

خوب بریم سروقت موارد حرفه ای تر

اگر از VPS استفاده میکنید کافیه فایل php.ini و که واقع در /home/XXX /etc/php5 هست رو ویراش کنید

دنبال عبارت session.cache_limiter = nocache بگردید و اون رو به session.cache_limiter = public تبدیل کنید

خوب مورد بالا میگه که موارد ذخیره سازی رو از htaccess. بخون

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

       Header set Cache-Control "max-age=31104000"

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

اون عدد برای یک سال هست(حالا پیدا کنید پرتقال فروش رو!)

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

برای بار بعد به جای 60 ثانیه تو 10 ثانیه باز می شه و اشک شوق! تو چشماتون حلقه میزنه :shy:

[Opera 36]

شاید شما از چندین اسکریپت سنگین استفاده کرده باشید

اما لازمه همه اونها همون اول بارگذاری بشن؟

خوب معلومه که نه

اگر از چندین عکس حجیم استفاده کرده باشید هم همینطور

اول اون چیزهایی باید لود بشن که کاربر تا دید متوجه بشه این سایت برای چی هست و جکار میکنه

1) ترتیب اولویت به ماژول ها و پلاگین ها

2)ترتیب اولویت به فایل ها همانند عکس،جاوااسکریپت و ...

1)ترتیب اولویت به ماژول ها و پلاگین ها

شما میتونید در بخش مدیریت ماژول ها و یامدیریت پلاگین ها ترتیب اولویت اونها رو بر اساس اولویت بارگذاری سریع سایت خودتون تنظیم کنید

مثلا اگر با پلاگین Yoo Gallery یک گالری سنگین پایین سایتتون دست کردید این آخرین پلاگینی باشه که لود میشه

2)ترتیب اولویت به فایل ها

اسکریپت های زیادی هستند(JavaScript loader) که ترتیب بارگذاری سایت شما رو کنترل میکنند

یکی از اون ها head.js دو کیلوبایتی هست که این کار رو میکنه

توضیحات کاملش رو تو سایتش میتونید ببینید

مثلا اگر یک Background سنگین خوشگل داریدمیتونید به این وسیله بگید آخرین چیزی باشه که بارگذاری بشه

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

توصیه: یه خورده هوای دایال آپی ها رو داشته باشید(حدود5% از اینترنت دار ها ، ADSL دارند)

[Sir_Amin 21]

با سلام

دوست عزیز headjs رو نمیشه در جوملا استفاده کرد!

موفق باشید

[Opera 36]

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

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

یکی از مشکلاتی که برنامه نویسان جاوا اسکریپت و آژاکس با آن روبرو می باشند، Minify (کوچک نمودن یا خرد نمودن یا چلاندن) نمودن فایل های جاوا اسکریپت می باشد.

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

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

اما حذف نمودن این قسمت های اضافه کار بسیار پر دردسر و وقت گیری می باشد.

شرکت مایکروسافت به تازگی ابزاری را معرفی نموده است که به سادگی هر چه تمام تر و به بهترین شکل ممکن این عمل را برای ما انجام می دهد. قابل ذکر می باشد که خود تیم ASP.NET مایکروسافت نیز از این ابزار جهت کوچک ساختن فایل های جاوا اسکریپت و از جمله ASP.NET Ajax استفاده نموده اند و بنابراین عملکرد درست این ابزار، تضمین شده می باشد.

نام این ابزار کوچک Microsoft Ajax Minifier می باشد. و از این آدرس قابل دریافت می باشد.

آغاز:

پس از نصب ابزار مورد نظر، از دو طریق می توانید از آن استفاده نمایید.

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

از طریق ویژوال استودیو (نیاز به تغییراتی در فایل پروژه برنامه وب دارد)

قبل از اینکه به معرفی روش استفاده از این ابزار بپردازم، باید ذکر کنم که این ابزار می تواند با دو روش مختلف به کوچک ساختن فایل جاوا اسکریپت بپردازد

normal crunching

hypercrunching

روش normal crunching:

با استفاده از این روش، تمامی کامنت ها، فضاهای خالی غیر ضروری، علامت ها براکت غیر ضروری و علامت های سمی کولون ( حذف می شوند و در نتیجه اندازه و حجم فایل جاوا اسکریپت به میزان قابل توجهی کاهش می یابد.

روش hypercrunching:

با استفاده از این روش،علاوه بر مواردی که در روش قبل ذکر شد، اعمال دیگری نیز جهت کم نمودن اندازه فایل جاوا اسکریپت انجام می شود. در این روش، طول نام متغیر های جاوا اسکرپت (متغیر های Local ی که در داخل توابع تعریف شده اند و نه متغیرهای Global) نیز کوتاه خواهند شد و ضمنا قسمت هایی از کد که اصطلاحا unreachable هستند نیز حذف می شوند.

نحوه استفاده:

پس از نصب این ابزار، Shortcut های مربوطه در Start Menu نمایش داده خواهند شد.

Microsoft Ajax Minifier Command Prompt را اجرا نمایید و از طریق Command Propmt به دایکتوری که فایل جاوا اسکریپت در آن قرار دارد، بروید.

با اجرای دستور زیر می توانیم فایل جاوا اسکریپت خود را با روش normal crunching کوچک نماییم.

ajaxmin inputfile.js –o outputfile.js

بدیهی می باشد که در دستور بالا فرض بر این می باشد که نام فایل جاوا اسکریپت ما inpufile.js بوده و فایل جدید تولید شده به نام outputfile.js می باشد.

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

ajaxmin -hc inputfile.js –o outputfile.js

کار تمام است و اکنون می توانید فایل جدید تولید شده را بررسی نموده و تغییرات را ملاحظه نمایید.

تذکر:

در تجربه ای شخصی ملاحظه نمودم که اگر نام فایل جاوا اسکریپت، شامل کاراکتر های ویژه مانند علامت خط تیره (-) باشد (به طور مثال MyExample-First.js)، این ابزار گاهی دچار مشکل می شود و بنابراین کافیست که قبل از انجام عمل کوچک سازی، نام فایل را تغییر دهید و پس از انجام این عمل، آن را به شکل سابق باز گردانید.

---

یکی از امکانات آنلاینی که می توان از اونه بهره جست، CompressorRater است

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

JSMin یک فشرده ساز قدیمی که چند سال پیش توسط داگلاس Crockford نوشته شده است

Dojo shrinksafe یک فشرده سازه محبوب بر اساس فشرده ساز parses و استفادهاز کتابخانه های rhino و crunches

Packer فشرده سازی که توسط Dean Edwards تولید شده و فراتر از اصول فشرده سازی کار میکند

the YUI Compressor فشرده ساز جدیدی که توسط Julien Lecomte نوشته شده و ادغامی از فشرده سازهای قدیمی و برا اساس کتابخانه rhino پایه گذاری شده

نکته: برای کدهاتون همه این موارد رو تست کنید و ببینید کدوم یکی بهتر جواب میده

به عنوان مثال:

mootools 1.2.3 با روش YUI Compressor 2.4.2 ازحجم 100240b به 19689b که 19.6% حجم اولیست تغییر پیدا کرده

یا

jQuery 1.3.2 با روش YUI Compressor 2.4.2 از حجم 120763b به 18657b که15.4% حجم اولیست تغییر پیدا کرده

شما هم یه امتحانکی کنید بد نیست

http://compressorrater.thruhere.net

[ebadollahi 0]

شاید شما از چندین اسکریپت سنگین استفاده کرده باشید

اما لازمه همه اونها همون اول بارگذاری بشن؟

خوب معلومه که نه

اگر از چندین عکس حجیم استفاده کرده باشید هم همینطور

اول اون چیزهایی باید لود بشن که کاربر تا دید متوجه بشه این سایت برای چی هست و جکار میکنه

1) ترتیب اولویت به ماژول ها و پلاگین ها

2)ترتیب اولویت به فایل ها همانند عکس،جاوااسکریپت و ...

1)ترتیب اولویت به ماژول ها و پلاگین ها

شما میتونید در بخش مدیریت ماژول ها و یامدیریت پلاگین ها ترتیب اولویت اونها رو بر اساس اولویت بارگذاری سریع سایت خودتون تنظیم کنید

مثلا اگر با پلاگین Yoo Gallery یک گالری سنگین پایین سایتتون دست کردید این آخرین پلاگینی باشه که لود میشه

2)ترتیب اولویت به فایل ها

اسکریپت های زیادی هستند(JavaScript loader) که ترتیب بارگذاری سایت شما رو کنترل میکنند

یکی از اون ها head.js دو کیلوبایتی هست که این کار رو میکنه

توضیحات کاملش رو تو سایتش میتونید ببینید

مثلا اگر یک Background سنگین خوشگل داریدمیتونید به این وسیله بگید آخرین چیزی باشه که بارگذاری بشه

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

توصیه: یه خورده هوای دایال آپی ها رو داشته باشید(حدود5% از اینترنت دار ها ، ADSL دارند)

ببخشید در کجای بخش مدیریت ماژولها ما می تونیم ترتیب لود شدن اونها رو تنظیم کنیم؟ ممنون

[radnet 0]

منم همین سوال رو دارم

لطفا کسی جواب این آقای عبداللهی رو بده دیگه... :dodgy:

[Sir_Amin 21]

با سلام

در قسمت مدیریت ماژول ها رویروی هر ماژول اعدادی وجود دارند که ترتیب اود شدن ماژولها رو در اون موقعیت نشون میدن که شما براحتی میتونید اعداد رو تغییر و دکمه ذخیره بالای اون ستون اعداد رو بزنید ویا هر ماژول رو باز و ترتیب اجرا رو بعد از نام و.... ماژول تعیین کنید.

موفق باشید

[sajad dp 1]

اسکریپت های زیادی هستند(JavaScript loader) که ترتیب بارگذاری سایت شما رو کنترل میکنند یکی از اون ها head.js دو کیلوبایتی هست که این کار رو میکنه توضیحات کاملش رو تو سایتش میتونید ببینید

من این تکه رو نمیفهمم

فایلی رو که داخل اون صفحه هست رو دانلود کردم حالا چه کارش کنم؟

[Sir_Amin 21]

دوست عزیز امکان استفاده این اسکریپتها متنند Head.js در جوملا وجود نداره.

موفق باشید

[mahdikp 2]

---

اولین و ساده ترین راه برای کاهش حجم صفحاتتون، فعال کردن Gzip هست

در سرور های لینوکسی این قابلیت وجود داره و شما کافیه اون رو جوملاتون استفاده کنید

برای این کار به تنظیمات کلی سایتتون برید(administrator/index.php?option=com_config...) و در سربرگ سوم عبارت GZIP Page Compression رو فعال کنید

میتونید با افزونه FireBug این موضوع رو به عینه ببیندی که چقدر حجم سایت کم میشه

نکته: حداقل 50KB از حجم سایتتون با این مورد کم میشه:Dhy:

سلام دوست عزیز

ببخشید اگر gzip رو فعال کنیم محدودیتی در کارها به وجود نمی آید و هیچ مشکلی به وجود نمی آورد؟(مثلا از لحاظ امنیتی یا ...)

[فرحزادیان 947]

با سلام

خیر

پیروز باشید

[sajad dp 1]

نه،فقط سرعت لودتون بیشتر میشه!

[Opera 36]

سلام مجدد به همه دوستان

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

خوب باید چکار کنیم که سرعت لود صفحات ما بالا بره

در جوملا، صفحات داینامیک خروجی هایی رو تولید میکنند و به صورت صفحات ثابت دیده میشه

آیا همیشه لازمه که یه صفحه ثابت تولید بشه؟ یا بهتره که این صفحه ثابت تولید شده، به صورت یک فایل ثابت برای هر کاربر نمایش داده بشه تا اینکه فراخوانی و تولید بشه

این موردی که امروز میخوام عرض کنم خدمتتون، بارگذاری صفحات رو نسبت به قبل، بیش از 80 درصد سریع تر میکنه

Apache Mod_Expires

قبلا در مورد htaccess. گفته بودم

این مورد هم شبیه به اونه اما با این تفاوت که در اون مورد در فایل php.ini باید ession.cache_limiter = nocache و session.cache_limiter = public باشه

این مورد رو به htaccess. سایتتون که در ریشه اصلی سایت هست اضافه کنید

########## Begin Enable Caching ##########
#
# enable expirations
ExpiresActive On
# expire images after a month in the website visitor cache
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
# expire stylesheets and javascript after 1 week in the website visitor cache
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
# expire flash and XML 1 month and 1 week respectively in the website visitor cache
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/xml "access plus 1 week"
#
########## End Enable Caching ##########

اگر نبود، فایل htaccess.txt رو به htaccess. تبدیل کنید

ضمنا سرعت و کارآیی سایت خودتون رو در دو سایت زیر تست کنید(قبل و بعد از عمل)

http://www.webpagetest.org

http://gtmetrix.com/analyze.html

[ashil7 0]

سلام به همه دوستان خودم

مهم نیست که حجم سایت شما چقدر باشه

مهم نیست سرعت اینترنت کاربر سایت شما کم باشه....

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

برای بار بعد به جای 60 ثانیه تو 10 ثانیه باز می شه و اشک شوق! تو چشماتون حلقه میزنه :shy:

 

 

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

ویرایش شده آبان 94 توسط ashil7