SEO продвижение ⋆ Поисковая оптимизация ⋆ Digital маркетинг ⋆ Лучшие практики и советы международных лидеров отрасли.

Техническое SEO

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

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

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

Содержание:

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

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

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

1. Положительный пользовательский опыт. Согласно исследованию kissmetrics, почти половина всех пользователей Интернета ожидают, что время загрузки будет меньше двух секунд. Если загрузка вашего сайта занимает более 3 секунд, 40% посетителей откажутся. Следовательно, высокая скорость страницы означает более высокий коэффициент конверсии и более низкий показатель отказов. Медленные сайты могут полностью отпугнуть посетителей. Согласно опросу, почти 80 процентов заявили, что не будут посещать медленные сайты во второй раз.

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

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

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

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

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

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

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

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

PageSpeed ​​Insights

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

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

Стартовая страница Google PageSpeed ​​Insights
Стартовая страница Google PageSpeed ​​Insights

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

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

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

Google Search Console

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

YSlow

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

YSlow
YSlow

Pingdom

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

Pingdom
Pingdom

WebPageTest.org

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

Which Loads faster

Which Loads Faster сравнивает время загрузки двух сайтов друг с другом.  Website Speed Ranker , функционирует аналогичным образом.

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

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

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

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

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

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

Методы оптимизации скорости страницы

Создать быстрое время соединения

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

Настройте быстрые соединения DNS

Чтобы веб-сервер находился вместе с веб-сайтом, домен, указанный в браузере, должен быть преобразован в IP-адрес. Домен, example.com, становится четырьмя числами от 0 до 255, разделенными точками. DNS-серверы отвечают за разрешение домена. Как правило, цепочка DNS-серверов требуется до тех пор, пока не будет найден IP-адрес.

Этот процесс можно оптимизировать с помощью более быстрых DNS-серверов. Например, серверы с IP-адресами «1.1.1.1» от Cloudflare и «8.8.8.8» от Google можно использовать бесплатно. Преобразование записей DNS может быть сделано поставщиком домена или хостером.

CDN для глобального охвата

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

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

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

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

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

Тем временем, однако, ситуация изменилась. Многие PageSpeed ​​и меры безопасности для веб-сайта (например, HTTP / 2, см. Ниже) возможны только с SSL-сертификатом. Кроме того, SSL-сертификаты зарекомендовали себя как стандарт безопасности, удобства пользователя и фактор ранжирования SEO. Поэтому, если вы еще не используете SSL-сертификат, вам обязательно следует это сделать. Эмитент сертификата Let’s Encrypt даже предлагает это бесплатно.

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

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

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

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

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

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

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

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

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

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

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

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

<FilesMatch "\.(css|js|gif|pdf|jpg|jpeg|png)$"> 
Header set Cache-Control "max-age=2592000, public" 
</FilesMatch>

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

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

## Срок действия кэша ## 
 <IfModule mod_expires.c> 
ExpiresActive On 
ExpiresByType image/jpg "access plus 1 year" 
ExpiresByType image/jpeg "access plus 1 year" 
ExpiresByType image/gif "access plus 1 year" 
ExpiresByType image/png "access plus 1 year" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/html "access plus 1 month" 
ExpiresByType application/pdf "access plus 1 month" 
ExpiresByType text/x-javascript "access plus 1 month" 
ExpiresByType application/x-shockwave-flash "access plus 1 month" 
ExpiresByType image/x-icon "access plus 1 year" 
ExpiresDefault "access plus 1 month" 
</IfModule> 
## Срок действия кэша ##

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

Использовать сжатие GZip

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

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

Как мне сжать файлы с помощью gzip?

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

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

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

 sudo apachectl -t -D DUMP_MODULES | grep deflate 

Если вы получите вывод «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
application/javascript

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

Включить HTTP/2

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

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

Сжать изображения

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

Оптимизировать все изображения

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

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

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

Используйте WebP

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

<picture>
<source srcset = "img / testbild.webp" type = "image / webp">
<source srcset = "img / testbild2.jpg" type = "image / jpeg">
<img src = "img / testbild2. jpg "alt =" Fallback-Bild ">
</ picture>

Различают десктопные (настольный) и мобильные устройства

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

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

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

Настроить lazy load (отложенная загрузка)

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

OnPage меры для быстрого сайта

Очистить исходный код

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

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

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

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

Уменьшить внешние скрипты

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

Дальнейшие советы:

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

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

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

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

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

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

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

code6 PageSpeed Optimization PageSpeed Loading Time

а также

code7 PageSpeed Optimization PageSpeed Loading Time

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

code8 PageSpeed Optimization PageSpeed Loading Time

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

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

code2 PageSpeed Optimization PageSpeed Loading Time

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

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

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

Поэтому идеальная позиция для файлов CSS находится в области <head> веб-сайта. Однако вы должны включить JavaScript в нижний колонтитул сайта.

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

code3 PageSpeed Optimization PageSpeed Loading Time

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

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

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

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

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

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

Пример:

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

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

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

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

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

Уменьшить 301 перенаправления

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

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

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

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

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

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

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

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

Автоматическая оптимизация скорости страницы

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

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

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

Заключение

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

Нажмите, чтобы комментировать

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

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

Самые популярные

To Top