Оптимизируйте время загрузки в качестве показателя SEO

1. Почему важно быстрое время загрузки
2. Основа мероприятий
3. Использовать кеширование в браузере
4. Как применяется кэширование в браузере?
5. Содержание сайта с помощью gzip compress
6. Вариант «mod_gzip»:
7. Вариант «mod_deflate»:
8. Используйте сеть доставки контента (CDN)
9. Что такое CDN?
10. Что хорошего в CDN?
11. Для графики используйте CSS3 и SVG
12. Использовать протокол HTTPS
13. HTTPS-шифрование и протокол HTTP / 2
14. Объединить, свернуть и поменять файл CSS
15. Правильное размещение JavaScript
16. Что происходит, когда браузер загружает сайт с помощью внешнего JavaScript?
17. Оптимизировать картинки
18. вывод

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

Почему важно быстрое время загрузки

В первую очередь быстрое время загрузки помогает пользователю, а показатель отказов снижается. Кроме того, по данным Google, более половины поисковых запросов поступают с мобильных устройств - планшеты не включены. Таким образом, смартфоны являются наиболее часто используемым средством доступа к Интернету и достаточным основанием для того, чтобы Google уделял основное внимание мобильному поиску. Pageload играет здесь важную роль, поскольку мобильные запросы часто поступают через сети 3G или 4G. Они имеют более высокие задержки (задержки) и, следовательно, более длительное время зарядки, чем вызовы по широкополосному соединению. Поэтому, если вы не используете оптимизированный для мобильных устройств веб-сайт, вам придется ожидать все большего и большего с потерями в рейтинге.

Основа мероприятий

Чтобы создать это руководство, я ориентировался на Pagespeed Insights от Google. Но также может Pingdom быть использованы. Оба инструмента создают список дел и показывают удовлетворенные критерии. Инструмент от Pingdom еще более детален. Важно отметить, что Google Pagespeed Insights не является бесспорным и ничего не говорит о эффективном времени загрузки сайта.

Самый простой способ оценить время загрузки страницы - это Chrome Developer Tool. Просто откройте инструменты разработчика и обновите страницу в разделе «Сеть». В нижней части графика водопад вы найдете время загрузки DOM (синий) и полное время загрузки (красный).

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

Использовать кеширование в браузере

Что такое кеширование в браузере?

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

Как применяется кэширование в браузере?

Чтобы настроить браузер на сохранение кэшированного содержимого, используйте файл .htaccess на сервере. Если вы не знаете, где найти файл .htaccess или если у вас нет прав на редактирование файла, лучше всего обратиться к провайдеру веб-хостинга. Предполагая, что веб-сайт размещен на сервере Apache и модуль «mod_expires.c» активирован, вы можете, например, вставить следующий фрагмент кода в файл .htaccess:

ExpiresActive On ExpiresByType image / gif "доступ 1 месяц" ExpiresByType image / ico "доступ 1 месяц" ExpiresByType image / jpeg "доступ 1 месяц" ExpiresByType image / jpg "доступ 1 месяц" ExpiresByType image / png "доступ 1 месяц «ExpiresByType image / svg + xml» доступ 1 месяц «ExpiresByType text / css» доступ 1 месяц «ExpiresByType text / javascript» доступ 1 месяц «ExpiresByType application / x-javascript» доступ 1 месяц «ExpiresByType application / javascript» доступ 1 месяц "</ IfModule>

Приведенный выше фрагмент кода теперь указывает, что изображения с суффиксом .gif, .jpg, .png и т. Д. Остаются в кеше буфера обмена в течение одного месяца, если пользователь не удалит кеш браузера вручную. Команды памяти могут быть скорректированы в соответствии с вашими потребностями. Подробное руководство с соответствующими параметрами настройки можно найти здесь.

Содержание сайта с помощью gzip compress

Сжатие веб-сайта похоже на «архивирование» файла. Что происходит? Когда пользователь вызывает веб-сайт, сервер «упаковывает» содержимое и отправляет его в сжатом виде в браузер, который снова «распаковывает» информацию и отображает ее как обычно. Таким образом, между сервером и браузером передается меньше данных, что ускоряет загрузку страниц.

