Понимание WebPageTest водопад - PullRequest
       60

Понимание WebPageTest водопад

0 голосов
/ 28 сентября 2019

Я использую WebPageTest и изо всех сил пытаюсь понять значение различных цветов и почему это занимает так много времени, чтобы мои изображения были показаны (почти 2 с).Используя вид водопада WebPageTest, я вижу много «ожидания».Я просто не знаю, как правильно читать водопад и понимаю, что весь мой контент ожидает загрузки.

Вы можете увидеть результаты моего теста на WebPageTest: http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F,

Я сделал несколькоЯ обнаружил, что мне нужно решить проблему с помощью атрибута предварительной загрузки:

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="img.jpeg" as="image">

Я попытался поиграться с этим атрибутом предварительной загрузки, предварительно загрузив некоторые js, а также некоторые изображения (запросы 93-100), ноничего из этого не помогло до сих пор.

На какие элементы я должен обратить более пристальное внимание, чтобы исправить это долгое время ожидания перед показом моего контента?

1 Ответ

0 голосов
/ 29 сентября 2019

Цветная клавиша находится сверху.Он просто сообщает вам, какой тип ресурса загружается, за исключением того, что DNS + connect + ssl, которые в совокупности составляют процесс установления начального подключения к домену.

Кажется, что тема Atelier не имеетбыли сосредоточены вокруг производительности, но вы все равно сможете быстрее загружать вещи.Одна вещь, которую вы могли бы исправить, это убедиться, что вы загружаете только необходимые скрипты / CSS для каждой страницы.https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css не нужно загружать на главной странице.Некоторые элементы, такие как уведомление о cookie, могут быть загружены после всего остального.Исправление, которое должно дать вам большое улучшение.Вы также можете загрузить CSS / JS из CDN.Убедитесь, что вы используете хороший плагин кэширования, если вы этого еще не сделали.

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

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

...