۷ سال

تکنیکهای بسیاری برای بهبود سرعت بارگزاری صفحات وجود دارند که با یک جستجوی ساده در گوگل بهترین نتایج را خواهید دید. مسلما نوشتن این پست نیز تکرار مکررات است اما از آن مکرراتی است که باید بارها تکرارش کرد. متاسفانه در صنعت طراحی وب سایت ایران,  تعداد کمی از طراحان وب آگاهی کاملی از جنبه های مختلف طراحی سایت از کدنویسی بهینه گرفته تا تنظیمات مربوط به سرور دارند و تعداد کمتری این دانسته ها را واقعا به کار میگیرند. در این مطلب تکنیکهای را معرفی خواهم کرد که به چشم تاثیراتش را در سایتهای مختلف دیده ام.

به کار انداختن فشرده سازیGZIP

با یقین میگویم که این مورد مهمترین موردی است که در این مطلب میخوانید. gzip که مخفف Gnu Zip میباشد ابزاری برای فشرده سازی انواع مختلف فایل است که گاها میتواند تا حدود ۸۰ درصد از حجم صفحات وب شما بکاهد. اگر برای فایلهای js و css خود این قابلیت را فعال کنید کاهش حجم زیادی را در صفحات خود خواهید و در اینترنت کاهش حجم یعنی سرعت و سرعت یعنی همه چیز.

برای فعال کردن gzip در سرورهای apache میتوانید تکه کد زیر را  به فایل .htaccess که در روت هاست شما وجود دارد اضافه کنید.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

تکه کد بالا فشرده سازی را برای فایلهای text, html, javascript, css, xml فعال خواهد کرد. و یا اینکه میتوانید با استفاده از کد زیر فشرده سازی را  بر حسب پسوند فایلها فعال کنید.


<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|TTF)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

برای اینکه بدانید gzip در صفحات شما فعال است یا خیر میتوانید از این سایت استفاده کنید.

افزودن http Expire Headers

تقریبا تمام طراحان وب با عبارت caching آشنایی دارند. سیستم cache بدین گون عمل میکند که پس از اولین بارگزاری یک صفحه وب تعدادی از عناصر صفحه بر روی سیستم کاربر ذخیره میشوند تا دفعات بعد به جای خواندن فایل از سرور, آنها از روی سیستم خوانده شود. اینکار هم پهنای باند را حفظ خواهد کرد و هم سرعت را بهبود چشمگیری خواهد بخشید. اما اگر به مرورگر نفهمانیم که هر عنصر چقدر باید در کش بماند مشکلات زیادی از قبیل نمایش عناصر قدیمی به جای عناصر جدید و یا کلا عدمcaching  پیش خواهد آمد.

برای فعال سازی کش از طریق سرور باید خطوط زیر را به فایل .htaccess خود اضافه کنید.

<IfModule mod_headers.c>
# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>
</IfModule>

استفاده از سرورهای تحویل محتوا (Content Delivery Networks)

cdn ها کارشان این است که فایلهایی را که استفاده زیادی در وبسایتهای امروزه دارند را در خود جای دهند و در موقع نیاز انها را به کاربر تحویل دهند. برای مثال کتابخانه جاوا اسکریپت JQuery را تصور کنید. کتابخانه‌ی بسیار معروفی که سیستم ورد پرس و بسیاری از سیستمهای دیگر به طور پیشفرض از آن استفاده میکنند. شما میتوانید به جای اینکه این فایل ها را از درون هاست خود در سایتتان استفاده کنید از آدرس زیر استفاده کنید.

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

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

ترکیب کردن جاوا اسکریپت و CSS در یک فایل

هر بار که فایلی از طریق مرورگر کاربر درخواست میشود, مرورگر درخواستی برای سرور ارسال میکند که تا تحویل درخواست, پردازش آن توسط سرور و پاسخ درخواست از طرف سرور مدت زمان محدودی طول خواهد کشید. حال هرچه این درخواستها کمتر باشند مسلما زمان کمتری نیز صرف خواهد شد. اگر شما تا آنجا که امکان دارد تمام فایلهای جاوا اسکریپت را درون یک فایل و فایلهای css را نیز به همین منوال در یک فایل قرار دهید شاهد بهبود سرعت و کاهش هدر رفتن زمان خواهید بود.