Это также можно решить с помощью файла .htaccess. Есть два способа включить сжатие Gzip. Либо вы используете «mod_gzip» или «mod_deflate». Какой вариант использовать в конечном итоге, не имеет значения. Оба варианта максимально сжимают содержимое сайта. Если вариант не поддерживается сервером. Лучший способ узнать у веб-хостинга, какое сжатие подходит лучше всего. Фрагменты кода для сервера Apache выглядят так:

Вариант «mod_gzip»:

<ifModule mod_gzip.c> mod_gzip_on Да mod_gzip_dechunk Да файл mod_gzip_item_include. (html? | txt | css | js | php | pl) $ mod_gzip_item_include обработчик ^ cgi-скрипт . * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Кодировка содержимого:. * gzip. * </ ifModule>

Вариант «mod_deflate»:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE текст / html AddOutputFilterByType DEFLATE текст / CSS AddOutputFilterByType DEFLATE текст / JavaScript AddOutputFilterByType DEFLATE текст / XML AddOutputFilterByType DEFLATE текст / обычный AddOutputFilterByType DEFLATE изображение / х-значок AddOutputFilterByType DEFLATE изображение / SVG + XML AddOutputFilterByType DEFLATE приложений / Новости + XML AddOutputFilterByType DEFLATE приложение / JavaScript AddOutputFilterByType DEFLATE применение / х-Java-приложение AddOutputFilterByType DEFLATE / XML AddOutputFilterByType DEFLATE приложение / XHTML + XML AddOutputFilterByType приложение DEFLATE / х-шрифт приложение AddOutputFilterByType DEFLATE / х-шрифт TrueType AddOutputFilterByType DEFLATE применение / х-Font- ttf AddOutputFilterByType DEFLATE-приложение / x-font-otf AddOutputFilterByType DEFLATE-приложение / x-font-opentype AddOutputFilterByType DEFLATE-приложение / vnd.ms-fontobject AddOutputFilterByTyTyTyTyTFTFTFTTF ype DEFLATE font / opentype # Для старых браузеров, которые не могут обрабатывать сжатие BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip BrowserMatch \ bMSIE! no-gzip! gzip -only-text / html </ IfModule>

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

Используйте сеть доставки контента (CDN)

Сеть доставки контента должна использоваться, если вы размещаете на веб-сайте контент с интенсивными вычислениями. Это могут быть рекламные баннеры, видео, а также файлы Javascript и CSS.

Что такое CDN?

Сеть доставки контента - это обычно сеть серверов в разных точках мира. Данные хранятся на исходном сервере (исходном сервере), а их копии распространяются на так называемых серверах реплик через систему распространения. «Доставка контента» происходит с географически ближайшего сервера. Местоположение пользователя определяется через IP-адрес.

Что хорошего в CDN?

Прежде всего, нагрузка на собственный сервер избавлена, потому что данные предоставляются через CDN. Кроме того, серверы могут открывать только определенное количество соединений для извлечения данных. Если вы используете CDN, ваши данные доступны с нескольких серверов. Таким образом, данные могут быть загружены одновременно, что, в свою очередь, ускоряет загрузку страниц. Возможно, самый известный CDN - Cloudflare.

Для графики используйте CSS3 и SVG

Совет может быть не таким уж новым, но, на мой взгляд, все же стоит упомянуть: простые элементы дизайна, такие как кнопки или разделители и т. Д., Должны быть реализованы с помощью CSS3. Код CSS3 во всех случаях содержит гораздо меньше данных, чем PNG или JPG. Кроме того, графика, созданная с помощью CSS3, такая же четкая, как японские ножи.

Если графика больше не может быть создана с помощью CSS3, есть возможность создать ее в Sketch или Illustrator и сохранить в формате SVG. Почему SVG? Файлы SVG основаны на векторах и, следовательно, масштабируются без потерь и обычно меньше, чем PNG и JPG.

Использовать протокол HTTPS

Ну, протокол HTTPS не делает сайт быстрее, но он дает браузеру возможность подключаться к серверу с HTTP / 2, если позволяют обстоятельства.

HTTPS-шифрование и протокол HTTP / 2

HTTP является стандартом для передачи данных между сервером и клиентом. HTTP / 2 - последняя версия протокола и позволяет асинхронную загрузку данных. Таким образом, контент может быть загружен одновременно, а не как раньше. Это значительно ускоряет время загрузки. Чтобы установить соединение с HTTP / 2, снова требуется HTTPS-шифрование. Для шифрования HTTPS вам нужен цифровой сертификат «SSL», который можно запросить у большинства веб-хостов. Самый простой и наиболее широко используемый вариант - « Давайте зашифруем ». Сертификат поддерживается всеми современными браузерами.

