FIREBOY
24th March 2009, 08:49 PM
http://www.gheseh.ir/images/web.png (http://www.gheseh.ir/)
ممکن است شما که این مطلب را می خوانید سایتی برای خود داشته باشید. این وب سایت یا حتی وبلاگ ممکن شخصی باشد و یا هر موضوع دیگری داشته باشد. احتمالا یا به صورت دستی و صفحات ایستا (Static) طراحی شده است و شاید هم از یک سیستم مدیریت محتوی تحت وب استفاده می کند. سایت یا وبلاگ ممکن است از چندین نفر یا حتی چند صد نفر و یا گاهی بیشتر ، هزاران بازدید کننده دارد. یکی از مهم ترین نکاتی که بازدید کنندگان به آن توجه بسیار ویژه ای دارند سرعت بارگزاری صفحات است. این یک سایت با چه سرعتی باز شود بسیار مهم است، بیشتر کاربران تنها چند ثانیه صبر می کنند و اگر ببینند که بارگزاری سایت بسیار کند انجام می شود در بیشتر مواقع از دیدن آن سایت منصرف شده و صفحه مرورگر خود را خواهند بست. یکی از راه هایی که به یک مدیر سایت کمک می کند تا بازدید کننده بیشتری را جذب کرده و با سرعت بارگذاری بالا وب سایت خود را پربیننده نماید بهینه سازی صفحات و تصاویر و به طور کلی وب سایت مورد نظر است. قصد دارم ۶ راه بسیار ساده که می تواند سرعت یک وب سایت را تا حد زیادی افزایش دهد را به مدیران و طراحان سایت معرفی کنم. انجام این کارها شاید به نظر بسیار مبتدیانه برسد اما مطمئنا در سرعت گشودن یک صفحه وب بسیار مفید خواهد بود.
۱- بهبنه سازی تصاویر :
اولین بخشی که در یک سایت اهمیت بسیار بالایی داشته و هم کاربران و هم مدیران به آن توجه زیادی دارند تصاویر آن سایت به شمار می رود. این که از چه نرم افزاری برای ویرایش و بهینه سازی تصاویر برای بارگزاری بهتر سایت استفاده شود اهمیت زیادی دارد. به جای این که یه عکس با کیفیتی فوق العاده و با حجم و اندازه ای بسیار بالا در همان صفحه اول قرار گیرد ، عکسی کوچکتر با حجمی کمتر و با کیفیتی مناسب قرار گرفته شده و تنها لینک آن عکس قرار گیرد. به این ترتیب هم لود شدن تصاویر سریعتر صورت می گیرد و همین که کاربر به دلخواه بر روی تصاویر مورد نظر کلیک خواهد کرد. طراحان و یا مدیران وب سایت ها اگر استفاده از نرم افزارهای بهینه سازی را مناسب نمی دانند این وب سایت (http://tools.dynamicdrive.com/imageoptimizer/)می تواند به صورت آنلاین تصاویر را بهینه کرده و حتی فرمت آن ها را در صورت دلخواه تغییر دهد.
۲- فرمت تصاویر موجود در وب سایت :
این مشخصه هم مانند قسمت اول اهمیت زیادی دارد. معمولا در یک سایت و یا حتی در یک صفحه وب عکس هایی که به کار می روند فرمت های متعددی دارند. اکثر عکس ها در سه فرمت JPG ، GIF ، PNG در محاصره هستند. اگر بخواهیم نوع کارآیی این فرمت ها را مشخص کنیم به این ترتیب خواهند بود که JPG فرمتی است که برای تصاویر با کیفیت بالا با تعداد رنگ های زیاد مورد استفاده قرار می گیرد تقریبا بیشتر برای عکس هایی که با دوربین های دیجیتالی گرفته شده و یا این که طراح قصدش از انتخاب این فرمت و تصاویر به طور کلی نمایش تصاویر است تا وب سایت . فرمت GIF بیشتر در قالب لوگوها و یا دکمه هایی که به صورت عکس یافت می شوند ظاهر می شود. مطمئنا تعداد رنگ هایی که در این فرمت استفاده می شوند از فرمت JPG بسیار کمتر است و شفافیت تصاویر با فرمت JPG را هم ندارند . شاید به نظر برسد که این یک مشکل است اما بالعکس بسیار مناسب است زیرا تصاویری که در قالب لوگو قرار داده می شوند مطمئنا اندازه ای متوسط و در اکثر اوقات اندازه ای کوچک دارند. عاقلانه است که در چنین مواردی از GIF استفاده کنیم چون بینده نیازی به کیفیت بسیار بالا ندارد و اصلا این افت کیفیت به چشم نخواهد آمد.PNG هم بسیار شبیه به GIF است تنها تفاوتش را می توان در پشتیبانی از رنگ های بیشتر خلاصه نمود. زمانی از PNG استفاده می شود که قابلیت های GIF لازم باشد با تعداد رنگ های بیش از ۲۵۶ . زیرا GIF تنها ۲۵۶ رنگ را پشتیبانی خواهد کرد.
۳- بهینه سازی کدهای CSS:
امروزه تمامی فرمت های اصلی یه صفحه وب بر پایه کدهای CSS پیاده سازی می شود . شاید به نظرتون مسخره برسد اما با همین کار ساده یعنی پاکسازی فضاهای خالی درون یک صفحه نوشته شده با CSS سرعت بارگزاری را تا حد زیادی می توان افزایش داد. بهتر است این طور گفته شود که تعداد خطوط را کاهش دهیم . برای نمونه به مثال های زیر توجه کنید:
کد اول :
;margin-top: ۱۰px
;margin-right: ۲۰px
;margin-bottom: ۱۰px
;margin-left: ۲۰px
که می توان به این صورت نوشت :
;margin: ۱۰px ۲۰px ۱۰px ۲۰px
یا:
<p class=”decorated”>A paragraph of decorated text</p>
<p class=”decorated”>Second paragraph</p>
<p class=”decorated”>Third paragraph</p>
<p class=”decorated”>Forth paragraph</p>
که به شکل زیر نوشته شود :
<div class=”decorated”>
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>
همین موارد ساده هم بسیار مهم است . چون تاثیرات زیادی خواهد داشت.
۴- استفاده از Slash در آخر آدرس ها :
حتما فکر کردید مگر این کار کوچک هم تاثیری دارد ؟ بله همین علامت ساده تاثیر بسیار زیادی دارد. زمانی که شما آدرسی شبیه به “http://www.domain.com/about” را در وب سایت خود قرار می دهید با درخواست کاربر از این آدرس سرور میزبان شما به دنبال این صفحه خواهد بود اما با جست و جوی این آدرس به دنبال محتویات همین آدرس هم می گردد و همین عامل باعث ساختن Temp های زیادی در سرور شده و به طبع باعث افت سرعت بارگزاری می شود. اما اگر در به جای آدرس بالا این آدرس ” /http://www.domain.com/about” را استفاده نمائید سرور مطمئن خواهد شد تنها به دنبال همین صفحه خواهید بود و در نتیجه سرعت تا حد زیادی افزایش پیدا خواهد کرد . اگر به سیستم های مدیریت محتوی و آدرس هایی که د آن ها تعریف می شوند دقت کنید حتما به این مورد اشاره شده و در آدرس ها هم نمایان است.
۵- گذاشتن مشخصات اولیه برای تصاویر :
این مورد باز هم در مورد تصاویر است اما با این تفاوت که کدهای موجود در رابطه با تصاویر را مورد بررسی قرار می دهد. زمانی که طراح یک تصویر را به صورت معمولی در سایتی تعریف کرده و کدآن را می نویسد در زمان اجرا و درخواست کاربر مرورگر به دنبال مشخصات تصویر و در خواست مشخصات از سرور خواهد بود و همین امر باعث کند شدن سرعت خواهد شد اما اگر برای مثال برای تصاویر کدی مانند مورد زیر نوشته شود دیگر مرورگر به دنبال مشخصات نبوده و به سادگی از داخل کدهای تعریف شده آن چه را در مورد یک تصویر لازم دارد خواهد یافت.
<img id=”moon” height=”۲۰۰″ width=”۴۵۰″ src=”http://www.domain.com/moon.png” alt=”moon image” />
به همین سادگی مروگر منظور شما را خواهد دانست و ابعاد و کلیه مشخصاتی که باید برای کاربر نمایش دهد را پیدا خواهد کرد.
۶- کم کردن درخواست های پرتوکل HTTP :
مطمئنا زمانی که سایتی دیده می شود حاصل چرخه ای است که انجام می گیرد. ابتدا کاربر درخواست داده و طی انجام مراحلی سرور به درخواست پاسخ می دهد. این درخواست ها می توانند شامل تصاویر ، اسکریپ ها و یا هر مورد دیگری باشند. با انجام کارهایی ساده می توان این چرخه را سریعتر پاسخگویی کرد. به این صوت که تا جایی که می شود هرآنچه که به صورت Object ار قبیل تصاویر ، لینک ها ، و … وجود دارد و از آن استفاده نمی شود را کاهش داده و حتی تصاویر را هم تا جایی که می شود یکی کنیم . دو تصویر را در قالب یک تصویر ارائه دهیم. مرحله بعدی تا حدودی مربوط به کدهای CSS می شود در Header کد HTML به جای چند خط تعریف استایل های به کار رفته در قسمت های مختلف ازیک استایل استفاده کنیم که همه آن ها را در بر گیرد. برای نمونه به مثال زیر توجه کنید :
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
که بهتر این طورنوشته شود :
<link rel=”stylesheet” type=”text/css” href=”/style.css” />
این ۶ مورد موارد بسیار ساده ای بود که تا حد زیادی می تواند به افزایش سرعت بارگزاری کمک نماید.
Posted via Mobile Device
ممکن است شما که این مطلب را می خوانید سایتی برای خود داشته باشید. این وب سایت یا حتی وبلاگ ممکن شخصی باشد و یا هر موضوع دیگری داشته باشد. احتمالا یا به صورت دستی و صفحات ایستا (Static) طراحی شده است و شاید هم از یک سیستم مدیریت محتوی تحت وب استفاده می کند. سایت یا وبلاگ ممکن است از چندین نفر یا حتی چند صد نفر و یا گاهی بیشتر ، هزاران بازدید کننده دارد. یکی از مهم ترین نکاتی که بازدید کنندگان به آن توجه بسیار ویژه ای دارند سرعت بارگزاری صفحات است. این یک سایت با چه سرعتی باز شود بسیار مهم است، بیشتر کاربران تنها چند ثانیه صبر می کنند و اگر ببینند که بارگزاری سایت بسیار کند انجام می شود در بیشتر مواقع از دیدن آن سایت منصرف شده و صفحه مرورگر خود را خواهند بست. یکی از راه هایی که به یک مدیر سایت کمک می کند تا بازدید کننده بیشتری را جذب کرده و با سرعت بارگذاری بالا وب سایت خود را پربیننده نماید بهینه سازی صفحات و تصاویر و به طور کلی وب سایت مورد نظر است. قصد دارم ۶ راه بسیار ساده که می تواند سرعت یک وب سایت را تا حد زیادی افزایش دهد را به مدیران و طراحان سایت معرفی کنم. انجام این کارها شاید به نظر بسیار مبتدیانه برسد اما مطمئنا در سرعت گشودن یک صفحه وب بسیار مفید خواهد بود.
۱- بهبنه سازی تصاویر :
اولین بخشی که در یک سایت اهمیت بسیار بالایی داشته و هم کاربران و هم مدیران به آن توجه زیادی دارند تصاویر آن سایت به شمار می رود. این که از چه نرم افزاری برای ویرایش و بهینه سازی تصاویر برای بارگزاری بهتر سایت استفاده شود اهمیت زیادی دارد. به جای این که یه عکس با کیفیتی فوق العاده و با حجم و اندازه ای بسیار بالا در همان صفحه اول قرار گیرد ، عکسی کوچکتر با حجمی کمتر و با کیفیتی مناسب قرار گرفته شده و تنها لینک آن عکس قرار گیرد. به این ترتیب هم لود شدن تصاویر سریعتر صورت می گیرد و همین که کاربر به دلخواه بر روی تصاویر مورد نظر کلیک خواهد کرد. طراحان و یا مدیران وب سایت ها اگر استفاده از نرم افزارهای بهینه سازی را مناسب نمی دانند این وب سایت (http://tools.dynamicdrive.com/imageoptimizer/)می تواند به صورت آنلاین تصاویر را بهینه کرده و حتی فرمت آن ها را در صورت دلخواه تغییر دهد.
۲- فرمت تصاویر موجود در وب سایت :
این مشخصه هم مانند قسمت اول اهمیت زیادی دارد. معمولا در یک سایت و یا حتی در یک صفحه وب عکس هایی که به کار می روند فرمت های متعددی دارند. اکثر عکس ها در سه فرمت JPG ، GIF ، PNG در محاصره هستند. اگر بخواهیم نوع کارآیی این فرمت ها را مشخص کنیم به این ترتیب خواهند بود که JPG فرمتی است که برای تصاویر با کیفیت بالا با تعداد رنگ های زیاد مورد استفاده قرار می گیرد تقریبا بیشتر برای عکس هایی که با دوربین های دیجیتالی گرفته شده و یا این که طراح قصدش از انتخاب این فرمت و تصاویر به طور کلی نمایش تصاویر است تا وب سایت . فرمت GIF بیشتر در قالب لوگوها و یا دکمه هایی که به صورت عکس یافت می شوند ظاهر می شود. مطمئنا تعداد رنگ هایی که در این فرمت استفاده می شوند از فرمت JPG بسیار کمتر است و شفافیت تصاویر با فرمت JPG را هم ندارند . شاید به نظر برسد که این یک مشکل است اما بالعکس بسیار مناسب است زیرا تصاویری که در قالب لوگو قرار داده می شوند مطمئنا اندازه ای متوسط و در اکثر اوقات اندازه ای کوچک دارند. عاقلانه است که در چنین مواردی از GIF استفاده کنیم چون بینده نیازی به کیفیت بسیار بالا ندارد و اصلا این افت کیفیت به چشم نخواهد آمد.PNG هم بسیار شبیه به GIF است تنها تفاوتش را می توان در پشتیبانی از رنگ های بیشتر خلاصه نمود. زمانی از PNG استفاده می شود که قابلیت های GIF لازم باشد با تعداد رنگ های بیش از ۲۵۶ . زیرا GIF تنها ۲۵۶ رنگ را پشتیبانی خواهد کرد.
۳- بهینه سازی کدهای CSS:
امروزه تمامی فرمت های اصلی یه صفحه وب بر پایه کدهای CSS پیاده سازی می شود . شاید به نظرتون مسخره برسد اما با همین کار ساده یعنی پاکسازی فضاهای خالی درون یک صفحه نوشته شده با CSS سرعت بارگزاری را تا حد زیادی می توان افزایش داد. بهتر است این طور گفته شود که تعداد خطوط را کاهش دهیم . برای نمونه به مثال های زیر توجه کنید:
کد اول :
;margin-top: ۱۰px
;margin-right: ۲۰px
;margin-bottom: ۱۰px
;margin-left: ۲۰px
که می توان به این صورت نوشت :
;margin: ۱۰px ۲۰px ۱۰px ۲۰px
یا:
<p class=”decorated”>A paragraph of decorated text</p>
<p class=”decorated”>Second paragraph</p>
<p class=”decorated”>Third paragraph</p>
<p class=”decorated”>Forth paragraph</p>
که به شکل زیر نوشته شود :
<div class=”decorated”>
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>
همین موارد ساده هم بسیار مهم است . چون تاثیرات زیادی خواهد داشت.
۴- استفاده از Slash در آخر آدرس ها :
حتما فکر کردید مگر این کار کوچک هم تاثیری دارد ؟ بله همین علامت ساده تاثیر بسیار زیادی دارد. زمانی که شما آدرسی شبیه به “http://www.domain.com/about” را در وب سایت خود قرار می دهید با درخواست کاربر از این آدرس سرور میزبان شما به دنبال این صفحه خواهد بود اما با جست و جوی این آدرس به دنبال محتویات همین آدرس هم می گردد و همین عامل باعث ساختن Temp های زیادی در سرور شده و به طبع باعث افت سرعت بارگزاری می شود. اما اگر در به جای آدرس بالا این آدرس ” /http://www.domain.com/about” را استفاده نمائید سرور مطمئن خواهد شد تنها به دنبال همین صفحه خواهید بود و در نتیجه سرعت تا حد زیادی افزایش پیدا خواهد کرد . اگر به سیستم های مدیریت محتوی و آدرس هایی که د آن ها تعریف می شوند دقت کنید حتما به این مورد اشاره شده و در آدرس ها هم نمایان است.
۵- گذاشتن مشخصات اولیه برای تصاویر :
این مورد باز هم در مورد تصاویر است اما با این تفاوت که کدهای موجود در رابطه با تصاویر را مورد بررسی قرار می دهد. زمانی که طراح یک تصویر را به صورت معمولی در سایتی تعریف کرده و کدآن را می نویسد در زمان اجرا و درخواست کاربر مرورگر به دنبال مشخصات تصویر و در خواست مشخصات از سرور خواهد بود و همین امر باعث کند شدن سرعت خواهد شد اما اگر برای مثال برای تصاویر کدی مانند مورد زیر نوشته شود دیگر مرورگر به دنبال مشخصات نبوده و به سادگی از داخل کدهای تعریف شده آن چه را در مورد یک تصویر لازم دارد خواهد یافت.
<img id=”moon” height=”۲۰۰″ width=”۴۵۰″ src=”http://www.domain.com/moon.png” alt=”moon image” />
به همین سادگی مروگر منظور شما را خواهد دانست و ابعاد و کلیه مشخصاتی که باید برای کاربر نمایش دهد را پیدا خواهد کرد.
۶- کم کردن درخواست های پرتوکل HTTP :
مطمئنا زمانی که سایتی دیده می شود حاصل چرخه ای است که انجام می گیرد. ابتدا کاربر درخواست داده و طی انجام مراحلی سرور به درخواست پاسخ می دهد. این درخواست ها می توانند شامل تصاویر ، اسکریپ ها و یا هر مورد دیگری باشند. با انجام کارهایی ساده می توان این چرخه را سریعتر پاسخگویی کرد. به این صوت که تا جایی که می شود هرآنچه که به صورت Object ار قبیل تصاویر ، لینک ها ، و … وجود دارد و از آن استفاده نمی شود را کاهش داده و حتی تصاویر را هم تا جایی که می شود یکی کنیم . دو تصویر را در قالب یک تصویر ارائه دهیم. مرحله بعدی تا حدودی مربوط به کدهای CSS می شود در Header کد HTML به جای چند خط تعریف استایل های به کار رفته در قسمت های مختلف ازیک استایل استفاده کنیم که همه آن ها را در بر گیرد. برای نمونه به مثال زیر توجه کنید :
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
که بهتر این طورنوشته شود :
<link rel=”stylesheet” type=”text/css” href=”/style.css” />
این ۶ مورد موارد بسیار ساده ای بود که تا حد زیادی می تواند به افزایش سرعت بارگزاری کمک نماید.
Posted via Mobile Device