بهینه سازی تصاویر

به جرات میتوان گفت امروزه تصاویر بیشترین حجم صفحات وب را بخود اختصاص داده اند و روزانه هزاران گیگابایت پهنای باند را مصرف میکنند. تصاویری که گاها بدلیل استاندارد نبودنشان برای وب حجمی بسیار بیشتر از آنچه نیاز دارند اشغال میکنند. در بسیاری موارد میتوان حجم تصاویر را تا ۸۰ درصد بدون افت کیفیت کاهش داد. ابزارهای زیادی نیز برای اینکار موجود هستند. درسیستمهای لینوکسی دو ابزار بسیار مفید jpegoptim و optipng میتوانند تعداد زیادی تصویر را در زمان کمی بدون افت کیفیت بهینه کنند. برای ویندوز نیز ابزارهای مخصوصی وجود داردند.+ + +

کوچک کردن JavaScript و CSS

فایلهای css و js اگر به همان صورتی که نوشته میشوند استفاده شوند دارای فاصلها و خطوط بسیاری هستند که اینها نیز به خودی خود فضا اشغال میکنند. میتوانید با استفاده از ابزارهایی مشابه این ابزار فایلهای css خود را فشرده کنید. فایلهای جاوا اسکریپت هم قابلیت فشرده سازی دارند. با استفاده از این ابزار میتوانید کدهای جاوا اسکریپت خود را به اصطلاح pack کنید. با اینکار دو نشان را با یک تیر زده اید. هم  کدهای خود را از شر دزدی حفظ کرده اید و هم آن را فشرده کرده اید.

و در آخر این نکته را متذکر میشوم که گرچه افزایش سرعت برای سایتها بسیار مفید خواهد بود اما نباید محتوا را فدای سرعت کرد. به یاد داشته باشید محتوای خوب ارزش منتظر ماندن را خواهد داشت.

سلام

از این پس وبلاگ ۷ سال بخش جدیدی به نام کتاب هفته وجود خواهد داشت که هر هفته در آن یک کتاب مفید معرفی خواهد شد. موضوع این کتاب میتواند در مورد کامپیوتر باشد و یا حتی یک کتاب اجتماعی و یا حتی یک کتاب داستان. اگر اهل کتاب خواندن هستید مطمئنن از این بخش جدید خوشتان خواهد آمد.

برای هفته اول ابتدا قصد دارم کتابی رو که چند سال پیش خودم جمع آوری کردم رو برای شما قرار بدم.

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

خیلی ها از آن سخن میگویند. بسیاری نامش را برده اند و کمتر کسی است که از آن چیزی نشنیده‌است. فایرفاکس و سافاری بخشی از آن را پشتیبانی میکنند. اما هنوز کسی به طور دقیق نمیداند که HTML5 چیست و چه کاری انجام میدهد؟!

اینجا قصد داریم تا به طور مختصر چیزهایی درباره‌ی این معجزه جدید وب یاد بگیریم.

HTML5 مجموعه‌ای از مشخصه هاست که میگوید چگونه زبان هسته وب یعنی HTML باید شکل بگیرد تا بتواند متن ها, تصاویر, فایلهای چند رسانه‌ای, فرم ها, برنامه های تحت وب و یا هر چیز دیگری را که شما در مرورگر خود میبینید را نمایش دهد. در حقیقت HTML5  یک بازبینی از چگونگی شکل گرفتن وب است.

چه چیزهایی را میتوان از Html5 انتظار داشت؟

فضای آفلاین: Google Gears را میشناسید؟ HTML5  قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابًر کوکی”.

اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.

پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.

مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما را برچسب گذاری کند.

فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.

تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون درد و خون ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت, انجمن, سایتهای drag-and-drop نوشت.

آیا با وجود JavaScript  و Flash  نیازی به استفاده از HTML5 هست؟

بسیاری فکر میکنند که HTML5 قرار است جای جاوا اسکریپت را بگیرد و این تصوری کاملا غلط است. برعکس HTML5 سعی بر این دارد کارآیی جاوا اسکریپت را بهبود بخشد. در حقیقت HTML5 کنترل بسیار بیشتری به JavaScript خواهد داد. اما در مورد فلش قضیه برعکس است.

