14 Октября

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

Время последнего обновления записи: 2013-10-14 в 18:20 автор: Денис Воеводин

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

Сервисы для замера скорости загрузки страниц сайта

Из множества сервисов, которые я использовал для проверки скорости загрузки страниц сайта, мне понравился сервис: Pingdom.com, который наглядно демонстрирует каждую деталь сайта и скорость загрузки необходимой страницы, например для главной страницы блога Webimbo.ru, при выборе в настройках — «Amsterdam, Netherlands», скорость загрузки сайта будет составлять 1,08 секунды, что не так уж и плохо.Основная информация о загрузке страниц блога webimbo.ru при проверке через сервис pingdom.comНиже представлена вся необходимая информация, которая предоставляется сервисом по скорости соединения, ожидания и ответа как сторонних серверов, данные с которых запрашиваются, так и внутреннего сервера.Демонстрация сервиса pingdom.ru

Из предоставленных данных можно определить самые медленные моменты и улучшить скорость загрузки страниц сайта, повлияв на данные места. В этом поможет замечательный инструмент, который разработан компанией Google — Google PageSpeed Insights.

Оптимизируем скорость загрузки страниц сайта используя Google PageSpeed

На самом деле все проще чем кажется на первый взгляд, но хочу отметить тот момент, что при использовании Google PageSpeed Insights не видно всех моментов, которые могут ухудшать скорость загрузки страниц сайта, но он вполне подойдет, выполнив все пункты по требованию сервиса, вы сможете значительно улучшить скорость. Для более подробного анализа факторов влияющих на скорость загрузки сайта, необходимо воспользоваться браузером Mozilla Firefox с дополнением Firebug и плагином PageSpeed для Firefox.

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

Итак, после установки плагина и дополнения firebug в правом верхнем углу появится кнопка с изображением жука.

Firefox и дополнение FirebugПерейдите на сайт, анализ для которого необходимо выполнить, нажмите на кнопку с жуком. Перед вами откроется окно, последняя вкладка которого будет называться Page Speed.Firefox+Firebug - вкладка Page SpeedПосле нажатия на вкладку появится окно с кнопкой Analyze Performance, необходимо нажать на кнопку и ожидать пока страница проанализируется. Далее Перед Вами появится список всех рекомендаций, которые требуется выполнить для улучшения скорости загрузки страниц сайта. После недолгих манипуляций над содержимым страниц блога, я добился результата по PageSpeed = 94 из 100 возможных баллов, что весьма неплохо, можно конечно и улучшить результат, но пока это не критично, главное, что все основные мешающие моменты устранил. Показатели PageSpeed после выполнения рекомендаций по оптимизации

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

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

Включите сжатие — для настройки сжатия xml, css, js и html в формат gzip требуется добавить следующий код в файл .htaccess на ftp сервере сайта:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
</ifmodule>
</IfModule>

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

Используйте кэш браузера, здесь же указывается валидатор кэша и выполняется пункт Укажите валидатор Кэша – необходимо использовать кэширование на стороне браузера, т.е. клиента, требуется добавить в .htaccess следующие строки кода:

<IfModule mod_headers.c>
<FilesMatch .*\.(js|css)$>
Header set Cache-control: private
</FilesMatch>
<FilesMatch .*\.(gif|jpg|png)$>
Header set Cache-control: public
</FilesMatch>
</IfModule>
FileETag MTime Size
<IfModule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 7 day"
</filesmatch>
</IfModule>
<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

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

Оптимизируйте изображения – для того, чтобы уменьшить размер страниц и соответственно увеличить скорость загрузки, потребуется воспользоваться принципом копирования всех изображений сайта с ftp сервера и пакетной загрузки для дальнейшей обработки в сервис http://www.smushit.com/, процедура достаточно долгая, если на Вашем сайте количество изображений изменяется тысячами. Могут возникнуть ошибки того, что gif файлы будут пережаты в jpg или png, при этом изменяется имя файла, требуется учесть данный момент, если есть изображения формата gif, лучше их загружать отдельно и потом править вручную. Рекомендации: 

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

Отложение синтаксического анализа java-скрипт – можно запустить скрипт некоторого времени загрузки документа, воспользовавшись кодом:

<script type="text/javascript">
function onLoadScript () {
var scri = document.createElement('script');
scri.src = '<путь к файлу>';
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, <количество миллисекунд после загрузки документа>)}
</script>

Пример:

<script type="text/javascript">
function onLoadScript () {
var scri = document.createElement('script');
scri.src = 'jq.js';
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 2000)}
</script>

Сократить JS скрипты и CSS стили – необходимо воспользоваться сервисом: http://www.refresh-sf.com/yui/, который удаляет лишние пробелы в коде, тем самым экономит место файла.

Сократите HTML – для сокращения HTML страницы можно удалить лишние пробелы и вспомогательные знаки кавычек, которые можно опустить в конкретных ситуациях

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

Укажите заголовок Vary: Accept-Encoding – все файлы, открытые для кеширования должны возвращать заголовок, достаточно добавить код в .htaccess на ftp сервере:

<IfModule mod_headers.c>
<FilesMatch .*\.(js|css)$>
Header set Cache-control: private
Header append Vary Accept-Encoding
</FilesMatch>
<FilesMatch .*\.(gif|jpg|png)$>
Header set Cache-control: public
</FilesMatch>
</IfModule>

P.S.: Для сокращения количества запросов к файлам, необходимо сократить количество CSS стилей и объединить их в 1 файл, скрипты js в идеале тоже необходимо объединить в 1 файл.

Заключение

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

С использованием рекомендаций, которые предоставлял PageSpeed, мне удалось увеличить скорость загрузки почти в 3 раза и сократить время с 2,65 до 1,08 секунды.

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

Успехов Вам в оптимизации скорости страниц сайта!

Увеличиваем скорость загрузки страниц сайта: 7 комментариев

  1. Кирилл

    По себе могу сказать, что если страница загружается дольше 5 секунд, возвращаться на подобный сайт хочется далеко не всегда. За исключением лишь тех случаев, если он очень для меня полезен. Тем более, что в выдаче быстрозагружаемый сайт занимает более выгодные позиции, чем конкуренты. Про Google PageSpeed слышал много хорошего, так-что, при необходимости обязательно воспользуюсь.

    1. Денис Воеводин Автор записи

      Хоть и скорость загрузки сайта не влияет прямо на позиции для сайтов, созданных под ПК, но для мобильного ранжирования скорость загрузки является весомым аргументом, поэтому принебрегать скоростью не нужно. А Page Speed позволяет отследить насколько эффективно загружаются обе версии сайтов — мобильная и для ПК, причем чек-лист демонстрирует в каком именно пункте проблема со скоростью загрузки сайта.

  2. Владимир

    Ой, не знаю чего, но у меня с самого создания сайта были что-то неполадки со скоростью. Честно говоря думал, что просто комп подвисает. Попробовал попробовать увеличить скорость по инструкции , что в статье. То пока мне только удалось проверить скорость при помощи Pingdom.com. Кстати сервис бомба, показал мою черепашью скорость=)

    1. Денис Воеводин Автор записи

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

  3. Валера

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

    1. Денис Воеводин Автор записи

      Если выполнить рекомендации, которые предоставляет Google Page Speed, этого будет вполне достаточно для того, чтобы увеличить скорость загрузки страниц сайта.

  4. Татьяна

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *