ده نکته برای افزایش سرعت بارگزاری صفحات وب

در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا” کاربران از مشاهده آن صفحه صرف نظر می‌کنند و دیگر به آن باز نمی‌گردند این به معنی از دست دادن کاربران سایت می‌باشد که برای مدیران یک سایت اصلا” خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان می‌شود.

 1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table

CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:

 مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
 جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
 عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا” با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
 بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
 تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
 با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا” کاربران سایت شما را خوشحال خواهد کرد.

 برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog استفاده کنید.

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

در اینجا نیز 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 سایت A List Apart را مطالعه کنید.

 3. فراخوانی تصاویر تزیینی بوسیله CSS

با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر ۲۰۰×۲۰۰ را می‌توان بصورت زیر نمایش داد:

کد HTML

.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}

کد CSS

در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش می‌دهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری می‌کنند. با استفاده از این تکنیک متن درون صفحه فورا” به نمایش درآمده و کاربر می‌تواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری می‌شوند.

در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا” می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.

در اینجا spacer.gif یک تصویر ۱×۱ پیکسل شفاف (transparent) است که ۵۰ بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری می‌شود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری می‌شود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب می‌باشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمی‌باشند.

 4. استفاده از انتخاب کننده‌های (selectors) مناسب

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

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

.text {
color: #03c;
font-size: 2em
}

به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