ده نکته
برای افزایش سرعت بارگزاری صفحات وب
افزایش سرعت
بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب میباشد.
در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد،
معمولا" کاربران از مشاهده آن صفحه صرف نظر میکنند و دیگر به آن
باز نمیگردند این به معنی از دست دادن کاربران سایت میباشد
که برای مدیران یک سایت اصلا" خوشایند نیست.
در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان
میشود.
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 Part را مطالعه کنید .
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS میتوان تصاویر را بصورت قسمتی
از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را میتوان بصورت زیر نمایش
داد:
<div class="pretty-image"></div>
کد HTML
.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}
کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این
کار سرعت بارگذاری و نمایش صفحات را افزایش میدهد. بطور
کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری
میکنند. با استفاده از این تکنیک متن درون صفحه فورا" به
نمایش درآمده و کاربر میتواند آن را مشاهده و در بین آن گردش
کند و در همین هنگام تصاویر با حجم زیاد بارگذاری میشوند.
در این روش نمیتوان از خصوصیت ALT استفاده نمود اگر واقعا" میخواهید
که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.
<image src="spacer.gif"
class="pretty-image" alt="description" />
در اینجا spacer.gif یک تصویر 1x1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای
اصلی بارگذاری میشود و بعد از آن تصویر بزرگ و حجیم
همراه با خصوصیت ALT بطور
کامل بارگذاری میشود. دقت داشته باشید که این روش برای
نمایش تصاویر تزئینی مناسب میباشد نه برای
تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر
(یا متن مربوط به ALT) نمیباشند.
4. استفاده از انتخاب کنندههای (selectors) مناسب
به کد نامناسب زیر توجه کنید:
<p class="text">This is a sentence</p>
<p
class="text">This is another
sentence</p>
<p
class="text">This is yet another
sentence</p>
<p
class="text">This is one more
sentence</p>
.text {
color: #03c;
font-size: 2em
}
به جای اختصاص دادن مقدار به هر پاراگراف، میتوان همه را در یک
تگ <div> قرار داده و
مقدار را به آن اختصاص دهیم:
<div class="text">
<p>This is a
sentence</p>
<p>This is another sentence</p>
<p>This is yet
another sentence</p>
<p>This is one more sentence</p>
</div>
.text p {
color: #03c;
font-size: 2em
}
در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما
اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به
راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه
کرده باشید که مقادیر مربوط به رنگها کوتاهتر از حالت عادی
است. 03c# کوتاه شده مقدار
0033cc# است شما میتوانید از این
روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار
دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده میکنید:
font: 1em/1.5em bold italic
serif
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
Font
border: 1px black solid
border-width: 1px;
border-color: black;
border-style: solid
Border
background: #fff
url(image.gif) no-repeat
top left
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Background
margin: 2px 1px 3px 4px (top,
right, bottom, left)
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px
Margin
margin: 5em 1em 3em (top,
left and right, bottom)
margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em
Margin
margin: 5% 1% (top and
bottom, left and right)
margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%
Margin
این قوانین بطور عملی برای border و padding نیز قابل استفاده است.
6. استفاده از فراخوانی نسبی
سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا
فضای بیشتری را اشغال میکند و تغییر دادن
آنها در آینده مشکل است. یک مثال از فراخوانی مطلق بصورت زیر
است: <a href="http://www.URL.com/filename.htm"> که بهتر است به این صورت باشد: <a href="filename.htm">. اما اگر فایلها در فهرستهای
مختلف باشند از خلاصه نویسیهای زیر استفاده کنید:
·
<a
href="/filename.html">: فراخوانی http://www.URL.com/filename.html
·
<a
href="/directory/filename.html">: فراخوانی http://www.URL.com/directory/filename.html
·
<a
href="./">: فراخوانی index.html در فهرست جاری
·
<a
href="../">: فراخوانی index.html از یک فهرست بالاتر
·
<a href="../filename.html">: فراخوانی filename.html از یک فهرست بالاتر
·
<a href="../../">: فراخوانی index.html از دو فهرست بالاتر
8. حذف تگهای غیر ضروری META و مقادیر درون آن
بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمیدهند.
در صورت علاقه میتوانید لیست تگهای META را در این آدرس مشاهده کنید . تگهای
METAی با
اهمیت برای موتورهای جستجو تگهای keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی
باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگها
سعی کنید حجم محتوای آنها برای هر یک کمتر از 200
کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش
حجم صفحه شما خواهد شد. متا تگهای طولانی برای موتورهای
جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ میکنند.
9. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل
برای استفاده از CSS که در فایل
خارجی قرار دارد از کد زیر استفاده کنید:
<link type="text/css" rel="stylesheet" href="filename.css" />
و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:
<script
language="JavaScript" src="filename.js" type="text/javascript"></script>
هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر
کاربر (برای استفادههای بعدی) ذخیره میشود. بجای
قرار دادن JavaScript و
CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل
خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید
که هیچ محدودیتی برای استفاده از این فایلهای
خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای
یکسان در تمام صفحات و چند فایل هم برای قسمتهایی
که در صفحات خاص استفاده میشوند بسازید.
10. استفاده از / در انتهای آدرس فهرستها:
بجای استفاده از این کد:
<a href="http://www.URL.com/directoryname"
>
از کد زیر استفاده کنید:
<a href="http://www.URL.com/directoryname/"
>
زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد
که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا"
متوجه میشود که به یک فهرست اشاره شده و آنرا نمایش میدهد.
بازگشت به فهرست
بازگشت به صفحه نخست