Оптимизация скорости страницы: как улучшить время загрузки

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

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

Содержание

1. Все, что вам нужно знать о скорости страницы
2. Какие инструменты следует использовать для измерения скорости страницы
3. Сколько времени должен загружаться сайт
4. Методы оптимизации скорости страницы
5. Меры OnPage для быстрого веб-сайта
6. Автоматическая оптимизация скорости страницы

Все, что вам нужно знать о скорости страницы

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

Есть несколько причин, почему быстрое время загрузки очень важно:

1. Положительный пользовательский опыт: Google считает, что более длительное время загрузки серьезно влияет на показатель отказов. На самом деле, увеличение времени загрузки с 1 до 6 секунд может увеличить показатель отказов на 106%, поэтому теперь это один из основных веб-жизненных показателей производительности (см. ниже).

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

3. Оптимизация коэффициента конверсии. Согласно этому исследованию, задержка загрузки на одну секунду может снизить конверсию на семь процентов. Поначалу это может показаться не таким уж значительным, но если ваш интернет-магазин генерирует ежедневный оборот в 1000 евро, задержка загрузки на одну секунду может привести к потере 70 евро в день, около 2100 евро в месяц. Если вы подсчитаете это на годовой основе, низкая скорость страницы станет настоящим убийцей текучести.

4. Сканирование. Веб-сайты, которые загружаются медленно, сканируются медленнее и не так интенсивно, поскольку у робота Googlebot ограниченный бюджет на сканирование. Таким образом, более быстрое время загрузки может означать, что ваш сайт сканируется чаще, а это означает, что ваш контент в индексе Google также будет более релевантным.

Как измеряется скорость страницы?

В общем, время загрузки веб-сайта — это время в секундах с момента вызова веб-сайта до его полного отображения в браузере. Термины «время загрузки» и «скорость страницы» взаимозаменяемы. Если вы будете искать в Интернете эту тему, вы найдете оба варианта. Время загрузки веб-сайта также можно разделить на 4 различных измерения:

• Время до первого байта (TTFB) : время между вызовом веб-сайта и первым байтом, загруженным веб-сервером.
• First Contentful Paint (FCP) : время, когда отображаемый элемент отображается в браузере в первый раз.
• Первая значимая отрисовка (FMP) : время, когда у пользователя создается впечатление, что веб-сайт загружен.
• Время до интерактивности (TTI) : время, когда веб-сайт был отрендерен и готов к вводу данных пользователем.

В этой статье вы можете узнать, как именно измеряется скорость страницы.

Какие инструменты следует использовать для измерения скорости страницы

Существует множество инструментов для анализа и оптимизации времени загрузки. Есть и другие способы определить время загрузки вашего веб-сайта, например, с помощью анализа файла журнала.

Статистика PageSpeed

Этот инструмент Google для измерения времени загрузки постоянно обновляется и совершенствуется. Последняя версия Pagespeed Insights основана на Lighthouse, инструменте оптимизации веб-сайтов, который также доступен в виде расширения в браузере Chrome. Он использует данные из CrUX, отчета о пользовательском опыте Chrome.

После ввода вашего домена инструмент вычисляет оценку скорости от 0 до 100. PageSpeed ​​Insights различает оценку для мобильных устройств и оценку для настольных компьютеров. Мобильная оценка используется как стандартная и часто очень низкая, поскольку Google хотел бы мотивировать операторов веб-сайтов оптимизировать свои веб-сайты специально для мобильных версий. Под оценкой скорости отображаются отдельные измерения. Их цветовое кодирование может использоваться для определения серьезности проблем.

Рисунок 1: Стартовая страница Google PageSpeed ​​Insights

Гугл Аналитика

Если вы проанализируете свой веб-сайт с помощью Google Analytics, вы найдете статистику о времени загрузки в области «Производительность». Нажмите на «скорость сайта». Если вы установили отслеживание электронной торговли, вы можете напрямую оценить, как скорость загрузки влияет на конверсии.

Консоль поиска Google

