Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess

Logo
Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess

В этой статье я хочу поделиться своим опытом оптимизации и ускорения загрузки сайтов. В качестве примера будет использоваться блог на Wodrpress, так как он идеально подходит для приведения примеров. В дополнение ко всему это очень популярная CMS и многим будет интересно узнать, как можно ускорить загрузку сайта и повысить Page Speed страниц. В этой статье я очень подробно и пошагово буду объяснять, как оптимизировать и ускорить свой сайт, поэтому любой желающий даже без знаний html, css и php сможет без проблем ускорить свой сайт. На этом вступительная часть заканчивается, и мы сразу переходим к делу.

Подготовка к оптимизации и ускорению загрузки страниц сайта

Первым делом нам нужно подготовить все необходимые инструменты, которые могут нам потребоваться при оптимизации сайта. Для начала нам понадобится браузер Mozilla Firefox. Я выбрал именно его, так как он наиболее подходящий для наших целей и к нему много разных дополнений. Затем нам потребуется скачать и установить дополнение для Mozilla Firefox. Оно называется Firebug. Скачать Firebug можно перейдя по этой ссылке. После установки этого дополнения нам потребуется скачать и установить еще одно под названием Page Speed, которое можно найти по этому адресу.

Ну и в завершение для оптимизации нашего сайта нам потребуется текстовый редактор Notpad++ для редактирования файлов и FTP клиент для их закачки на сервер. Итак, скачав и установив все необходимые инструменты для оптимизации, переходим к самой оптимизации сайта.

Ускорение загрузки страниц сайта — оптимизация изображений (графики)

Как ни странно, но множество людей забывают оптимизировать изображения на своих сайтах. Сюда входят картинки для статей, логотипы, изображения кнопок и т.д. Одним словом вся графика используемая на сайте. Оптимизировав все изображения, вы можете значительно ускорить загрузку своего сайта за счет уменьшения его веса. Ко всему этому на данный момент поисковики начали учитывать уровень оптимизации, и при равных условиях выше позиции в выдаче займет тот сайт, который сильнее оптимизирован, поэтому стоит отнестись к этому очень серьезно (Поисковая оптимизация страниц сайта).

Первым делом давайте рассмотрим очень хороший сервис для оптимизации изображений от Yahoo. Его вы можете найти по этому адресу. Для начала работы вам нужно перейти во вкладку «UPLOADER», нажать кнопку «Select files and smush» и в открывшемся окне указать изображения, которые вы хотите оптимизировать. После загрузки файлов вам остается лишь скачать их и заменить на сервере.

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

Для того чтобы это проверить зайдите на страницу, которую вы хотите оптимизировать и ускорить, запустите Firebug, который зачастую находится в правом нижнем углу браузера и перейдите во вкладку «Page Speed» после чего нажмите «Analyze Performance». Во вкладке «Optimize images» вы можете увидеть все изображения, которые рекомендуется оптимизировать. Просмотрев их, вы можете принять решение, стоит ли это делать или нет. Если выгода небольшая, то можно оставить как есть. Зачастую в этом случае данная вкладка отмечена зеленой галочкой и это означает, что с оптимизацией изображений у вас все в порядке.

Ускорение загрузки страниц сайта — оптимизация CSS, HTML, PHP

Также немного можно ускорить загрузку сайта сжимая и уменьшая размеры файлов таблиц стилей (Каскадные таблицы стилей CSS — Часть 1 — Необходимый минимум знаний для работы с CSS), а также HTML и PHP файлов. На этом можно выиграть лишние миллисекунды в зависимости от скорости интернета и размера этих самых файлов.

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

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

Итак, давайте подведем итог по оптимизации CSS, HTML и PHP файлов. Одним словом не стоит пренебрегать оптимизацией этих файлов. В большинстве случаев это не даст большого выигрыша по времени, но поможет немного ускорить загрузку вашего сайта.

