Изменение размера изображения дает более высокий балл для Google Page Speed, но имеет более медленное время загрузки страницы

Question

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

Я изучаю способы улучшения работы моего сайта в рейтингах Google.

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

Итак, вот два варианта, которые у меня есть. Если не будет более того, что я не рассматривал.

1. Продолжить масштабирование изображений в полном размере вниз в браузере.
2. Динамически создавать миниатюры внешних изображений, которые повлекут за собой некоторое время обработки. Я использую PHP, который, как я знаю, не самый быстрый способ обработки изображений.

Я решил сделать эксперимент, чтобы помочь, но это оставило меня неуверенным в лучшем варианте.

Я проверил тест, в котором на странице A отображаются 3 изображения из Flikr, уменьшенные на странице браузера B, отображаются одинаковые изображения, дианомически масштабированные, с использованием php.

Page забитого очень плохо 0% для сервировки масштабируемого изображения и 22% в целом по скорости страницы Google с помощью GT Метрики, со временем загрузки страницы в 0,6 секунд.

Page B набрал 100% для обслуживания масштабируемых изображений и 92% в целом по скорости страницы Google с помощью GT Метрики, но с более длительным временем загрузки страницы в 1,6 секунд. Целая секунда дольше.

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

Вопрос, какой из них лучше. Быстрая страница или мнение Google о скорости моей страницы?

Answer 1

Оценки GTmetrix являются субъективными и не имеют ничего общего с Google.

0,6 лучше, чем 1,6, но это еще не полная картина.

Я больше знаком с WebPagetest: http://www.webpagetest.org/

GTmetrix дает время загрузки страницы. После того, как страница загружена, для браузера еще больше работы для визуализации страницы.

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

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

Вы хотите посмотреть на следующие моменты времени:

TTFB  
DOM Loaded 
First Paint 
Start Render  
Load Time 
Rendering 
Fully Loaded  
Visual Complete 

Что касается улучшения поиска и оказания фоток, я должен был бы понять, как определить, какие фото загрузить.

На мой взгляд (никто не знает) Google будет поддерживать низкий показатель отказов. Именно так вы перечислены в результатах и ​​сколько ошибочно нажимаете на вас и сразу же нажимаете кнопку «Назад».

Для страниц аналитики и Google вы, вероятно, должны попытаться хорошо забить в Google Page Speed ​​Insights: https://developers.google.com/speed/pagespeed/insights/

Если вы размещаете водопад изображение из GTmetrix или WebPagetest я могу сказать вам больше.