Увеличение скорости загрузки сайта

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

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

  • вы разрабатываете новый проект
  • вы оптимизируете уже готовый

С первой ситуацией намного проще, так как вы контролируете процесс создания и можете в любой момент внести коррективы или изменить архитектуру или алгоритм работы. Использование паттерна MVC зарекомендовало себя на практике. Рекомендую использовать легковесные и быстрые MVC фреймворки типа Codeigniter, Kohana, Yii. Последнему отдается большее предпочтение, так как он вобрал лучшие моменты первых двух.

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

Со второй ситуацией дела обстоят намного сложнее, так как свобода действий ограничена существующим кодом.

Для того, чтобы заставить сайт работать быстро, необходимо следовать этим правилам:

Профайлинг

Для начала необходимо определить смабые места web приложения. Для того, чтобы бороться с проблемой, нужно сперва ее обнаружить. Проанализируйте работу приложения, время выполнения отдельных модулей и потребляемую ими память. Это поможет для составления стратегии работы. Рекомендую Xdebug.

Хороший сервер

Выбирайте хороший хостинг. Качественный хостинг как хорошая машина — едет быстро, ломается редко. И стоит не дешево. Но за качество всегда нужно платить. Для средненагруженного проекта я бы рекомендовал VDS хостинг. Вся его прелесть состоит в том, что вы можете конфигурировать параметры сервера как пожелаете.

Оптимизация БД

Оптимизация баз данных — это целая наука и искусство разом. В двух словах рассказать невозможно. Хочу отметить несколько моментов:

  • не забывайте про использование индексов. Если необходимо часто вынимать данные из БД — проставьте индексы — это увеличит скорость выборки, если необходимо часто записывать данные в БД — удалите индексы — это так же увеличит скорость записи
  • избегайте избыточности данных
  • оптимизируйте запросы. Используйте постраничный вывод — это уменьшит нагрузку на сервер БД

Кеширование запросов к БД

На данный момент существует множество механизмов кеширование результатов выполнения запросов к БД. Ищите и найдете!

Оптимизация кода

Оптимизация php кода это тема для отдельной статьи. Отмечу лишь некоторые моменты:

  • используйте require_once вместо require и include_once вместо include
  • помните, что 100 маленьких include медленней, чем один большой
  • используйте ООП там, где это действительно необходимо
  • откажитесь от использования глобальных переменных
  • не вставляйте переменные в текстовые строки. Используйте конкатенацию

Кеширование байт кода

PHP — язык интерпритируемый. Обработка PHP сценария выглядит следующим образом:

  • чтение файла
  • генерация байткода
  • выполнение байткода
  • отдача результата

Генерация байткода выполняется постоянно и занимает значительную часть времени от начала процесса до получения результата. И так каждый раз. Чтобы сократить это время используют кеширование байткода, выполняемое специальными модулями — PHP акселераторами. Вот самые популярные из них: Alternative PHP Cache (APC), eAccelerator, PhpExpress.

Использование PHP акселераторов существенно сократит время генерации скрипта, и, соответственно, увеличит скорость загрузки сайта.

Оптимизация HTML кода

Оптимизация HTML кода напрямую связана с поисковой оптимизацией. Так уж вышло, что поисковики отдают большее предпочтение сайтам с правильным кодом, чем таким же сайтам, но с неправильным. Пара моментов, которыми не следует пренебрегать:

  • есть возможность — переходите на HTML5
  • используйте только блочную верстку. таблицы нужны только для отображения табличной информации
  • выносите css и js в отдельные файлы. Используйте css классы. Умело используйте наследование стилей в css
  • сжимайте HTML код. Удаляйте лишние пробелы, переносы строк, табуляции. Пробелы и табуляции — тоже символы, хотя и невидимые — они тоже состоят из ноликов и единиц!
  • используйте спрайты изображений для css. Помните: лучше загрузить одну большую картинку, чем 100 маленьких
  • сжимайте js код

Кеширование HTML кода

Хороший механизм кеширования — залог успеха. Лучше один раз сгенерировать и сохранить HTML код, чем делать это при каждом новом запросе. Используйте Smarty. В нем уже есть готовый механизм кеширования. Алгоритм следующий:

  1. проверяем наличие и актуальность текущей странице в кеше
    • страница есть? Переходим к пункту 2
    • страницы нет? Выполняем запросы к БД. Формируем содержимое страницы. Генерируем страницу и сохраняем ее в кеш. Переходим к пункту 2
  2. выводим содержимое кешированной страницы

Этот подход избавит сервер от необходимости постоянно генерировать страницу, содержание которой очень редко меняется. Но этот подход не подойдет для динамического контента, содержание которого именяется постоянно — комментарии, статистика и тд. Грамотное использование кеширования HTML кода так же сократит скорость загрузки сайта.

Использовать сжатие

Многие браузеры поддерживают gzip сжатие. Для HTML страниц коэфициент сжатия методом GZip составляет 0.2-0.3, т.е. данные сжимаются в 3-5 раз, что даёт такое же ускорение закачки страницы при прочих равных условиях. Сжать графику, флеш и другой мультимедийный контент сильно не получится, а вот текст — на здоровье!

Для осуществления сжатия данных должно выполнятся 2 условия:

  • браузер должен поддерживать сжатие
  • на сервере должен быть настроен соответствующий модуль

Если есть доступ к серверу — проблем со вторым пунктом быть не должно.

Проксирование http запросов. Разделение сервера на frontend и backend

Классическая схема высоконагруженных серверов: frontend — Nginx, backend — Apache. Вся статика (изображения, JS, css, архивы и прочие файлы) отдаются браузеру напрямую, без использования Apache. А php скрипты, в свою очередь, обрабатываются Apache. Такое разделение дает существенный вклад в увеличение скорости загрузки сайта на средненагруженном проекте. Этот вариант доступен, если вы имеете доступ к настройке своего сервера и можете самостоятельно установить Nginx.

Оптимизация изображений

Тут необходимо найти золотую середину — баланс между размером изображения и его качеством. На помощь прийдут многочисленные оптимизаторы изображений. Лично я использую photoshop во время верстки — все изображения я сохраняю через Save as web. Если необходимо массовое преобразование — FastStone.

Важно:

  • приводите размеры изображений к общему знаменателю — либо одинаковая ширирина, либо высота. Это по крайтей мере эстетично
  • не забудьте выпилить EXIF информацию у изображения — для браузера она ни к чему
  • проставляйте размеры изображения посредством атрибутов width и height тега img

Разумное использование внешних сервисов и скриптов

Не стоит на радостях вешать никому не нужные виджеты всевозможных сторонних сервисов (погода, курсы валют, переводчики и прочее), баннеры и пузомерки бесчисленных рейтингов. Используйте только реально необходимые вещи, так как лишний баннер или пузомерка — это дополнительный запрос и плюс ко времени загрузки сайта.

Для оценки скорости загрузки сайта рекомендую применять замечательный плагин для firefox — Page Speed.

Интересное

Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...
Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...

Комментарии

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

    Войти через OpenID

    рейтинг1+-
    Популярные
    Точки входа
    Наверх