Flash همیشه انتخاب خوبی نیست. مشکلات زیادی دارد. برای مثال استفاده زیاد از منابع سیستم مانند CPU و اینکه همیشه باید برای استفاده از آن نرم افزارش را نصب کرد.

و در آخر اینکه HTML5 آمده تا وب را تکان دهد. منتظر یک زلزله ۱۰ ریشتری باشید.

منبع LifeHacker

اگر مایلید در مورد HTML5 بیشتر بدانید به منابع زیر رجوع کنید.

HTML5 – Wikipedia

HTML5

Dive Into HTML5

همه ما معتقدیم که دنیای مجازی و محتوای اون برای سرعت بخشیدن به ارتباطات و تبادل اطلاعات به وجود اومد. هزاران سایت و میلیون ها صفحه در اینترنت وجود دارن که هرکدوم با هدفی خاص بوجود اومدن. یکی از اهداف مشترکی که همه صفحات وب دنبال میکنن افزایش سرعت ارتباط هست.

حالا تصور کنید که همین صفحات وب عامل کندی و هدر رفتن وقت بشن. در این مطلب و مطالب مرتبط قصد داریم تا راهکارهای مٶ ثری رو برای افزایش سرعت بارگذاری صفحات وب بررسی کنیم.

در اولین قدم به بهینه سازی کدهای html میپردازیم.

تعریف بهینه سازی: به مجموعه اقداماتی که در راستای کاهش حجم اشغال شده توسط یک برنامه و همچنین افزایش سرعت دستیابی به اشیاء یک پرونده بهینه سازی گفته میشود.

یکی از بهترین راههایی که میشه سرعت لود یک صفحه html رو افزایش داد, کاهش دادن حجم فایل html هست. حالا اگر ما با کدهای html آشنایی کافی رو داشته باشیم میتونیم با استفاده از این مطلب یاد بگیریم که کی و چه موقع تگی رو استفاده بکنیم و یا چه موقع از تگی استفاده نکنیم.

در HTML و یا حتی نسخه جدید و سخت گیر تر اون XHTML گاهی اوقات شما اجازه حذف برخی تگ ها رو دارید که بودن یا نبودنشون هیچ تفاوتی ایجاد نمیکنه. در زیر لیستی از این تگها ارایه شده که شما میتونید اونها رو به دلخواه خودتون حذف کنید.(تگهایی که روی آونا خط کشیده شده تگهای خالی هستن. یعنی عملا هیچ محتوایی ندارن.)

• </area>
• </base>
• <body>
• </body>
• </br>
• </col>
• </colgroup>
• </dd>
• </dt>
• <head>
• </head>
• </hr>
• <html>
• </html>
• </img>
• </input>
• </li>
• </link>
• </meta>
• </option>
• </p>
• </param>
• <tbody>
• </tbody>
• </td>
• </tfoot>
• </th>
• </thead>
• </tr>

برای مثال شما میتونید به جای استفاده از فرمت <li> List Item</li> از شکل کوتاه تر <li> List Item استفاده کنید. شما حتی میتونید تگهایی مثل <body> , <head> , <html> رو هم که وجودشون در HTML لازم نیست حذف کنید.

HTML 5

نسخه 5 html که هنوز در دست توسعه امکانات بیشتری رو برای کاهش حجم به شما ارایه میده.

برای مثال شما میتونید از حالت کوتاه شده اعلان DOCTYPE استفاده کنید:
<!DOCTYPE html>

به جای دستور طولانی و معمول اون در نسخه های پایین تر html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

یا مثلا زمانی که قصد دارد encoding مربوط به صفحه تون رو مشخص کنید به جای استفاده از دستور طولانی <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

از شکل کوتاه شده‌ی اون استفاده کنید.
<meta charset="utf-8">

مورد دیگه اینه که هنگام استفاده از تگهای script و یا style حتما لازم نیست که خاصیت type اون رو مشخص کنید.
<script>
به جای
<script type="text/javascript">

به طور کل اگر شما بتونید از نکات بالا به موقع و به صورت ترکیبی استفاده کنید قادر خواهید بود که بین 5 تا 20٪ از حجم فایلتون کم کنید و این خودش تأثیر به سزایی در سرعت لود صفحات شما در اینترنت داره.

برگرفته از مقالات آموزشی گوگل کد

q2njz6rwia