Пропускная способность (данные, передаваемые с вашего веб-сервера в браузер клиента), как правило, ограничивается хостинг-провайдерами, поэтому, как владелец веб-сайта, вы должны использовать как можно меньшую пропускную способность, чтобы избежать дальнейших проблем.
В этой статье я собрал наиболее полезные советы, позволяющие максимально экономить трафик при одновременном ускорении работы вашего сайта
Используйте CSS вместо изображений
Изображения могут определенно потреблять много пропускной способности. Поскольку большинство браузеров теперь могут отображать графику, например, тени от ячеек или скругленные границы, вам, безусловно, следует использовать CSS вместо изображений, когда это возможно, поскольку код CSS потребляет намного меньшую пропускную способность, чем изображения.
Если вам нужно, чтобы ваш веб-сайт был совместим со старыми браузерами, такими как печально известный IE6, решение состоит в том, чтобы использовать альтернативную таблицу стилей и изображения только для старого браузера. Используйте условный комментарий для ссылки на вашу таблицу стилей только для IE6:
<!--[if IE 6]> <link href="ieonly.css" rel="stylesheet" /> <![endif]-->
Всегда убедитесь, что ваши изображения оптимизированы
Хотя вы можете заменить многие изображения CSS, изображения по-прежнему являются важной частью веб-сайта. Но когда вам нужно использовать изображения, вы должны убедиться, что они оптимизированы для отображения в Интернете.
Если вы используете Adobe Photoshop, вы можете использовать опцию «Сохранить для Интернета», которая позволит вам легко найти лучший компромисс между качеством и размером изображения. Другой вариант — использовать бесплатный онлайн-сервис для уменьшения размера изображения при сохранении высокого качества. Этот сервис называется Smush It, и я не могу перестать использовать его для оптимизации своих изображений.
Если вы используете WordPress, вы будете рады узнать, что доступен бесплатный плагин Smush It . Установите его, и он автоматически оптимизирует любое изображение, которое вы загрузите на свой сайт WordPress с помощью загрузчика. Круто, не правда ли?
Используйте кеш на вашем сайте
Кэширование — это действие по извлечению данных из готового хранилища (называемого кешем) вместо использования ресурсов для их генерации каждый раз, когда требуется одна и та же информация.
Приведенный ниже код добавит кеширование в такие файлы, как .jpg, .gif, .swf. Кеш будет длиться 1 неделю. Для других типов файлов вы можете настроить срок службы кэша. Например, файлы CSS и JavaScript должны кэшироваться в течение 12 часов.
Вставьте его в свой файл .htaccess.
<filesmatch "\.(jpg|jpeg|png|gif|swf)$"=""> Header set Cache-Control "max-age=604800, public" </filesmatch>
Пользователь WordPress? Тогда я определенно рекомендую установить плагин W3 Total Cache . Это бесплатное и полное решение для кэширования, которое помогает оптимизировать каждый аспект вашего блога или веб-сайта. Это позволяет вашему сайту работать быстрее и использовать меньшую пропускную способность.
Предотвращение кражи пропускной способности и хотлинкинга
Плохая, но очень распространенная практика в Интернете — хотлинкинг: что такое хотлинкинг? Вот краткий пример: Веб-сайт A разместить изображение для отображения на HTML-странице. Веб-сайт B хочет отображать то же изображение, которое использует веб-сайт A. Веб-сайт B ссылается на изображение веб-сайта A, в результате чего пропускная способность веб-сайта A используется каждый раз при загрузке веб-сайта B.
Определенно, вы не хотите платить пропускную способность другим, верно? Для этого создайте изображение (это может быть прозрачное gif-изображение размером 1 * 1 или изображение с надписью «не кради мои изображения») и загрузите его на свой сервер или, что еще лучше, на бесплатный веб-сайт размещения изображений. Затем, добавьте следующий код в файл .htaccess вашего сайта. Не забудьте обновить код своим собственным сайтом и URL-адресами изображений:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]
Use Minify to compress CSS and JavaScript files
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
Please not that Minify is included in the WordPress W3 Total Cache plugin, so if you already installed this plugin you have nothing else to do to minify your blog.
Use hosting websites to host big files
If you have to host big files (videos, photoshop psd files, big images, etc) you should definitely rely on a third party service such as Dropbox to host your files. That way, when someone will download it, it will not consume your server bandwidth but instead the bandwidth of the third party service.
Use GZip compression on your PHP files
GZip compression is a technique that compress data being sent out from your web server, and have the browser decompress this data on the fly, thus reducing the amount of data sent and increasing the page display speed. Recent browsers all supports GZip compression.
To achieve GZip compression on your website, you have to create 2 files. Name the first one gzip_header.php:
<?php
$phpver = phpversion();
$useragent = (isset($_SERVER["HTTP_USER_AGENT"]) ) ? $_SERVER["HTTP_USER_AGENT"] : $HTTP_USER_AGENT;
if ( $phpver >= '4.0.4pl1' && ( strstr($useragent,'compatible') || strstr($useragent,'Gecko') ) ) {
if ( extension_loaded('zlib') ) {
ob_start('ob_gzhandler');
}
} else if ( $phpver > '4.0' ) {
if ( strstr($HTTP_SERVER_VARS['HTTP_ACCEPT_ENCODING'], 'gzip') ) {
if ( extension_loaded('zlib') ) {
$do_gzip_compress = true;
ob_start();
ob_implicit_flush(0);
header('Content-Encoding: gzip');
}
}
}
?>
Now, create a second file and name it gzip_footer.php:
<?php
$gzip_contents = ob_get_contents();
ob_end_clean();
$gzip_size = strlen($gzip_contents);
$gzip_crc = crc32($gzip_contents);
$gzip_contents = gzcompress($gzip_contents, 9);
$gzip_contents = substr($gzip_contents, 0, strlen($gzip_contents) - 4);
echo "\x1f\x8b\x08\x00\x00\x00\x00\x00";
echo $gzip_contents;
echo pack('V', $gzip_crc);
echo pack('V', $gzip_size);
?>
Once you have created the gzip_header.php and the gzip_footer.php files, you can create a new file which includes your regular template between the gzip_header.php and the gzip_footer.php files:
<?php
include('gzip_header.php');
include('your_template_file.php');
include('gzip_footer.php');
?>
Source article for the codes: http://www.techiecorner.com/7/speed-up-and-save-your-website…
Use a reliable web hosting
At last but not least, it is obvious that you should use a reliable web host if you want your website to be fast. I’ve used lots of web hosts and some are really good and some other sucks. For example, you should definitely avoid Phpnet.org and Maven Hosting, both of them shut my websites down just because they were receiving too many visits.
On the other hand, I was pleased with WP Web Host, which is really good if you’re hosting a small or medium WordPress site or blog. If you have a popular and/or large website, I definitely recommend Vidahost, which is CatsWhoCode webhost. My site is still fast although I receive lots of traffic. If you want to get some hosting from Vidahost, don’t forget to use my custom coupon CATSWHOCODE to get 10% off anything.