Howto: как бороться с медленной загрузкой сайта

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

Существует несколько популярных сервисов для проверки скорости сайта. Большинство из них – англоязычные, с зарубежными серверами (Pingdom Tools, WebPage Analyzer, WebPage Test, GTMetrics). Альтернатива им – «встройка» для браузера Firefox (плагин Firebug PageSpeed).

Более удобными (адаптированными для рунета) можно назвать инструменты «Проверка скорости сайта» от pr-cy и PageSpeed Insights от Google. Они выдают наглядный отчет об ошибках и рекомендации по устранению имеющихся проблем.

Рис. 1. Интерфейс сервиса PageSpeed Insights

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

2.1. Использование переадресации

Актуально для тех, у кого сайт существует в двух версиях: десктопной (site.ru) и мобильной (m.site.ru). Если переадресация настроена неверно, для открытия целевой страницы на мобильном устройстве браузеру потребуется загрузить определенное количество промежуточных страниц, что увеличит нагрузку на сервер и приведет к задержке открытия сайта.

Рис. 2. В нашем примере с этим параметром все в порядке

Что делать?

Уровень сложности: высокий (необходимы навыки работы с HTML-кодом и администрирования веб-сервера).

2.2. Не включено сжатие на веб-сервере

Очень распространенная ошибка. Тормозить загрузку страниц может большой объем ресурсов (css, скрипты, графика, тексты). Если не использовать стандартные приемы сжатия данных, передаваемых по сети, время отклика сайта будет увеличенным.

Рис. 3. В нашем случае мы имеем несколько несжатых svg-файлов

Что делать?

Уровень сложности: высокий (необходимы навыки администрирования веб-сервера).

Многие веб-серверы имеют функцию сжатия файлов перед их отправкой в формат GZIP или deflate, что значительно ускоряет загрузку. Но процесс не происходит автоматически, его необходимо настроить. Простое решение – динамическое сжатие, которое указывается в файле .htaccess.

Пример правила:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/xml application/javascript application/x-javascript text/html text/javascript text/css image/svg+xml </IfModule>

Проверить уровень сжатия можно при помощи сервиса whatsmyip.org.

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

2.3. Не используется браузерное кеширование

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

Рис. 5. В данном примере используется кеш браузера

Что делать?

Уровень сложности: высокий (необходимы навыки администрирования веб-сервера).

2.4. Долгое время ответа сервера

Специалисты Google называют оптимальным ответ сервера в 200 мс. Более высокие показатели требуют проверки и выяснения причины задержки.

Рис. 6. В нашем примере правило выполнено без ошибок

Что делать?

Уровень сложности: высокий (необходимы навыки работы с сервером, хостингом, движком сайта).

2.5. Большой объем кода

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

Рис. 7. Отчет подсказывает, что в нашем случае можно сократить код скриптов

Что делать?

Уровень сложности: простой (необходимо наличие доступа в «админку» сайта).

Сократите объем данных путем сжатия кода. Искать проблемные места не придется – сервис проверки сам укажет на них (см. ссылки в отчете Google PageSpeed или pr-cy). Необходимо пройти по ссылке и скопировать полученную часть кода, затем открыть refresh-sf.com (или любой другой сервис декомпрессии кода) и вставить скопированный код в окно проверки. Программа сама подскажет, какой перед вами тип кода и на какую кнопку необходимо нажать (HTML, CSS или JavaScript).

Нажав кнопку, вы получаете готовый минимизированный код.

Далее необходимо скачать полученный файл и заменить им более раннюю версию (не сокращенную) через систему управления сайтом.

2.6. CSS и JavaScript блокируют отображение основного контента

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

Рис. 8. Мы обнаружили несколько блокирующих внешних ресурсов

Что делать?

Уровень сложности: средний (необходимы навыки работы с HTML-кодом).

2.7. Не оптимизированы изображения

Фотографии и картинки большого размера или некорректного формата становятся серьезным препятствием на пути к высокой скорости загрузки сайта.