В консоли поиска Google вы найдете время загрузки в пункте меню «Сканирование». Там вам будет показано, сколько килобайт загружается в день и сколько времени в миллисекундах требуется роботу Google для загрузки одного из ваших сайтов. Это поможет вам легко обнаружить проблемы со временем загрузки вашего сайта.

Райт

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

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

Ислоу

Yslow был разработан Yahoo!. Вы можете использовать его как букмарклет, инструмент для командного центра или как расширение для браузера. Правила скорости основаны на спецификациях Yahoo!. Инструмент также интересен для опытных пользователей из-за функций командной строки. Обратите внимание, что плагин Firebug также должен быть установлен, чтобы использовать плагин через Firefox.

Рисунок 2: Yslow

Пингдом

Вы должны зарегистрироваться, чтобы использовать Pingdom.com. Он показывает время загрузки с диаграммами и статистикой, что упрощает оценку. Вы можете легко увидеть, какие элементы.

Рисунок 3: Пингдом

WebPageTest.org

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

Что загружается быстрее

What Loads Faster сравнивает время загрузки двух сайтов друг с другом. Похожим образом работает рейтинг скорости веб-сайтов, с помощью которого вы можете одновременно сравнивать до четырех сайтов.

Сколько времени должен загружаться сайт?

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

Вы не имеете никакого влияния на эти факторы:

• Пропускная способность: время загрузки вашего веб-сайта зависит от доступной пропускной способности Интернета. При 3G-подключении и смартфоне сайт будет загружаться медленнее, чем при быстром DSL-подключении.
• Кэш браузера: если пользователь использует браузер, кеш которого давно не очищался, загрузка сайта может значительно замедлиться, поскольку память компьютера не может обработать объем данных.
• Вычислительная мощность клиента. Старые настольные компьютеры и смартфоны могут испытывать задержки при загрузке страниц, поскольку структура DOM и выполнение сценариев замедляются из-за нехватки памяти и вычислительной мощности.

Вы можете повлиять на эти факторы:

• Размеры файлов . Размер ваших файлов определяет скорость загрузки вашего веб-сайта. Сюда входит не только сам HTML-код, но и таблицы стилей, файлы скриптов и изображения. Чем меньше файлы, тем быстрее может загружаться страница.
• Соединения с сервером: при вызове веб-страницы веб-сервер обрабатывает запрос. Он может обрабатываться быстрее, если у него меньше данных для обработки. Если одновременно выполняется много запросов при высокой посещаемости веб-сайта, основная память и мощность процессора могут использоваться слишком сильно, что становится узким местом для времени загрузки. В этом случае мощности следует увеличить.

24 способа оптимизировать скорость страницы

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

1. Обеспечьте быстрое подключение

Соединение между веб-сервером и пользователем должно быть установлено до того, как веб-сервер сможет обработать запрос веб-страницы. Время, потраченное на это, называется временем соединения, задержкой или пингом. Вы можете измерить это на платформе Ryte в разделе Web Performance . В идеале задержка составляет менее 100 миллисекунд. Если для настройки соединения требуется значительно больше времени, можно принять меры по оптимизации.

2. Используйте CDN для глобального охвата

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

Здесь может помочь сеть доставки контента, сокращенно CDN. CDN гарантирует, что ваш веб-сайт кэшируется в глобальной сети серверов, поэтому между компьютером пользователя и следующим сервером в CDN всегда есть небольшое количество узлов. Эта услуга связана с высокими затратами, которые не обязательно окупаются для операторов веб-сайта, ориентированного в основном на немецкоязычную территорию.

Чтобы использовать CDN, вы должны зарегистрироваться у провайдера. У Cloudflare есть несколько бесплатных планов, но вы должны точно проверить, при каких условиях предложение является бесплатным. Платные провайдеры обычно взимают плату за объем данных, который ежемесячно используется в сети.

Известные поставщики:

• Amazon Cloudfront
• Облачная вспышка
• Путь стека
• wao.io

3. Оптимизируйте свой веб-сервер для скорости страницы

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

4. Обнаружение узких мест в инфраструктуре

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

