Youtubezilla.ru

Мастер бытовой техники
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Исправить медленную загрузку страницы в ожидании »WebNots

Исправить медленную загрузку страницы в ожидании fonts.googleapis.com »WebNots

Вы когда-нибудь расстраивались из-за зависшей веб-страницы в вашем браузере, отображающей сообщение «Ожидание fonts.googleapis.com» в строке состояния? В этой статье делается попытка объяснить основную причину появления сообщения «Ожидание fonts.googleapis.com» и способы исправить это, чтобы веб-страница могла загружаться быстро. Сообщение будет выглядеть так, как показано ниже, и веб-страница, которую вы пытаетесь открыть, может загружаться долго, а иногда вообще не загружаться.

Отображается сообщение браузера "Жду fonts.googleapis.com"

Сообщение браузера с надписью «Ожидание fonts.googleapis.com»

Обычно проблема возникает в таких браузерах, как Google Chrome, Mozilla Firefox, Safari и Microsoft Edge.

Что такое fonts.googleapis.com?

Если вам интересно узнать об этом домене «fonts.googleapis.com», откройте его в окне браузера. Вы увидите сообщение об ошибке 404 not found, поскольку это недоступный домен, как вы могли подумать.

Ошибка не найдена с сервера Google Fonts

Ошибка не найдена с сервера Google Fonts

Тогда что это? Google предоставляет более 650 бесплатных семейств шрифтов по общей творческой лицензии, которые широко используются в Интернете. Для динамического доступа к этим шрифтам Google предлагает службу API, чтобы разработчики, создающие тему, плагин или любые другие службы, могли использовать вызов API для загрузки необходимых семейств шрифтов из таких доменов Google, как fonts.googleapis.com, googleusercontent.com или gstatic. .com. Все шрифты Google можно посмотреть на официальном сайт шрифтов.

Связь между шрифтами Google и веб-страницами

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

Ссылка на таблицу стилей для шрифтов Google

Ссылка таблицы стилей на шрифты Google

Узнайте больше о том, как просмотреть исходный код страницы в Chrome, Safari и Firefox.

Почему страница загружается очень медленно при использовании шрифтов Google?

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

Рисунок ниже объясняет, как работает кеширование браузера в целом, а шрифты Google входят в состав таблиц стилей.

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

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

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

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

Большинство браузеров, таких как Google Chrome, отображают содержимое страницы только после загрузки необходимых шрифтов. Следовательно, вы можете не видеть никакого контента до тех пор, пока браузер не завершит загрузку шрифтов (Firefox использует другой метод, сначала отобразите контент, используя шрифт браузера по умолчанию, а затем отобразите отображение после загрузки требуемых шрифтов).

Помимо загрузки шрифтов, могут быть и другие причины задержки загрузки, перечисленные ниже:

  • Первый доступ — Каждый раз, когда страница загружается в браузер в первый раз, все файлы шрифтов должны быть загружены, что вызывает задержку загрузки страницы.
  • Плагины и темы используют различные шрифты — Как объяснялось выше, время загрузки шрифтов значительно увеличится, если на сайте используется большое количество файлов шрифтов.
  • Очистка кеша браузера — если вы недавно очищали кеш браузера, то для первой загрузки страницы потребуется некоторое время. Некоторые браузеры, такие как Firefox, также имеют возможность очищать кеш при выходе из браузера. Включение этой опции будет загружать файлы шрифтов каждый раз, когда вы открываете браузер, и вызывает задержку загрузки страницы.
  • Плагины / расширения браузера — Плагины браузера, такие как блокировщики скриптов или блокировщики рекламы, также могут задерживать загрузку файлов шрифтов и вызывать тайм-аут запроса.
  • Больше HTTP-запросов — Браузер сделает индивидуальный HTTP-запрос для каждой таблицы стилей со страницы, вызывающей шрифты Google, что приведет к задержке общего времени ответа от сервера.
  • Блокировка сайтов Google — В некоторых странах заблокированы все службы Google, включая загрузку шрифтов. Следовательно, вызов служб Google API также будет заблокирован локальным интернет-провайдером, и в результате страница не будет загружаться до истечения времени ожидания запроса. По истечении времени ожидания запроса браузер будет использовать резервный шрифт, определенный в таблице стилей, для отображения содержимого.
