مشاهده نسخه کامل
: Harry Potter
26-12-2005, 20:06
افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب می‌باشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا" کاربران از مشاهده آن صفحه صرف نظر می‌کنند و دیگر به آن باز نمی‌گردند این به معنی از دست دادن کاربران سایت می‌باشد که برای مدیران یک سایت اصلا" خوشایند نیست. در ادامه چند روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان می‌شود.
1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:
مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد.
برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) استفاده کنید.
2. از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
نتایج استفاده از کدهای بالا را در این صفحه ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مشاهده کنید. با استفاده از این کد می‌توانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین می‌رود. اگر به نحوه ایجاد این گونه کلیدها علاقمند هستید می‌توانید مقالات بخش CSS سایت A List Apart ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) را مطالعه کنید.
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را می‌توان بصورت زیر نمایش داد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
کد HTML
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش می‌دهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری می‌کنند. با استفاده از این تکنیک متن درون صفحه فورا" به نمایش درآمده و کاربر می‌تواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری می‌شوند.
در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا" می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
4. استفاده از انتخاب کننده‌های (selectors) مناسب
به کد نامناسب زیر توجه کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Font
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Border
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Background
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
این قوانین بطور عملی برای border و padding نیز قابل استفاده است.
6. استفاده از فراخوانی نسبی
سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است.
یک مثال از فراخوانی مطلق بصورت زیر است: <a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
که بهتر است به این صورت باشد: <a href="filename.htm">.
اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:
<a href="/filename.html">: فراخوانی [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
<a href="/directory/filename.html">: فراخوانی [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
<a href="./">: فراخوانی index.html در فهرست جاری
<a href="../">: فراخوانی index.html از یک فهرست بالاتر
<a href="../filename.html">: فراخوانی filename.html از یک فهرست بالاتر
<a href="../../">: فراخوانی index.html از دو فهرست بالاتر
7. حذف تگهای غیر ضروری META و مقادیر درون آن
بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مشاهده کنید. تگهای METAی با اهمیت برای موتورهای جستجو تگهای keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از 200 کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگهای طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.
8. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل
برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایلهای خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.
9. استفاده از / در انتهای آدرس فهرست‌ها:
بجای استفاده از این کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا" متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.
================================================== ====
منبع: Ten ways to speed up the download time of your web pages ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:
مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد.
برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) استفاده کنید.
2. از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
نتایج استفاده از کدهای بالا را در این صفحه ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مشاهده کنید. با استفاده از این کد می‌توانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین می‌رود. اگر به نحوه ایجاد این گونه کلیدها علاقمند هستید می‌توانید مقالات بخش CSS سایت A List Apart ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) را مطالعه کنید.
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را می‌توان بصورت زیر نمایش داد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
کد HTML
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش می‌دهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری می‌کنند. با استفاده از این تکنیک متن درون صفحه فورا" به نمایش درآمده و کاربر می‌تواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری می‌شوند.
در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا" می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
4. استفاده از انتخاب کننده‌های (selectors) مناسب
به کد نامناسب زیر توجه کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Font
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Border
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Background
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Margin
این قوانین بطور عملی برای border و padding نیز قابل استفاده است.
6. استفاده از فراخوانی نسبی
سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است.
یک مثال از فراخوانی مطلق بصورت زیر است: <a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
که بهتر است به این صورت باشد: <a href="filename.htm">.
اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:
<a href="/filename.html">: فراخوانی [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
<a href="/directory/filename.html">: فراخوانی [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
<a href="./">: فراخوانی index.html در فهرست جاری
<a href="../">: فراخوانی index.html از یک فهرست بالاتر
<a href="../filename.html">: فراخوانی filename.html از یک فهرست بالاتر
<a href="../../">: فراخوانی index.html از دو فهرست بالاتر
7. حذف تگهای غیر ضروری META و مقادیر درون آن
بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مشاهده کنید. تگهای METAی با اهمیت برای موتورهای جستجو تگهای keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از 200 کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگهای طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.
8. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل
برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایلهای خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.
9. استفاده از / در انتهای آدرس فهرست‌ها:
بجای استفاده از این کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
از کد زیر استفاده کنید:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا" متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.
================================================== ====
منبع: Ten ways to speed up the download time of your web pages ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])