Роман Кобленц Профессионал

Как ускорить ваш сайт?

Ужасно осознавать, что успешность сайта, страницы которого вы наполнили всевозможной информацией, украсили множеством картинок, оживили с помощью java-скриптов, может оказаться под угрозой из-за медленной его загрузки в браузере.

Но что делать, если вам просто необходим каждый элемент ваших веб-страниц, дорога каждая картинка и каждый java-скрипт. Вот об этом, а именно о способах ускорения, оптимизации своего сайта я предлагаю сегодня поговорить.

В моей прошлой статье на данную тему мы определили, что длительность загрузки страниц вашего сайта в браузере определяется количеством запросов, которые он формирует, и длительностью исполнения этих запросов. Не будем вновь углубляться в эту тему, а перейдем непосредственно к советам по ускорению вашего сайта. Эти советы особенно подойдут владельцам порталов, созданных на основе CMS, так как проблемы быстрой загрузки страниц чаще всего встречаются как раз на подобных сайтах. Итак, приступим:

1 совет. Оптимизация таблиц стилей

Таблицы стилей очень удобны в применении и должны использоваться на всех без исключения порталах. Часто бывает, особенно при использовании CMS, что таких таблиц стилей оказывается несколько, а, следовательно, браузер посылает запрос для каждой, на что тратится больше времени.

В связи с этим первый совет: объединяйте все существующие таблицы стилей в один файл. Кроме того, этот полученный файл можно и нужно оптимизировать. Удаляйте ненужные строки, пробелы, сокращайте информацию о цветах — например, заменяя белый цвет в написании «#ffffff;» на более короткое «#fff;», что в конечном результате скажется на размере полученного файла и ускорит процесс его загрузки. Подключать таблицы стилей в коде страницы лучше всего в области тегов HEAD, то есть в верхней части страницы.

2 совет. Оптимизация java-скриптов

При использования java-скриптов часто приходится подключать соответствующие библиотеки для их правильной работы. Часто эти библиотеки подгружаются непосредственно из файлов сайта, тогда как можно подгружать их в более сжатом виде со специализированных сайтов в Интернете, например, с сервисов google.

Кроме того, коды самих скриптов, впрочем, как и строки подключения их библиотек, в отличие от таблиц стилей, следует помещать в самый конец страниц вашего сайта. Это связано с тем, что браузер, встречая java-код на своем пути, прекращает загрузку страницы до тех пор, пока не обработает этот код полностью. Кроме того, как и в случае с таблицами стилей, файлы со скриптами также стоит объединять. Здесь вам на помощь придут специальные сервисы, которые выполнят слияние быстро и качественно.

3 совет. Используйте css спрайты

Помимо картинок, которые подгружаются на ваш сайт динамически, например, в ходе исполнения php-кода, существует также множество картинок, которые объявляются в css файле вашего сайта. Для каждой из них также формируется отдельный запрос.

Но в случае применения технологии css-спрайтов все множество запросов на картинки можно заменить одним единственным. Суть метода состоит в том, что создается всего одна картинка, на которую в определенные позиции с заранее известными координатами помещаются несколько, обычно до 20, которые ранее подгружались поодиночке.

И теперь вместо строк с подключением каждой из картинок вы каждый раз пишете одну и ту же строку с вызовом одной общей, созданной нами, и с помощью указания определенных отступов, а проще говоря, координат, указываете местоположение той конкретной картинки, которая вам необходима. Таким образом нам удается сократить число запросов браузера с 20 до 1!

4 совет. Используйте технологию кэширования страниц вашего сайта

Если ваш ресурс не подразумевает постоянного изменения контента, вам просто необходимо использовать технологию кэширования страниц. В этом случае при повторном обращении пользователя к страницам вашего сайта браузеру уже не нужно каждый раз посылать запросы на сервер, а достаточно лишь обратиться за информацией в кэш, что значительно сократит скорость загрузки ваших страниц.

Вот, пожалуй, основные методы оптимизации ресурса с целью его ускорения. Помимо перечисленных, существует множество других способов, но о них, если интересно, мы поговорим в следующий раз.

И пусть страницы вашего сайта загружаются с быстротой молнии!

Обновлено 30.07.2015
Статья размещена на сайте 8.05.2011

Комментарии (6):

Чтобы оставить комментарий зарегистрируйтесь или войдите на сайт

Войти через социальные сети:

  • Уф, как меня раздражают регистрации на сайте! прошу прощения за откровенность! если можно у меня вопрос пока по первому пункту...
    что значит "объединяйте все существующие таблицы стилей"? Движок Джумла - это надо из всех CSS файлов сделать один? в смысле по копировать в один?!

  • Даа, хорошо написано. Узнал про спрайты, и про то, что java-скрипты нужно вызывать в конце файла, до этого не понимал, почему некоторые так и делают.

  • Юрий  Бурцев Юрий Бурцев Читатель 23 мая 2011 в 15:46 отредактирован 25 мая 2018 в 08:53
    вроде норм

    java скрипты по возможности надо вообще удалять
    3 совет про css порадовал, дейстительно очень полезная вещ!
    автор правильно описал об оптимизации таблиц стилей, но думаю что оптимизация изображений не менее важна.
    Что лучше, когда загружаются картинки общим объёмом 2 мб или 70 кб ? (риторический вопрос)
    На вой взгляд, лучще всего конвертировать изображения в .gif при правильном сжатии качество не ухучшится, а вес заметно уменьшится.

    Оценка статьи: 3

    • Марианна Власова Марианна Власова Бывший главный редактор 23 мая 2011 в 18:23

      Юрий Бурцев, мы тут вот говорили о том, что gif без потерь не сжимает.
      А вопрос о размере действительно риторический, и например в различных CMS загружаемые изображения сжимаются автоматически. Ну а те, кто CMS не пользуется, разницу понимают.