Читайте так же:
Steam client not found Dota 2 что делать?

Как исправить проблему с fonts.googleapis.com?

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

  1. Использовать статический DNS
  2. Блокировать шрифты Google в файле hosts
  3. Отключить очистку кеша браузера при выходе
  4. Отключить расширения браузера
  5. Сбросить браузер и роутер
  6. Используйте VPN или прокси для обхода блокировки
  7. Остановить загрузку страницы в Chrome
  8. Владельцам сайтов
  9. Для разработчиков
  10. Мысль о конфиденциальности

1. Использование статических DNS-серверов Google

Все браузеры по умолчанию используют настройки DNS, предлагаемые вашим интернет-провайдером (ISP). Это может вызвать медленную загрузку страницы из-за проблем с кешированием. Лучшее решение для преодоления этого — использование общедоступных DNS-серверов, таких как общедоступный DNS Google. Это улучшит скорость загрузки страницы, поскольку шрифты уже кэшированы на DNS-серверах Google.

2. Блокировка fonts.googleapis.com с помощью файла Hosts

Если общедоступный DNS не работает для вас, следующий вариант — попытаться заблокировать домен «fonts.googleapis.com». Это можно сделать, указав домен «fonts.googleapis.com» на IP-адрес localhost в файле hosts, доступном на вашем ПК или Mac. Когда вы блокируете шрифты Google, браузеры будут использовать резервные шрифты, определенные в CSS сайта, или использовать шрифт браузера по умолчанию.

Добавьте следующие записи в файл hosts, чтобы заблокировать домен «fonts.googleapis.com» для IPv4 и IPv6 соответственно:

3. Отключить очистку кеша браузера при выходе.

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

4. Проверьте расширения браузера.

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

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

5. Сброс браузера и маршрутизатора.

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

6. Заблокированные сервисы Google

Многие страны, например Китай, блокируют полные сервисы Google, включая «fonts.googleapis.com». Попробуйте надежные службы VPN или прокси, чтобы обойти брандмауэр, что может помочь в более быстрой загрузке страниц. Также может случиться так, что только ваш интернет-провайдер блокирует шрифты Google, хотя другие интернет-провайдеры разрешают. Если вы подозреваете проблемы с вашим интернет-провайдером, попробуйте открыть страницу с другой сетью и убедитесь, что проблема сохраняется во всей сети или только у вашего интернет-провайдера.

Читайте так же:
Вайбер не открывает фото

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

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

7. Остановите загрузку страницы в Chrome.

Когда вы увидите сообщение «Ожидание fonts.googleapis.com» в строке состояния, нажмите «Остановить загрузку страницы». Это завершит вызов API, и вы сразу увидите, что Chrome загружает содержимое страницы с резервными шрифтами. Это работает только в Google Chrome, может повлиять на отображение контента.

Остановить загрузку страницы

Остановить загрузку страницы

8. Для владельцев сайтов

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

В случае, если вы используете WordPress, даже в интерфейсе администратора использовались шрифты Google, что приводило к медленной реакции при входе в систему и использовании других функций на панели управления. Используйте плагины типа «Отключить шрифты Google»Помочь отключить шрифты Google в интерфейсе администратора WordPress.

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

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

9. Разработчикам

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

Другой способ — загрузить и доставить необходимые шрифты Google локально с пакетом темы или плагина.

Скачать шрифты Google

Скачать шрифты Google

10. Фактор конфиденциальности при использовании Google Fonts

Помимо проблемы с медленной загрузкой страницы, Google также собирает данные об использовании шрифтов, когда браузер инициирует вызов API для fonts.googlepis.com, googleusercontent.com или gstatic.com. Каждый запрос CSS и загрузка файла шрифта регистрируются Google и используются в Google Fonts Analytics сайт. Google также найдет, какие сайты используют свои шрифты, с помощью веб-сканирования Google и использует эти данные для создания базы данных сайтов с использованием шрифтов Google. Поэтому, если вы не хотите, чтобы Google использовал данные вашего сайта, отключите шрифты Google и используйте общие шрифты.

Заключительные слова

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

Асинхронная загрузка JavaScript