Важно распознавать эти узкие места, чтобы иметь возможность быстро реагировать. Многие решения для хостинга предлагают метрики для мониторинга использования сервера. Из измерений, представленных выше, также может быть полезным «Время до первого байта», которое можно измерить с помощью платформы Ryte в разделе « Веб-производительность ». Если он значительно увеличивается, возможно, проблема связана с веб-сервером.

5. Используйте кэширование на стороне сервера

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

В настройках программного обеспечения веб-сервера — чаще всего используются Apache HTTP Server и Nginx — можно активировать и настроить кэширование на стороне сервера. Если у вас нет необходимых знаний, вы можете обратиться к своему хостинг-провайдеру или поручить кэширование и другие измерения PageSpeed ​​с помощью автоматизированной облачной службы (см. ниже).

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

При кэшировании браузера элементы вашего веб-сайта кэшируются веб-браузером, а не серверным кэшированием веб-сервера. Поэтому не все элементы нужно загружать заново при доступе к новому URL-адресу на вашем веб-сайте. Это увеличивает скорость загрузки.
Кэширование браузера может быть активировано многими CMS через плагины или расширения.

Возможные плагины для кэширования браузера с WordPress, например:

• WP Ракета
• Общий кэш W3
• Самый быстрый кеш WP

Ручная активация кэширования браузера происходит через настройку файла .htaccess. Таким образом, вы можете включить два модуля сервера Apache: mod_headers и mod_expires.

Если вы используете mod_headers, .htaccess должен быть дополнен следующим кодом (Источник — GitHub):

<FilesMatch ".(css|js|gif|pdf|jpg|jpeg|png)$">
Заголовок установил Cache-Control "max-age=2592000, public"
</FilesMatch>

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

Если вы хотите использовать mod_expires для кэширования браузера, файл .htaccess будет расширен следующими строками:

## Срок действия кэша ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "доступ плюс 1 год"
ExpiresByType image/jpeg "доступ плюс 1 год"
ExpiresByType image/gif "Доступ плюс 1 год"
ExpiresByType image/png "доступ плюс 1 год"
ExpiresByType text/css "доступ плюс 1 месяц"
ExpiresByType text/html "доступ плюс 1 месяц"
ExpiresByType application/pdf "Доступ плюс 1 месяц"
ExpiresByType text/x-javascript "доступ плюс 1 месяц"
ExpiresByType application/x-shockwave-flash "доступ плюс 1 месяц"
ExpiresByType image/x-icon "доступ плюс 1 год"
ExpiresDefault "доступ плюс 1 месяц"
</ЕслиМодуль>
## Срок действия кэша

Этот метод позволяет отдельно определить уникальный временной интервал для каждого типа файла.

7. Используйте сжатие GZip

Файлы могут быть обработаны и отправлены быстрее, если они будут как можно меньше. Это также относится к коду, который должен отображать веб-сайт в браузере пользователя. Подобно zip-файлу, этот код можно сжать и, таким образом, уменьшить его размер. Затем сжатые данные распаковываются в браузере.

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

Как я могу сжимать файлы с помощью gzip?

Сервер Apache чаще всего используется для веб-сайтов, поэтому следующий пример относится к Apache.

Используются два разных модуля: mod_deflate и mod_gzip.

1. Модуль mod_deflate обычно предустановлен. С помощью следующей консольной команды вы можете проверить, существует ли он уже:

sudo apachectl -t -D DUMP_MODULES | grep выкачать

Если вы получите вывод «deflate_module (shared)», значит mod_deflate уже установлен. В противном случае свяжитесь с вашим хостом.

2. Теперь откройте «httpd.conf», файл конфигурации Apache. Обычно вы можете найти его в папке «/etc/httpd/conf/». Там вы добавляете следующую строку:

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
приложение/javascript

Это указывает на то, что текст и код HTML, CSS и JavaScript сжаты с помощью GZip. Сохраните файл и перезапустите веб-сервер Apache. Отныне данные будут сжиматься Apache.

8. Включите HTTP/2

По умолчанию все файлы веб-страниц (например, изображения и сценарии) загружаются с использованием протокола HTTP/1.1. Эти файлы загружаются один за другим через отдельное соединение.

Это замедляет процесс загрузки. С SSL-сертификатом веб-сервер можно переключить на протокол HTTP/2. Через HTTP/2 все файлы загружаются через одно соединение. Они также являются приоритетными. Все распространенные браузеры поддерживают этот протокол, так что вы можете работать с ним без колебаний.

Узнайте больше в этой статье: Как повысить скорость загрузки веб-страниц с помощью HTTP/2: руководство для начинающих.

9. Сжимайте изображения

Пропорционально большая часть объема загрузки веб-сайта состоит из изображений. Это тем более верно для интернет-магазинов с большим количеством товаров и веб-сайтов-портфолио, особенно для фотографов.

Если вам удастся значительно уменьшить размер файла ваших изображений, вы сможете значительно увеличить скорость страницы. Мы уже написали обширную статью о сжатии изображений на Ryte. Вот краткое изложение.

10. Оптимизируйте все изображения

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

Как правило, фотографии и высококачественная графика должны считаться файлами JPEG, а меньшая графика и графика с небольшим количеством цветов или прозрачностей должны считаться файлами PNG.

Дальнейшие шаги:

• Сжимайте изображения перед их загрузкой на свой веб-сайт с помощью программы обработки изображений, такой как Gimp или Adobe Photoshop. Обе программы предлагают новичкам функцию «сохранить для Интернета». Таким образом, размер файла будет автоматически оптимизирован. С помощью таких инструментов, как kraken.io или PNGGauntlet, вы можете уменьшить размер файла, удалив дополнительную информацию.
• Соответствующий размер изображения указан в исходном коде: Если браузер должен сам рассчитывать размер графики, время загрузки может быть увеличено. Данный размер должен соответствовать исходному размеру изображения, хранящегося на сервере. Вы также можете определить информацию о размере изображения с помощью CSS.
• Удалите метатеги и данные EXIF. Если, например, вы используете изображения со своей камеры или смартфона, они содержат много дополнительной информации, такой как местоположение, используемая камера и другие данные. С помощью такого инструмента, как tinypng, вы можете удалить их и сэкономить место на диске.

11. Используйте формат изображений WebP

С помощью WebP Google создал новый формат изображений, который может сжимать изображения как без потерь (аналогично PNG), так и с потерями (аналогично JPEG). Это даже более эффективно, чем старые форматы.

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

<картинка>
<исходный тип="изображение/webp">
<исходный тип="изображение/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</картинка>

12. Различайте десктопные и мобильные сайты

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

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

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

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

13. Настройте ленивую загрузку

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

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

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

14. Очистите исходный код

Когда вызывается URL-адрес веб-сайта, клиент или браузер последовательно следует исходному коду HTML-документа. Читаются все пустые символы или разрывы строк. Один лишний пустой символ не окажет негативного влияния на работу вашего сайта.

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

Поэтому вам следует свести к минимуму исходный код:

• Удалите все ненужные комментарии.
• Удалите все лишние пустые символы.
• Удалите ненужное форматирование, если, например, в исходном коде обнаружено форматирование без содержимого, такое как «<strong></strong>».

Чтобы избежать лишнего исходного кода, вы всегда должны либо вставлять текст в формате HTML на веб-сайт, либо использовать редактор CMS, либо вставлять, а затем форматировать текст как обычный текст. Если вы интегрируете текст из Word или другой программы Office напрямую в CMS, это приведет к лишнему исходному коду.

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

15. Уменьшите количество внешних скриптов

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

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

Дополнительные советы:

• Используйте только асинхронные коды отслеживания. Они не загружаются до тех пор, пока сайт не будет отрендерен, и не мешают загрузке сайта.
• Используйте такие инструменты, как Диспетчер тегов Google. Это означает, что в исходный код необходимо интегрировать только один фрагмент кода для нескольких кодов отслеживания, и время загрузки существенно не повлияет.
• Если возможно, вы должны хранить скрипты на своем веб-сервере, а не интегрировать их извне.
• Уменьшите количество iFrames.