Рис. 9. Сервис подсказывает, что оптимизация картинок позволит сократить
их объем вдвое

Что делать?

Уровень сложности: простой (необходимы навыки работы с графическими редакторами и наличие доступа в «админку» сайта).

2.8. Очень большой объем контента в верхней части страницы

Если объем HTML-кода верхней части страницы (все, что находится в секции head) содержит большое количество различных элементов (изображения, стили, скрипты и проч.), потребуются дополнительные запросы браузера к серверу. В результате хедер будет прорисовываться очень медленно, что особенно характерно для открытия сайтов на мобильных устройствах.

Рис. 10. Ошибка не критичная, но желательно доработать хедер для улучшения
передачи данных из HTML

Что делать?

Уровень сложности: средний (необходимы навыки работы с HTML-кодом).

Семинар «Базовый курс SEO»
21 июля, ведущий Александр Митник

Хотите, чтобы ваш сайт вышел на первые места в поисковиках, но не знаете, с чего начать? Базовый курс идеален для новичков, делающих свои первые шаги в области SEO: маркетологов, специалистов по рекламе, а также владельцев сайтов и бизнесов. В рамках практического занятия излагается информация о принципах работы поисковых систем и предлагается практическое руководство по завоеванию ТОП-10 «Яндекса» и других поисковиков.

Семинар «Продвинутый курс SEO»
22 июля, ведущий Александр Митник

Нужна детальная информация о тонкостях поискового продвижения? Хотите стать профессионалом и зарабатывать на SEO? Тогда наш расширенный курс предназначен именно для вас. Основной задачей данного практикума является повышение уже имеющейся квалификации. На семинарском занятии будут рассмотрены вопросы, касающиеся основных стратегий продвижения, изучены аспекты влияния внутренних и внешних факторов ранжирования, детально разобраны особенности поведенческих факторов и освещены основные направления идеологии «Матрикснет».

Семинар «Поисковая кампания в AdWords: от теории к продажам»
28 июля, ведущий Дмитрий Климчуков

В данном мастер-классе Дмитрий подробно покажет в аккаунте AdWords как шаг за шагом создать эффективную поисковую кампанию и максимально полезно использовать доступные функции и инструменты.

Google: содержание всплывающих окон может расцениваться как основной контент
Google может расценивать содержание всплывающих окон как основной контент страницы. Об этом рассказал представитель поиска Джон Мюллер (John Mueller) во время последней видеовстречи для вебмастеров.

Новый Яндекс.Вебмастер больше не в бете.
Яндекс.Вебмастер выходит из беты и становится основной версией. Старая версия сервиса будет поддерживаться еще несколько месяцев на домене old.webmaster.yandex.ru, пока команда Яндекса не убедится, что основные сценарии работы с сервисом сохранены и улучшены.

Вордстат добавил новый оператор для уточнения запросов
Яндекс.Вордстат добавил новый оператор для уточнения запросов. Теперь наряду с операторами «минус», «или», «плюс», «кавычки» и «восклицательный знак» SEO-специалисты могут использовать «квадратные скобки» [], позволяющий зафиксировать порядок слов в запросе.

Как провести SEO-аудит сайта самостоятельно?
Правильно ли вы продвигаете свой сайт, и по каким параметрам это можно оценить? Руководитель информационной поддержки PromoPult Дмитрий Шучалин продолжает обучающий курс, посвященный основам продвижения сайтов, и в этом мастер-классе мы разберемся, как провести seo-аудит самостоятельно, и на что надо обращать внимание в первую очередь.

Просто о сложном: Как правильно оформить техническое задание для дизайнера?
Правильно составленное техническое задание позволит не только в полной мере реализовать вашу идею, но и обоснованно выставить претензии, в случае чего. Ключевой аспект при составлении ТЗ — это его структура. Безусловно, нет стандартизированной формы. Но есть принципиальные моменты, которые должны быть обязательно.

• Ученые выяснили, что динозавры вымерли из-за слоя сажи в атмосфере;
• Ученые научились определять возраст по количеству лайков в Instagram