Обеспечить асинхронную загрузку JS-файлов можно с помощью атрибутов defer или async тега script . В обоих случаях загрузка JS-файлов не задерживает отображение страницы, отличие заключается в моменте выполнения скрипта.

Читайте так же:
GoldWave 6.57 + Portable + Repack

Тег SCRIPT без атрибутов (синхронная загрузка JS)

Если тег script применяется без атрибутов defer или async , то загрузка скрипта задерживает процесс отображения (рендеринг) страницы до того момента, пока он не будет загружен и выполнен.

Синхронная загрузка JS

Задержка рендеринга страницы в браузере обеспечивает выполнение скриптов в порядке их указания в HTML-коде.

Тег SCRIPT с атрибутом ASYNC (асинхронная загрузка JS)

Атрибут async обеспечивает асинхронную загрузку внешнего JS-файла: файл будет загружен и выполнен в фоновом режиме без задержки отображения страницы.

Асинхронная загрузка JS (атрибут async)

При применении тегов script с атрибутом async следует помнить, что порядок выполнения скриптов (если JS-файлов несколько) не сохраняется: они будут выполняться по окончании их загрузки вне зависимости от их порядка в HTML-коде. Это может привести к ошибкам и несрабатыванию скриптов.

Решением является объединение кода всех JS-файлов в один, или применение атрибута defer, если проблема касается только внешних файлов.

Тег SCRIPT с атрибутом DEFER (отложенная загрузка JS)

Атрибут defer обеспечивает отложенную загрузку внешнего JS-файла: файл будет загружен без задержки отображения страницы и выполнен по окончанию рендеринга.

Отложенная загрузка JS (атрибут defer)

Также применение атрибута defer , в отличие от async , сохраняет последовательность выполнения внешних скриптов:

Следует учитывать, что атрибут defer (как и async ) не откладывает выполнение встроенных в страницу скриптов: они будут проанализированы браузером и в случае, если файл JS-библиотеки, которую они используют, не будет загружен и исполнен, то и скрипты будут проигнорированы:

Для сайтов на CMS

Отличным решением обеспечения асинхронной загрузки скриптов для сайтов на Joomla, WordPress, Magento и Drupal является плагин JCH Optimize, позволяющий не только добавить атрибуты async и defer в теги script , но и объединять все внешние JS-файлы в один, а также размещать их перед закрывающим тегом body .

Обновитесь до Windows 11 через Центр обновления Windows

реклама

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

1. Перейдите в подменю настроек Центра обновления Windows. Самый простой способ попасть туда — просто ввести «Центр обновления Windows» в поиске Windows и щелкнуть верхний результат. Вы также можете перейти в Настройки-> Обновление и безопасность.

Если вы видите баннер «Обновление до Windows 11 готово», значит, все готово и следует перейти к следующему шагу. Если нет, перейдите к разделу о принудительном обновлении Windows 11.

реклама

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

2. Щелкните Загрузить и установить .

реклама

3. Примите лицензионное соглашение.

Теперь загрузка и установка с помощью Центра обновления Windows займет несколько минут.

4. При появлении запроса перезагрузите компьютер. Когда он перезагрузится, вы окажетесь в Windows 11.

Перед тем, как мы начнем – статические HTML-сайты

Помните, что в этой статье мы говорим о статических HTML-сайтах, которые вы создаете сами. Вы можете создавать HTML-сайты с собственным дизайном или использовать готовые фреймворки, такие как Bootstrap. В общем, вы можете загрузить HTML-страницы и другие ресурсы (изображения / CSS / JS) на свой сервер и получить доступ к сайту из браузера. Для этого вам не нужны никакие другие сторонние инструменты, кроме доменного имени и учетной записи хостинга. В качестве альтернативы вы можете использовать сторонние инструменты, такие как Mobirise, для создания статических HTML-страниц и загрузки через FTP.

Читайте так же:
Как перезагрузить планшет на Андроид или Айпад

Мы не обсуждаем следующие случаи:

  • Системы управления контентом, такие как WordPress – WordPress предлагает полный пакет оптимизации для повышения скорости загрузки вашего сайта. Ознакомьтесь с нашей статьей об оптимизации времени загрузки страниц сайтов WordPress.
  • Инструменты для создания веб-сайтов, такие как Weebly, Wix и т.д. – эти платформы не являются решениями с открытым исходным кодом, что по сути означает, что у вас есть ограниченные возможности для оптимизации внутри платформы. Вы можете использовать некоторые из вариантов, предложенных в этой статье. Однако вы не можете оптимизировать такие вещи, как объединение CSS / JS, удаление ресурсов, блокирующих рендеринг, и т.д., Поскольку вы не можете получить доступ к серверу.

Проверьте скорость страницы в инструменте Google PageSpeed ​​Insights

Теперь, когда контекст ясен, мы продолжим. Лучший способ начать оптимизацию – сначала понять основные проблемы, существующие на вашем сайте. Чтобы найти проблемы, связанные со скоростью, перейдите в инструменты Google PageSpeed ​​Insight и проверьте рейтинг своего веб-сайта. Сначала не беспокойтесь о счете, прокрутите вниз и проверьте раздел возможностей для улучшения результата.

Как улучшить скорость загрузки страниц статических HTML-сайтов?

Предложения Google PageSpeed ​​Insights

Обратите внимание, что возможности, показанные в инструменте PageSpeed ​​Insights, НЕ повлияют напрямую на оценку. Как правило, оценка будет низкой, если у вас есть проблемы в верхней части (разделе заголовка) вашего веб-сайта. Он включает в себя ресурсы блокировки рендеринга, предварительную загрузку шрифтов и изображений, кумулятивный сдвиг макета со сторонним кодом и т.д. Таким образом, вы можете комбинировать возможности и общие правила для повышения скорости загрузки страниц ваших статических HTML-сайтов.

Как ускорить загрузку страниц

Можно выделить 5 основных причин, которые замедляют работу сайта. Разберемся, что делать с каждой из них.

1. Страницы большого размера

Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

2. «Тяжелые» изображения

Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т.д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

3. Много запросов от браузера

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

  • Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
  • Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
  • Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.
Читайте так же:
Удаленный доступ, удаленное управление компьютером, удаленное администрирование

4. Перегруженный код JavaScript и CSS

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

  • Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
  • Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
  • Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

5. Большое расстояние между сервером и пользователем

Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

6. Медленный хостинг

Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

Среднее время ответа сервера в Google Analytics

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

Как выявить проблемы со скоростью на сайте?

Среди недавних обновлений алгоритмов Google — Core Web Vitals. По показателям LCP (Largest Contentful Paint) и FID (First Input Delay) поисковик оценивает эффективность сайта. LCP говорит о времени отрисовки страницы на экране, а FID — насколько быстро браузер реагирует на взаимодействие посетителя с элементами интерфейса.

Один из способов узнать Core Web Vitals страниц — сервис для веб-мастеров Google Search Console. Статистика находится в разделе «Основные интернет-показатели» и доступна после подтверждения прав на сайт.

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Используя онлайн-инструмент PageSpeed Insights, можно проверить скорость определенной страницы, узнать, какие факторы негативно влияют на ее производительность, а также получить рекомендации относительно оптимизации загрузки сайта.

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Еще один вариант, подходящий для комплексного анализа скорости страниц, — аудит сайта с помощью платформы для SEO-специалистов. Например, в отчете сервиса SE Ranking можно увидеть Core Web Vitals любого ресурса, данные по объему HTML-кода, размерам изображений, файлам CSS и JS и другие показатели, влияющие на время отображения контента.

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Предыдущие попытки оптимизации загрузки

В Chrome реализованы и другие функции, ускоряющие загрузку сайтов. Например, в конце августа 2020 г. Google начала распространение Chrome 85, в котором скорость загрузки веб-сайтов в версиях для Windows и macOS возросла на 10%. В случае повышенной загруженности центрального процессора рост производительности может быть даже более значительным.

Добиться таких результатов Google смогла за счет применения профильной оптимизации (Profile-guided optimization, PGO). PGO называют технику оптимизации программы компилятором, нацеленную на увеличение скорости ее выполнения за счет использования результатов профилирования – многократных тестовых «прогонов» оптимизируемой программы для сбора ее характеристик. В Google заверяют, что при профилировании используют входные данные, соответствующие реальным сценариям применения Chrome пользователями по всему миру. Отсюда и значительный прирост производительности браузера при выполнении наиболее востребованных пользователями операций, к которым, очевидно, относится загрузка сайтов.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector