با این 11 ترفند، زمان بارگذاری سایت‌تان را کاهش دهید!

هرچه سریع‌تر بهتر! درست مثل ماشین‌های مسابقه‌ای، سایت‌ها هم هرچقدر سریع‌تر باشند بهتر است. مخصوصاً در دنیای امروز اینترنت که کاربر از همیشه کم‌حوصله‌تر است.

عوامل زیادی در سرعت سایت دخیل هستند. از ساختار و کدهای سایت گرفته تا تصاویری که در هر صفحه از سایت به کار گرفته شده است؛ اما یکی از مهم‌ترین مسائلی که در سرعت هر سایت موثر است، پیکربندی سروری است که سایت روی آن میزبانی می‌شود. خب مسلماً سایت‌هایی که روی هاست اشتراکی قرار دارند، مدت‌زمان بیشتری طول را برای لود شدن نیاز دارند.

در ادامه می‌خواهیم ترفندهایی را به شما معرفی کنیم که کمک می‌کنند سرعت لود را کاهش دهید. در نتیجه سرعت سایت‌تان افزایش پیدا می‌کند.

11 ترفند کارآمد برای صرفه‌جویی در پهنای باند

تمام 11 ترفندی که در ادامه آورده‌ایم، توسط تیم فنی ما بررسی شده و از درستی عملکرد آن‌ها اطمینان حاصل شده است. برویم سراغ اولین تکنیک:

1- استفاده از کدهای CSS به‌جای تصاویر پس‌زمینه

استفاده از تصاویر به‌معنای مصرف بیشتر پهنای باند هستند، پس بهتر است تا جای ممکن استفاده از آن‌ها را کاهش دهید. مثلاً به‌جای استفاده از تصویر در پس‌زمینه سایت‌تان، می‌توانید کدهای CSS را به کار بگیرید.

اگر می‌خواهید از رنگ قرمز ساده برای بک‌گراند استفاده کنید، بهتر است از کد CSS زیر به‌جای red-bg.png استفاده کنید:

Background-color:#F00

بنابراین، با استفاده از این نوع کدها، می‌توانید رنگ هر بخشی از سایت‌تان را تغییر دهید؛ بدون اینکه روی سرعت آن تاثیر مخربی بگذارید.

نکته: یک منبع خوب برای یادگیری تکنیک‌های مربوط به این کدها، سایت CSS Tricks است.

2- بهینه‌سازی تصاویر

بخش قابل‌توجهی از پهنای باند بیشتر وب‌سایت‌ها، توسط تصاویر مصرف می‌شود! بنابراین، بهینه‌سازی تصاویری که قرار است روی سایت قرار گیرند، تاثیر بسیار زیادی در کاهش مصرف پهنای باند مصرفی سرور خواهد داشت.

فرمت‌های مناسب برای استفاده در فضای اینترنت، jpg یا jpeg و gif هستند!

نکته: هرگز از تصاویر با فرمت bmp استفاده نکنید؛ چراکه حجم بسیار زیادی دارند!

اگر بتوانید حجم همه تصاویر مدنظرتان را زیر 10 کیلوبایت نگه دارید، تفاوت چشمگیری را در سرعت سایت‌تان خواهید دید. البته پایبند بودن به این مسئله کار بسیار سختی است، مخصوصاً وقتی صحبت از تصاویری با فرمت gif باشد؛ اما خب نتیجه به تلاشش می‌ارزد.

نکته خیلی مهم اینکه  کاهش حجم تصاویر نباید روی کیفیت آن‌ها اثر بگذارد، وگرنه تجربه کاربری آسیب می‌بیند و این خوب نیست! 

3- کوتاه کردن کدهای CSS با کمک خصوصیت مختصرنویسی CSS

فایل‌های CSS، به‌خاطر داشتن فاصله و فضاهای اضافه زیاد، ممکن است بیش‌ازحد بزرگ باشند! استفاده از قابلیت مختصرنویسی CSS کمک می‌کند حجم کدهای داخل این فایل‌ها را کاهش دهید. همچنین این کار، سرعت دانلود را هم چندین برابر بیشتر می‌کند.

مثلاً تکه کد زیر را در نظر بگیرید:

margin: 2px 1px 3px 4px (top, right, bottom, left)

از کد بالا برای جایگزینی کدهای زیر استفاده می‌شود:

۱	margin-top: 2px;
۲	margin-right: 1px;
۳	margin-bottom: 3px;
۴	margin-left: 4px

4- حذف کدهای غیرضروری HTML و فضاهای سفید