Объединить, свернуть и поменять файл CSS

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

Для дальнейшего уменьшения объема данных существует возможность минимизации файлов CSS и JS. Когда свернуто, пробелы сбрасываются и некоторые команды объединяются, что затем уменьшает размер файла. К сожалению, минимизация делает файл слишком запутанным. Совет: Для лучшей ориентации в файлах можно использовать многострочные комментарии (/ * Вот комментарий * /) . Удобный инструмент для минимизации данных преуменьшать ,

Правильное размещение JavaScript

По сути, JavaScript может находиться в любом месте HTML-документа - как в <head>, так и в <body>. Однако из соображений производительности существуют также правила, которые следует учитывать. Рекомендуется встраивать CSS-файлы и внешние сценарии в область <head> и размещать локальные сценарии в конце документа HTML, ДО КОНЕЧНОГО дня </ body>. В любом случае файлы Javascript должны загружаться ПОСЛЕ файлов CSS. Почему это так? На данный момент немного теории:

Что происходит, когда браузер загружает сайт с помощью внешнего JavaScript?

1. Браузер обращается к HTML (например, index.html)
2. Браузер анализирует HTML. При разборе браузер интерпретирует структуру сайта.
3. Синтаксический анализатор обнаруживает тег <script>, который указывает на внешний файл JavaScript и извлекает информацию из внешнего файла JavaScript, а тем временем прекращает загрузку оставшихся файлов.
4. Если внешний файл загружен, он сначала будет выполнен браузером.
5. Когда внешний файл завершил выполнение, синтаксический анализатор продолжает работу до той точки, где он был «остановлен» перед внешним файлом.

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

Если вы хотите связать файлы JavaScript в <head> страницы, вы можете использовать атрибут JavaScript «async». Этот атрибут указывает браузеру асинхронно загружать сценарий с остальной частью страницы, тем самым продолжая загрузку информации без «остановки».

пример:

<script type = 'text / javascript' src = 'path / to / script.js' async> </ script>

Оптимизировать картинки

Наконец-то классика. Самый простой и быстрый способ оптимизировать время загрузки - уменьшить объем данных на изображениях. Здесь разумно быть. Просто сжимать изображения для небольшого количества данных и принимать плохое качество за это неправильно. Изображения должны быть красивыми, несмотря на сжатие. Глаз наконец-то ест с.

Прежде чем сводить веб-дизайнера с ума от его требований к сжатию, лучше составить четкий план того, как визуализировать изображения. В лучшем случае это компромисс между низким объемом данных и качеством. Для сжатия JPG я рекомендую значение от 60 до 80%. Если это большие изображения, вы можете иногда до 50%. Я советую против более низких значений.

Соответственно подходящий формат изображения все еще должен быть выбран. Для фотографий я рекомендую формат JPG и для изображений, которые требуют прозрачных пленок, формат PNG. GIF следует использовать только для движущихся изображений, так как их глубина цвета в 256 цветов относительно мала, но они допускают последовательность изображений. В зависимости от количества изображений / последовательности изображений GIF могут быть действительно большими.

Другой способ оптимизации - встраивание изображений с использованием CSS. С медиазапросами могут быть адресованы разные размеры экрана, и, таким образом, они будут воспроизводиться в зависимости от области просмотра. Для мобильных устройств оптимизированные изображения можно адресовать / воспроизводить отдельно.

Лучшим элементом управления для расчета изображений является «Экспорт для Интернета» в Photoshop. Бесплатный инструмент для оптимизации размера изображения (при условии, что у вас есть Lightroom) является JPEG Optimizer ,

вывод

Любой, кто следует всем советам, сильно ускорит время загрузки своего сайта. Даже индивидуальные меры могут многое сделать. Во-первых, проанализируйте свой веб-сайт с помощью предпочтительного инструмента Pagespeed Tester, чтобы выяснить, где нужно предпринять какие-либо действия. Документируйте, где ботинок давит, прежде чем вводить его в действие, и проведите еще одно испытание на скорость страницы после того, как меры были приняты. Таким образом, у вас есть прямое сравнение улучшения загрузки страниц на вашем сайте и документация их усилий.

Похожие

Комментарии