Есть миллион способов увеличить производительность вашего сайта, т.е. снизить нагрузки на сервер. Набор методов очень разнообразный, но подразделяется на три категории: аппаратные методы, методы оптимизации серверных сценариев (ASP, PHP, Perl, Python и т.п.) и методы оптимизации "лица" (front-end) сайта, т.е. того, что видит посетитель на Вашем сайте.

Эта статья ориентирована на вторую категорию, поскольку эти способы требуют меньших затрат и знаний, и зачастую, обеспечивают неплохую оптимизацию производительности Вашего веб-сайта. К тому же Front-End и его компоненты (HTML, CSS, JavaScript, изображения и т.п.) являются наиболее доступными для большинства веб-мастеров.

Если Вы пользуетесь обычным хостингом, то у Вас может не быть достаточно прав для конфигурирования и настройки сервера. К тому же даже если у Вас есть соответствующие права доступа, то настройки сервера, системы управления содержимым (CMS, или "движок") и СУБД требуют специальных знаний. Произвести front-end оптимизацию можно собственными силами, потратив исключительно свое время. К тому-же наше "лицо" несет довольно большую нагрузку на показатель времени отклика всего веб-сайта.

1. Проверьте узкие места

Есть замечательное дополнение к Firefox, которое называется FireBug. Он позволяет выяснить какие компоненты запрашиваются посетителем (картинки, CSS, JavaScript, HTML и т.п.), сколько они грузятся и сколько они весят. Основное правило состоит в том, чтобы размер компонентов был минимальным и не превышал 25 кб. Хотя и сильно "дробить" компоненты не стоит. Стоит помнить об ограничении количества одновременных соединений у пользователя.

Закладка Net в Firebug поможет найти большие файлы, которые "тормозят" загрузку сайта.

2. Используйте правильные форматы

Еще один метод уменьшения скорости загрузки страницы является оптимизация графики. Чем меньше будут "весить" наши картинки тем лучше. Стоит знать что, стоит использовать формат JPEG для сложных многоцветных картинок, и форматы GIF и PNG для графиков и т.п.

Необходимо отметить, что открытый формат PNG обеспечивает лучшее сжатие, чем GIF, однако Internet Explorer не всегда корректно его отображает.

3. Минимизируйте размеры CSS и JavaScript документов

Минимизировать размеры CSS и JavaScript-документов можно за счет удаления лишних символов. Например:

.some-class {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}

Может быть конвертирован в:

.some-class{color:#fff;line-height:20px;font-size:9px;}

И при этом будет работать. При этом можно не волноваться, что переформатировать придется вручную. Я недавно писал об утилитах для компрессии и проверки CSS.

Для JavaScript можно воспользоваться утилитами, описанными в этой статье.

Хорошие утилиты компрессии позволяют производить операции декомпрессии. Это может понадобиться в процессе разработки. В конце-концов, можно использовать утилиту типа FireBug, чтобы посмотреть отформатированный вариант ваших исходников.

4. Комбинируйте файлы CSS и файлы JavaScript для уменьшения HTTP-запросов.

Для каждого компонента, который нужен для отображения веб-страницы создается отдельный HTTP-запрос к серверу. К примеру, у нас есть несколько файлов CSS описывающие отображение различных разделов сайта: общее отображение; классы форм; классы различных разделов и т.п. Очевидно, что для каждой группы страниц необходим свой набор из этих файлов.

Метод комбинации заключается в том, что мы создаем по одному файлу CSS, включающему весь необходимый набор классов для отображения группы страниц. При этом содержимое css-файлов для различных групп страниц может (и будет) пересекаться, т.е. содержать часть общего кода. Но в таком случае достаточно одного HTTP-запроса, чтобы получить весь необходимы для отображения набор классов.

Можно автоматизировать процесс с помощью PHP или скомбинировать CSS и/или JavaScript файлы вручную.

В любом случае, мы разгрузим наш вебсервер от лишних запросов.

Для скептиков данного метода могу заметить, что ускорение загрузки будет не только на стороне сервера, но и на стороне клиента, т.е. браузера, которому не придется открывать лишние сокеты, что приводит к незначительным задержкам.

5. Используйте спрайты

Спрайт, в нашем случае, это набор мини-картинок в одном файле. Используя CSS свойство background и координаты нужной нам части картинки, можно вывести требуемую пиктограммку.

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

6. Исключите местный CSS и JavaScript

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

7. Используйте второй сервер для стилей и скриптов

Чтобы разгрузить наш сервер и увеличить конечную скорость загрузки страницы посетителем можно расположить наши статические файлы на другом сервере. Тем самым мы, во-первых, радикально уменьшим количество запросов к нашему серверу. Во-вторых, уменьшим количество одновременных запросов к серверу на стороне клиента, что позволит загружать параллельно страницу с нашего основного сервера, а CSS и JS-файлы (которые, собственно и выносятся на другой сервер) со второго. К тому же в браузерах часто стоит ограничение на количество одновременных запросов к одному серверу. Данный метод позволяет обойти это ограничение.

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

8. Внешние серверы для библиотек, фреймворков, изображений и т.п.

Если вы используете JavaScript фреймворки или библиотеки, то вполне можете воспользоваться ими через Google Ajax Libraries API. Сейчас поддерживаются следующие библиотеки и фреймворки:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

Работу по раздаче RSS-ленты можно поручить FeedBurner.

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

9. Итоги

Я описал ряд несложных методов для снижения нагрузки на наш сервер, увеличения скорости загрузки нашего сайта посетителем, что может хорошо отразиться не только на стоимости содержания проекта, но и на впечатлении посетителя.

Спасибо за внимание. Буду рад конструктивным комментариям. Если Возникнут более конкретные вопросы по методикам – пишите, обсудим.

Постовой:

Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту страницу! Добавить на Newsland.ru Добавить на СМИ2 Добавить на RUmarkz Добавить на Ваау! Добавить на rucity.com Добавить в закладки МоёМесто.ru
Link:

Эта статья была опубликована в в среда, февраля 18, 2009 at 7:01 pm в рубрике Dojo, Google, How to, JQuery, Prototype, Вебмастеру, Полезное, Разработка, Сервисы, Фишки, Фреймворки. Вы можете отслеживать ответы на нее через RSS 2.0. Вы можете оставить отзыв, или trackback из вашего сайта.


5 комментариев to “Как увеличить производительность вашего сайта”

  1. Иван on февраля 26, 2009 at 3:15 pm

    Толково. Пойду изучать возможности Google Pages.

  2. Хелен on февраля 28, 2009 at 1:23 pm

    Спасибо за подсказки. Никогда не знаеш где узкое место

  3. Jeleonora Bezrukov on марта 5, 2009 at 10:39 am

    Стоит ждать продолжения ?

  4. Яков on марта 12, 2009 at 2:04 pm

    Можно еще добавить такой вариант как сжатие css. Помогает. Также можно и даже нужно оптимизировать все изображения на сайте. ДЛя блогов на вордпрессе маст хав плагин wp-super-cash

  5. Дмитрий on сентября 26, 2011 at 5:51 am

    Статья хороша.

    Есть еще варианты, но это более глубокое познание.

    Кэширование html, кэширование запросов к бд и хранение результатов в оперативе (memcache), отказ от реляционных структур данных при условии большого кол-ва обрабатываемой информации.

    ZPC для php (разовая компиляция кода).
    Psyco для python.

    Различные профилировщики для поиска дыр в производительности.

    Можно продолжать до бесконечности.

Оставить отзыв