فشرده کردن اندازه صفحه، تاثیر خوبی در افزایش سرعت سایت خواهد داشت. می‌توانید با حذف فضاهای سفید داخل فایل‌های HTML، صفحه‌تان را تا حد ممکن فشرده کنید.

فرقی نمی‌کند از ویرایشگرهای تصویری HTML استفاده کنید یا از Notepad، در هر صورت، فایل HTML شما شامل فضاهای غیرضروری، returnها، متا تگ‌ها، مقادیر پیش‌فرض در عناصر HTML و … خواهد بود.

تمامی این موارد صفحات وب شما را بزرگ‌تر می‌کنند، بدون اینکه هیچ فایده‌ای داشته باشند. خب مسلماً هرچقدر صفحه بزرگ‌تر باشد، به زمان بیشتری برای بارگذاری هم نیاز دارد؛ به این ترتیب پهنای باند به‌راحتی هرچه تمام‌تر هدر می‌رود!

برای حذف این اضافات، ابزارهای مفیدی وجود دارند. از جمله آن‌ها می‌توان به Wordoff اشاره کرد.

5- استفاده از کتابخانه‌های AJAX یا جاوا اسکریپت

تمامی صفحات مرتبط با یک‌ وب‌سایت، متشکل از بخش بزرگی از محتوا هستند که بین تمام آن‌ها مشترک است! در حالت سنتی، با هر درخواست، تمام این محتوا شروع به بارگذاری می‌کنند و این موضوع می‌تواند قاتل پهنای باند و سرعت باشد!

AJAX از رخداد چنین مسئله‌ای جلوگیری می‌کند. به این ترتیب که  در پاسخ هر درخواست، فقط بخشی از محتوا که نیاز است را بارگذاری می‌کند.  احتیاجی به گفتن نیست که با این کار مصرف پهنای باند تا چه حد زیادی کاهش پیدا می‌کند.

6- غیرفعال کردن فایل‌های Hotlink

وقتی تصاویر یا فایل‌های دانلودی از سایت‌های دیگر به سایت شما لینک می‌شوند (مثلاً وقتی سایتی تگ تصویر سایت شما را روی سایتش می‌گذارد و به سایت شما لینک می‌دهد) اصطلاحاً Hotlink ایجاد شده است.

در این حالت، تصاویر روی هاست شما میزبانی می‌شوند؛ پس سایت لینک‌دهنده هرچقدر هم ترافیک داشته باشد، خللی در پهنای باندش ایجاد نخواهد شد، چراکه پهنای باند شما در حال مصرف است.

جلوگیری از این اتفاق خیلی ساده است. فقط باید یک فایل htaccess. در پوشه تصاویر قرار دهید! سایت‌‌های دیگری که در حال مصرف پهنای باندتان بودند، پس از این کار با یک ضربدر قرمز مواجه می‌شوند!

کد زیر هم در انجام این کار کمک‌تان خواهد کرد:

۱	RewriteEngine On
۲	RewriteCond %{HTTP_REFERER} !^$


۳	RewriteCond %{HTTP_REFERER} !^http(s)?://(.*\.)?yourserver.com [NC]
۴	RewriteRule \.(jpeg|jpg|gif|png)$ - [F]

در ضمن اگر می‌خواهید بیشتر در این مورد اطلاعات کسب کنید، می‌توانید از سایت HTML BASIX استفاده کنید.

7- فشرده‌سازی فایل‌های HTML و PHP با GZIP

درست مثل فایل‌های CSS، فایل‌های HTML هم کلی فضای سفید و بی‌استفاده دارند که فقط فضا را اشغال می‌کنند. اگر از زبان برنامه‌نویسی PHP استفاده می‌کنید، می‌توانید با استفاده از ماژول mod-gzip از وب‌سرور آپاچی بخواهید تا محتوای‌تان را فشرده کند.

این ماژول می‌تواند به میزان قابل‌توجهی حجم صفحات وب را کاهش دهد.  اکثر مرورگرهای امروزی، از محتوای فشرده پشتیبانی می‌کنند، اما اگر احیاناً مرورگری این توانایی را نداشته باشد هم مشکلی پیش نمی‌آید. یکی از ویژگی‌های مثبت mod-gzip این است که در چنین مواردی، محتوا را به همان شکل غیرفشرده به مرورگر ارسال می‌کند! 

در کل که راحت‌ترین راه برای فشرده‌سازی، استفاده از فایل htaccess. است. استفاده از این فایل به دلیل سادگی بیشتر در اجرا کارتان را ساده خواهد کرد.

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

php_value output_handler ob_gzhandler

اگر امکان افزودن ترتیب برای کارکرد فشرده‌سازی PHP را دارید، خط زیر را در هدر صفحات سایت‌تان درج کنید:

< ? ob_start("ob_gzhandler");?>

8- استفاده از سایت‌های رایگان برای میزبانی فایل و تصاویر

می‌توانید به‌جای اینکه فایل‌های حجیم را روی سایت‌ خودتان بارگذاری کنید،آن‌ها روی هاست‌های رایگان یا غیررایگان تصاویر و فایل‌ها مثل Flickr, Pikasa, PhotoBucket و … قرار دهید تا پهنای باند کمتری از سرورتان گرفته شود.

بعد از آپلود فایل یا تصویر مدنظر در این سایت‌ها، می‌توانید لینک آن‌ها را در سایت یا وبلاگ خود قرار دهید.

نکته: قبل از انجام این کار با ارائه‌دهنده هاست خود هماهنگ کنید تا مطمئن شوید آن‌ها مشکلی با این موضوع ندارند.

9- اجتناب از فایل‌های پیوست تا جای ممکن

اگر می‌خواهید فایلی را روی سایت‌تان آپلود کنید که قبلاً روی اینترنت بارگذاری شده است، شاید بهتر باشد لینک همان فایل را داخل سایت‌تان قرار دهید! به هر حال، آپلود کردن هر فایل بخشی از پهنای باند شما را اشغال خواهد کرد و انجام این کار، از هدررفت بی‌دلیل پهنای باند جلوگیری خواهد کرد.

همچنین در صورت انجام این کار، در زمان‌تان هم صرفه‌جویی خواهد شد!

10- کش کردن وب‌سایت

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

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

بهتر است کش کردن محتوای سایت، با محدودیت زمانی همراه باشد. این‌گونه مرورگرها می‌فهمند اعتبار محتوای کش‌شده تا چه زمانی است؛ اما در مورد مواردی مثل تصاویر که معمولاً تغییر نخواهند کرد، کش کردن دائمی هم ایده خوبی است!

به‌طور کلی برای کش کردن محتوای سایت باید از دستورات زیر کمک بگیرید:

۱	# ۱ YEAR
۲	<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"="">


۳	Header set Cache-Control "max-age=29030400, public"
۴	</filesmatch>


۵	 
۶	# ۱ WEEK


۷	<filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
۸	Header set Cache-Control "max-age=604800, public"


۹	</filesmatch>
۱۰	 
 	 	 	 


۱۱	# ۳ HOUR
۱۲	<filesmatch "\.(txt|xml|js|css)$"="">


۱۳	Header set Cache-Control "max-age=10800"
۱۴	</filesmatch>


۱۵	 
۱۶	# NEVER CACHE


۱۷	<filesmatch "\.(html|htm|php|cgi|pl)$"="">
۱۸	Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"


۱۹	</filesmatch>

اگر می‌خواهید برای حافظه کش محدودیت زمانی تعیین کنید، از دستورات زیر استفاده کنید:

۱	ExpiresActive On
۲	ExpiresDefault A0


۳	 
۴	# ۱ YEAR


۵	<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"="">
۶	ExpiresDefault A9030400


۷	</filesmatch>
۸	 


۹	# ۱ WEEK
۱۰	<filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
 	 	 	 


۱۱	ExpiresDefault A604800
۱۲	</filesmatch>


۱۳	 
۱۴	# ۳ HOUR


۱۵	<filesmatch "\.(txt|xml|js|css)$"="">
۱۶	ExpiresDefault A10800"


۱۷	</filesmatch>

11- کش کردن RSS Feeds

RSS قابلیتی است که امکان توزیع و انتشار آسان محتوا را فراهم می‌کند. وقتی از RSS Feed کش گرفته می‌شود، سرعت بارگذاری محتوا به‌شکل قابل‌توجهی بالا می‌رود؛ چراکه اطلاعات از حافظه محلی خوانده می‌شوند و پهنای باندی مصرف نمی‌شود.

معمولاً کش گرفتن از RSS مدت‌دار است. بعد از اتمام زمان مشخص‌شده، RSS دوباره بارگذاری می‌شود و پروسه انتقال داده‌ها از حافظه محلی از سر گرفته می‌شود.

سرعت سایت را دغدغه خود بدانید

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

توصیه می‌کنیم به برچسب افزایش سرعت سایت بروید و دیگر مقاله‌هایی که در این زمینه داریم را هم مطالعه کنید.

این مقاله را با آن دسته از دوستان‌تان که سایت دارند به اشتراک بگذارید، قطعاً کمک بزرگی به ایشان خواهید کرد.

با سپاس از وقتی که برای خواندن گذاشتید.