Разгоняем сайт
17.10.2008
Рассмотрим в данном посте несколько самых простых, но в тоже время самых действенных способов для оптимизации вашего сайта. Нет, не СЕО оптимизации, а оптимизации его для уменьшения времени загрузки. Ведь не секрет, что ничто так не раздражает, как медленно открывающийся сайт.
1. Пропустите картинки через smushit.com
Если у вас нет специального софта для оптимизации картинок, т.е. уменьшения их размеров, то этот плагин для файрфокса вам очень даже пригодится. После установки оного просто кликаете у себя в правом нижнем углу браузера на иконку в виде человечка с экстримальной прической. Ждете, пока сервис подсчитает, на сколько можно сжать картинки на открытом сайте и какой процент будет составлять экономия. И если вас полученный результат устроит, можете скачать уже сжатые картинки и перезалить ими старые. К примеру, у меня на блоге размер картинок можно уменьшить в среднем на 6%.
2. Используйте самые быстрые CSS селекторы
Существует множество способов применить определенные стили для какого-то элемента на странице. Но не все одинаково быстро понимает браузер. Может, и не совсем корректно я выразился, но, думаю, вы меня поняли :-) Более подробно об этой теме можно почитать у Йона Сайкса (Jon Sykes).
Например, нам надо задать стиль для ссылки. Пусть это будет красный цвет.
1-й способ (самый быстрый):
color: red;
}
2-й способ
color: red;
}
3-й способ
color: red;
}
4-й способ (самый медленный)
color: red;
}
3. Совмещайте картинки, которые используются в CSS для свойства background без repeat в один файл.
Потом с ними очень просто можно работать. Просто указываете сдвиг на нужное количество пикселей, в зависимости от того, где находится ваш фрагмент на большой картинке, которая называется CSS спрайт. Более подробно об этом можно почитать – здесь.
Скажу только, что таким образом уменьшается количество HTTP-запросов браузером, на которые идет немало времени. В нашем же случае браузер загружает всего одну, хоть и большую, картинку – вжик и все! Это лучше чем 10 раз стучаться, чтобы забрать маленькие.
4. Сжимайте свои css и js файлы
Как известно, браузер их подгружает в кеш, перед тем как отобразить страницу. Поэтому облегчите ему жизнь, т.е. ускорьте отображение целевой страницы, путем уменьшения размеров этих файлов.
Существует множество компрессоров, которые позволяют это все делать. Но помните, после сжатия, код становится абсолютно не читабельным. Так что храните на случай каких то изменений в будущем у себя где то в заначке оригинальный файл.
CSS… Icey CSS Compressor уменьшает его размер примерно на 25%, но бывает и больше. Подробнее можно почитать вот здесь.
Что касается сжатия JS, то следует обратить внимание на продукт любимого многими Yahoo – YUI compressor
5. Сохраняйте картинки в “правильном” формате
Выбирайте только jpg, gif и png. Конечно, многие так и делают, но есть еще люди, которые умудряются вешать на сайтах тяжеленные bmp.
6. Размещайте тег <script> внизу страницы
Конечно, это не всегда возможно, но вы уж постарайтесь. Зачем это надо? Ответ очень прост. Если ваш скрипт что-то выполняет, то это действие может застопорить дальшейшуюю загрузку страницы на некоторое время, что очень даже заметно для рядового пользователя. А многие балуются размещеним счетчика Google Analytics вначале страницы, что есть очень и очень плохо…
7. Разносите файлы, используемые на странице, по разным доменам
Суть фишки заключается в том, что брайзер может одновременно с одного домена забирать не больше двух файлов. Рекомендуется использовать отдельные домены для CSS, картинок и скриптов.
Что почитать по теме?
- Steve Souder’s blog
- Website Optimization Secrets (O’Reilly)
- Yahoo Optimization page
Где взять “спидометр”?
- YSlow
- Webkit Element Inspector
_____
Спонсор месяца: одесский форум