16. Аутсорсинг JavaScript и CSS

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

Чтобы уменьшить исходный код, вы можете передать файлы CSS и JavaScript на аутсорсинг. Затем они будут объединены в один документ. Требуется только один поиск. Если браузер загружает файл в кеш, время загрузки может снова сократиться.

Как передать JavaScript на аутсорсинг:

Отобразите исходный код вашего веб-сайта в редакторе. Затем вырежьте все файлы JS и создайте новый текстовый файл, в который вставьте все фрагменты кода. Сохраните файл как main.js и сохраните его на своем сервере в папке, где находятся все остальные HTML-файлы.

В HTML-коде сайта удалите следующие команды:

и

Замените удаленную команду этой командой:

17. Минимизируйте файлы CSS и JavaScript

Вы можете уменьшить размер CSS и JavaScript, удалив ненужные пустые символы. Их также называют «белыми пространствами». Таким образом, исходный код можно, например, сократить до одной строки.

Фрагмент кода с доступными пустыми символами:

Код CSS и пустые символы:

Удобочитаемость значительно снижается из-за удаления пробелов и комментариев. В идеале вы должны работать с двумя версиями: версия со всеми пробелами и комментариями, которые вы можете редактировать, и версия для отображения на веб-сайте.

Чтобы вам не приходилось дублировать каждое вносимое вами изменение, вы также можете использовать программы, например, для его «минификации». Вы также можете использовать специальные инструменты для минимизации JavaScript и CSS. Рекомендуемые инструменты включают в себя:

• YUI Compressor или cssmin.js для файлов CSS
• Компилятор закрытия для JavaScript

18. Загрузите JavaScript и CSS в конце

Ваш веб-сайт не будет отображаться полностью, пока не будут загружены все файлы JavaScript и CSS. Чтобы облегчить процесс загрузки, вы можете вставить JavaScript и CSS в конец HTML-кода. Даже если сервер работает медленно, это не повлияет на развитие вашего сайта.

Таким образом, идеальное место для файлов CSS — область <head> веб-сайта. Однако вам следует включить JavaScript в нижний колонтитул веб-сайта.

Возможная интеграция файлов может выглядеть как:

19. Используйте CSS3 для фона

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

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

20. Используйте предварительную выборку и предварительный рендеринг

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

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

Пример:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

Здесь пример перезагружается еще до загрузки другого сайта. Таким образом, время загрузки в новом представлении сайта сокращается.

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

Для реализации пре-рендеринга необходимо вставить в исходный код посещаемого веб-сайта следующую строку:

<link rel="prerender" href="//prerendering-site.com/index">

21. Сократите число 301 редиректов

Перенаправления 301 отлично подходят для предотвращения дублирования контента или для перенаправления старых URL-адресов на новые URL-адреса после повторного запуска. Однако каждое перенаправление увеличивает время загрузки — незначительно, но каждый раз, когда браузер сталкивается с перенаправлением, необходимо получить новый URL-адрес, и браузер должен ждать, пока не будет возвращен HTTP-запрос. Если несколько 310 редиректов следуют друг за другом, время загрузки может значительно увеличиться.

>> Перенаправления: руководство для начинающих <<

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

22. Избегайте плохих запросов

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

Вы можете легко избежать плохих запросов, исправив неправильные файлы и указав правильный путь или перенаправив к новому файлу.

23. Используйте AMP

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

Многие CMS, такие как WordPress, позволяют использовать AMP с помощью плагинов. До сих пор AMP нельзя было использовать для интернет-магазинов. Впрочем, это предусмотрено разработчиками.

Дополнительные ресурсы:

• Домашняя страница проекта AMP
• WordPress-AMP-плагины

24. Попробуйте автоматическую оптимизацию скорости страницы

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

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

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

wao.io также защищает от атак безопасности и предлагает метрики для мониторинга веб-сайтов и количества пользователей.

Вывод

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

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

Даже если вы попробуете всего несколько из них, мы уверены, что вы сможете сделать свой веб-сайт быстрее, сделать своих пользователей счастливее и получить более высокий рейтинг в поиске.