Также рекомендую по возможности объединять файлы в один, к примеру таблицы стилей. Это поможет ускорить сайт за счет уменьшения количества соединений. Для примера возьмем плагин постраничной навигации в WordPress, о котором я писал в статье «Постраничная навигация в WordPress. Плагин WP-PageNavi и его настройка». Для этого открываем файл CSS плагина WP-PageNavi и копируем все правила в файл CSS вашей темы. Затем заходим в административную панель и отключаем «Использование собственной таблицы стилей».

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

Ускорение загрузки страниц сайта – Включение кэширования браузера. Настройка файла .htaccess

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

Прежде чем приступить к настройке .htaccess хочу заметить, что данный способ не всегда есть выгодным. К примеру, если у вас на сервере статика обрабатывается nginx-ом (нужно будет исключить нужные нам расширения файлов перед активацией кэширования браузером), то включение данной функции может увеличить нагрузку на apache, что приведет к увеличению нагрузки на сервер.

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

<IfModule mod_expires.c>
# включить установку http-заголовков expires
ExpiresActive on
# установление даты по умолчанию (2592000 секунд – 30 дней)
#ExpiresDefault A604800
# можно отсчитывать время от момента последнего изменения запрашиваемого объекта
#ExpiresDefault M604800
# также можно задавать время отдельно для различных типов объектов
# для html-страниц
#ExpiresByType text/html A2592000
# для текстовых файлов
#ExpiresByType text/plain A2592000
# для изображений
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/ico A2592000
#Для файлов CSS и Javascript
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
</IfModule>

Знак «#» перед текстом означает, что строка закомментированная. Чтобы активировать нужные нам настройки просто удалите знак «#» перед «Expires». Если же вы хотите отключить кэширование какого-то объекта, но не хотите удалять код, то просто закомментируйте нужную вам строку, поставив впереди знак «#».

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

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

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

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 8

  • Ильмир

    Спасибо! мне нужно было настроить файл htaccess, потерял настройки.

  • Александр

    Для оптимизации css стилей пользуюсь cleancss.com правда эффекта ощутимого не вижу…
    Для wordpress существуют плагины которые кешируют элементы страниц, поэтому от изменения .htaccess можно отказаться.
    Также чтобы ускорить загрузку главной страницы просто поставьте ограничение на то, чтобы там выводилось не более 5 последних записей (со стандартными настройками там их 10).
    Про сервис яху не знал, а так вся информация и до этого была известна…

  • Денис

    да, css оптимизировал и картинки, а толку нет. подскажите что делать?
    пользовался плагином wp-super kesh и hiper-kesh — страница стала дольше загружаться, деактивировал плагин, теперь всё хорошо. не советую браться за всякие плагины, кеширующие страницы.

  • Дмитрий

    Рекомендую начать с тестирования сайта. Возможно, вы допустили какие-то ошибки при его создании и теперь они дают о себе знать. Вот несколько советов для решения вашей проблемы:
    1. Используйте как можно меньше плагинов. Только самое необходимое. Зачастую можно обойтись 10-20 основными плагинами.
    2. Оптимизируйте тему оформления. Часто разработчики создают очень тяжелые шаблоны и как результат сайт медленно грузится и создает большую нагрузку на сервер.
    3. Перед установкой кэширующих плагинов проверяйте, включено ли кеширование в конфигурационном файле. Если оно не включено, то кэширующие плагины работать не будут. Именно поэтому, наверное, плагины и не дали никакого результата. Или же вы просто были авторизированы на сайте, а для авторизированных пользователей кэширование не работает.

  • Денис

    вроде бы wp-super kesh на то, что вы авторизированы не обращает внимание, или да?
    я вообще ускорил страницу, объединив два .css файла, файл плагина новигации по страницам и style.css моей темы, а также заменил стаоре изображение на новое. страницы стали грузиться за 1 сикунду.

  • Дмитрий

    Да, супер кэш не обращает внимания на то, авторизированы вы или нет. А вот Hyper Cache в данном плане работает просто отлично и отображает все изменения сразу после обновления страницы.

  • Денис

    я отказался от hiper kesh, потому что выводилась какая-то ошибка на английском на странице управления плагином.

  • Дмитрий

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

Оставить комментарий

отменить ответ