تکنیکهای بسیاری برای بهبود سرعت بارگزاری صفحات وجود دارند که با یک جستجوی ساده در گوگل بهترین نتایج را خواهید دید. مسلما نوشتن این پست نیز تکرار مکررات است اما از آن مکرراتی است که باید بارها تکرارش کرد. متاسفانه در صنعت طراحی وب سایت ایران, تعداد کمی از طراحان وب آگاهی کاملی از جنبه های مختلف طراحی سایت از کدنویسی بهینه گرفته تا تنظیمات مربوط به سرور دارند و تعداد کمتری این دانسته ها را واقعا به کار میگیرند. در این مطلب تکنیکهای را معرفی خواهم کرد که به چشم تاثیراتش را در سایتهای مختلف دیده ام.
به کار انداختن فشرده سازیGZIP
با یقین میگویم که این مورد مهمترین موردی است که در این مطلب میخوانید. gzip که مخفف Gnu Zip میباشد ابزاری برای فشرده سازی انواع مختلف فایل است که گاها میتواند تا حدود ۸۰ درصد از حجم صفحات وب شما بکاهد. اگر برای فایلهای js و css خود این قابلیت را فعال کنید کاهش حجم زیادی را در صفحات خود خواهید و در اینترنت کاهش حجم یعنی سرعت و سرعت یعنی همه چیز.
برای فعال کردن gzip در سرورهای apache میتوانید تکه کد زیر را به فایل .htaccess که در روت هاست شما وجود دارد اضافه کنید.
1 2 3 4 5 6 7 8 9 | 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 |
1 | SetOutputFilter DEFLATE |
برای اینکه بدانید gzip در صفحات شما فعال است یا خیر میتوانید از این سایت استفاده کنید.
افزودن http Expire Headers
تقریبا تمام طراحان وب با عبارت caching آشنایی دارند. سیستم cache بدین گون عمل میکند که پس از اولین بارگزاری یک صفحه وب تعدادی از عناصر صفحه بر روی سیستم کاربر ذخیره میشوند تا دفعات بعد به جای خواندن فایل از سرور, آنها از روی سیستم خوانده شود. اینکار هم پهنای باند را حفظ خواهد کرد و هم سرعت را بهبود چشمگیری خواهد بخشید. اما اگر به مرورگر نفهمانیم که هر عنصر چقدر باید در کش بماند مشکلات زیادی از قبیل نمایش عناصر قدیمی به جای عناصر جدید و یا کلا عدمcaching پیش خواهد آمد.
برای فعال سازی کش از طریق سرور باید خطوط زیر را به فایل .htaccess خود اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | # cache images and flash content for one month <filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf)$"> Header set Cache-Control "max-age=2592000" </filesmatch> # cache text, css, and javascript files for one week <filesmatch ".(js|css|pdf|txt)$"> Header set Cache-Control "max-age=604800" </filesmatch> # cache html and htm files for one day <filesmatch ".(html|htm)$"> Header set Cache-Control "max-age=43200" </filesmatch> # implement minimal caching during site development <filesmatch "\.(flv|gif|jpg|jpeg|png|ico|js|css|pdf|swf|html|htm|txt)$"> Header set Cache-Control "max-age=5" </filesmatch> # explicitly disable caching for scripts and other dynamic files <filesmatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> Header unset Cache-Control </filesmatch> |
استفاده از سرورهای تحویل محتوا (Content Delivery Networks)
cdn ها کارشان این است که فایلهایی را که استفاده زیادی در وبسایتهای امروزه دارند را در خود جای دهند و در موقع نیاز انها را به کاربر تحویل دهند. برای مثال کتابخانه جاوا اسکریپت JQuery را تصور کنید. کتابخانهی بسیار معروفی که سیستم ورد پرس و بسیاری از سیستمهای دیگر به طور پیشفرض از آن استفاده میکنند. شما میتوانید به جای اینکه این فایل ها را از درون هاست خود در سایتتان استفاده کنید از آدرس زیر استفاده کنید.
1 | http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js |
گوگل میتواند با سرورهای فدرتمندی که در اختیار دارد محتوای مورد نظر را بسیار سریعتر از سرورهای دیگر ارایه دهد. استفاده از cdn ها مزیت دیگری نیز دارند که آن صرفه جویی در پهنای باند پر ارزش است. برای لیستی از کتابخانه هایی که میتوانید از طریق گوگل بارگزاری کنید به این آدرس مراجعه کنید.
ترکیب کردن جاوا اسکریپت و CSS در یک فایل
هر بار که فایلی از طریق مرورگر کاربر درخواست میشود, مرورگر درخواستی برای سرور ارسال میکند که تا تحویل درخواست, پردازش آن توسط سرور و پاسخ درخواست از طرف سرور مدت زمان محدودی طول خواهد کشید. حال هرچه این درخواستها کمتر باشند مسلما زمان کمتری نیز صرف خواهد شد. اگر شما تا آنجا که امکان دارد تمام فایلهای جاوا اسکریپت را درون یک فایل و فایلهای css را نیز به همین منوال در یک فایل قرار دهید شاهد بهبود سرعت و کاهش هدر رفتن زمان خواهید بود.
بهینه سازی تصاویر
به جرات میتوان گفت امروزه تصاویر بیشترین حجم صفحات وب را بخود اختصاص داده اند و روزانه هزاران گیگابایت پهنای باند را مصرف میکنند. تصاویری که گاها بدلیل استاندارد نبودنشان برای وب حجمی بسیار بیشتر از آنچه نیاز دارند اشغال میکنند. در بسیاری موارد میتوان حجم تصاویر را تا ۸۰ درصد بدون افت کیفیت کاهش داد. ابزارهای زیادی نیز برای اینکار موجود هستند. درسیستمهای لینوکسی دو ابزار بسیار مفید jpegoptim و optipng میتوانند تعداد زیادی تصویر را در زمان کمی بدون افت کیفیت بهینه کنند. برای ویندوز نیز ابزارهای مخصوصی وجود داردند.+ + +
کوچک کردن JavaScript و CSS
فایلهای css و js اگر به همان صورتی که نوشته میشوند استفاده شوند دارای فاصلها و خطوط بسیاری هستند که اینها نیز به خودی خود فضا اشغال میکنند. میتوانید با استفاده از ابزارهایی مشابه این ابزار فایلهای css خود را فشرده کنید. فایلهای جاوا اسکریپت هم قابلیت فشرده سازی دارند. با استفاده از این ابزار میتوانید کدهای جاوا اسکریپت خود را به اصطلاح pack کنید. با اینکار دو نشان را با یک تیر زده اید. هم کدهای خود را از شر دزدی حفظ کرده اید و هم آن را فشرده کرده اید.
و در آخر این نکته را متذکر میشوم که گرچه افزایش سرعت برای سایتها بسیار مفید خواهد بود اما نباید محتوا را فدای سرعت کرد. به یاد داشته باشید محتوای خوب ارزش منتظر ماندن را خواهد داشت.
این gzip چطور عمل می کنه؟
منظورم اینه که فایل فشرده رو به مرورگر میده مثلن یا …؟
الگوریتم gzip که با نام DEFLATE نیز شناخته میشود با حذف بیتهای تکراری حجم اطلاعات رو کم میکنه.
سرور پس فشرده کردن فایلها از این طریق اونها رو با سرفایل Content-Encoding: gzip به مرورگر تحویل میده و مرورگر که از قبل الگوریتم deflate decompressing رو درون خودش داره متوجه میشه که چگونه محتوا رو به نمایش بگذاره.
برای طلاعات بیشتر به http://www.gzip.org مراجعه کنید.
برای کم کردن حجم فایل های css این وب سایت هم پیشنهاد خوبیه که من ازش استفاده می کنم
cleancss.com
ممنونم دوست عزیز.
با GZIP موافقم، مرسی از معرفی این تکنیک ها
سلام
دوست عزیز خسته نباشید من همیشه مطالب سایت شما رو دنبال میکنم
من برای نوشتن مقالات وبلاگم از گوگل داک استفاده میکنم نزدیک ۱۰ روز هست که باز نمیشه با ف*ی$لت.ر ش.ک.ن باز میشه ولی به صورت عادی باز نمیشه میدونم این مسئله ربطی به این مطلب شما نداره گفتم از شما دلیلشو بدونم
ممنون
برقرار باشید
دلیلش مشخص است دوست من. برخی از سرویسهای گوگل مانند جیمیل از طرف بالاسری ها مسدود شدهاند اما نه به شیوه قدیمی.
در این روش پس از فراخوانی سایتها به صورتی مسدود میشن که کاربر تصور میکنه مشکل از خود سایته در حالی که اینطور نیست.
بهتر است از همان روشهای معلوم الحال برای دسترسی به این سایتها استفاده شود.
سلام ممنون مطلب خوبی بود
این قسمت نظراتتون ظاهرا مشکل داره بررسی کنید
سلام مرسی واقعا جالب و کارامد بود مخصوصا Css ها
سلام
البته حامد جان خوبه که از GZIP استفاده شود ولی دلیل اینکه در برخی سرورها مانند هاست های اشتراکی یا این قابلیت را می بندند و یا توصیه می شود استفاده نکنند فشار به پردازشگر و اشغال کردن رم است . چون درست است کدینگ رخ می دهد و سریعتر بارگذاری می شود اما ۱۰۰۰ درخواست فشرده سازی ممکن است برای یک پردازشگر ضعیف که میزبان ۵۰ سایت کوچک و بزرگ است ضرر هم داشته باشد
خوب بله فرشاد جان مشخصا شما صحیح میفرمایید.
که البته باز گذاشتن این امکان بر میگرده به مدیر سرور که خوب مدیریت سرور فعلا خارج از بحث ماست.
Pingback: بهینه سازی و افزایش سرعت سایت در شش مرحله | وبلاگ تقلبی
Pingback: بهینه سازی و افزایش سرعت سایت در شش مرحله | وبلاگ تقلبی