آبجی
15th February 2010, 12:02 AM
افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب میباشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا” کاربران از مشاهده آن صفحه صرف نظر میکنند و دیگر به آن باز نمیگردند این به معنی از دست دادن کاربران سایت میباشد که برای مدیران یک سایت اصلا” خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان میشود.
۱٫ استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری میشوند:
مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور میکنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
جداول (Tables) در یک مرحله بر روی صفحه به نمایش در میآیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمیشوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا” با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت میپذیرد.
بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) میشود. اما قالبهای ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار میشوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی میتوان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا” کاربران سایت شما را خوشحال خواهد کرد.
۲٫ از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:
a:link, a:visited, a:active {
width: 7em;
font: bold 0.8em Georgia;
text-decoration: none;
display: block;
margin-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-left: 1px solid #6cf;
border-bottom: 1px solid #068;
border-right: 1px solid #068;
padding: 0.25em 0.5em 0.4em 0.75em;
border-top: 1px solid #6cf;
} a:hover {
background: #28b;
padding: 0.35em 0.35em 0.25em 0.9em;
border-top: #069;
border-right: #6cf;
border-bottom: #6cf;
border-left: #069;
}
با استفاده از این کد میتوانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین میرود.
۳٫ فراخوانی تصاویر تزیینی بوسیله CSS
با CSS میتوان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر ۲۰۰×۲۰۰ را میتوان بصورت زیر نمایش داد:
<div class=”pretty-image”></div>
کد HTML
.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}
کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش میدهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری میکنند. با استفاده از این تکنیک متن درون صفحه فورا” به نمایش درآمده و کاربر میتواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری میشوند.
در این روش نمیتوان از خصوصیت ALT استفاده نمود اگر واقعا” میخواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.
<img src=”spacer.gif” class=”pretty-image” alt=”description” />
در اینجا spacer.gif یک تصویر ۱×۱ پیکسل شفاف (transparent) است که ۵۰ بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری میشود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری میشود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب میباشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمیباشند.
۱٫ استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری میشوند:
مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور میکنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
جداول (Tables) در یک مرحله بر روی صفحه به نمایش در میآیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمیشوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا” با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت میپذیرد.
بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) میشود. اما قالبهای ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار میشوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی میتوان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا” کاربران سایت شما را خوشحال خواهد کرد.
۲٫ از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:
a:link, a:visited, a:active {
width: 7em;
font: bold 0.8em Georgia;
text-decoration: none;
display: block;
margin-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-left: 1px solid #6cf;
border-bottom: 1px solid #068;
border-right: 1px solid #068;
padding: 0.25em 0.5em 0.4em 0.75em;
border-top: 1px solid #6cf;
} a:hover {
background: #28b;
padding: 0.35em 0.35em 0.25em 0.9em;
border-top: #069;
border-right: #6cf;
border-bottom: #6cf;
border-left: #069;
}
با استفاده از این کد میتوانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین میرود.
۳٫ فراخوانی تصاویر تزیینی بوسیله CSS
با CSS میتوان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر ۲۰۰×۲۰۰ را میتوان بصورت زیر نمایش داد:
<div class=”pretty-image”></div>
کد HTML
.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}
کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش میدهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری میکنند. با استفاده از این تکنیک متن درون صفحه فورا” به نمایش درآمده و کاربر میتواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری میشوند.
در این روش نمیتوان از خصوصیت ALT استفاده نمود اگر واقعا” میخواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.
<img src=”spacer.gif” class=”pretty-image” alt=”description” />
در اینجا spacer.gif یک تصویر ۱×۱ پیکسل شفاف (transparent) است که ۵۰ بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری میشود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری میشود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب میباشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمیباشند.