Почему скорость загрузки страницы google pagespeed снижается если использовать width height?

@Katerina1993 · Регистрация: 17.01.2017

Студворк — интернет-сервис помощи студентам

У меня скорость загрузки в google pagespeed снижается на 4 % если использую width и height. Дело в том, что у меня есть картинки которые выводятся в правом div блоке. Картинки выбираются из базы случайном образом. Размер div блока примерно в ширину 200 px и так уж получается иногда, что некоторые картинки нужно сжимать в ручную атрибутами width и height, чтобы они поместились в этом блоке и сжатие происходила пропорционально для этого я использую отдельную функцию. Для тестирования правого блока я создала отдельный php файл и туда перенесла блок с картинками и проверила через google pagespeed, вышло 100 % оптимизации. Потом добавила сжатие width, и соответсвенно height, чтобы сохранить пропорции картинки, пример кода пока в html файле без php. В итоге при добавлении width и height, в google pagespeed вместо 100 %, стало 96 %. Почему снизилась скорость загрузки. Вот пример кода, в первой картинки стоят атрибуты width и height из-за них как раз уменьшается скорость загрузки:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>Картинки галереи</title></head>
<body>
  <div><table class='tbl2'>
  <tr>
    <td>Случайная картинка</td>
  </tr>
  <tr>
    <td>
        <a target="_blank" href='https://mysite.ru/prikoly/photo/prikoly_pro_koshek/23-1/'>Приколы про кошек</a>
    </td>
  </tr>
  <tr>
    <td>
        <a target='_blank' href='https://mysite.ru/files/photo/1415756046/1532629675.jpg'>
<img width="150px" height="103px" alt='Приколы про кошек' src='https://mysite.ru/files/photo/1415756046/s_1532629675.jpg'></a>
    </td>
  </tr>
  <tr>
    <td>
        <a target="_blank" href='https://mysite.ru/galerey/photo/pozdravitelnye_otkrytki_s_dnyom_rozhdeniya/47-1/'>Поздравительные открытки с днём рождения</a>
    </td>
  </tr>
  <tr>
    <td>
        <a target='_blank' href='https://mysite.ru/files/photo/1415756046/1440671518.jpg'>
<img alt='Поздравительные открытки с днём рождения' src='https://mysite.ru/files/photo/1415756046/s_1440671518.jpg'></a>
    </td>
  </tr>
  <tr>
    <td>
        <a target="_blank" href='https://mysite.ru/galerey/photo/8_marta/52-1/'>8 марта</a>
    </td>
  </tr>
  <tr>
    <td>
        <a target='_blank' href='https://mysite.ru/files/photo/1415756046/1440678151.gif'>
<img alt='8 марта' src='https://mysite.ru/files/photo/1415756046/s_1440678151.gif'></a>
    </td>
  </tr>
  <tr>
    <td>
        <a target="_blank" href='https://mysite.ru/galerey/photo/23_fevralya/53-1/'>23 февраля</a>
    </td>
  </tr>
  <tr>
    <td>
        <a target='_blank' href='https://mysite.ru/files/photo/1415756046/1440685914.jpg'>
<img alt='23 февраля' src='https://mysite.ru/files/photo/1415756046/s_1440685914.jpg'></a>
    </td>
  </tr>
  <tr>
    <td>
        <a target="_blank" href='https://mysite.ru/galerey/photo/s_dnyom_svadby/55-1/'>С днём свадьбы</a></td>
    </tr>
  <tr>
     <td>
        <a target='_blank' href='https://mysite.ru/files/photo/1415756046/1440684696.jpg'>
<img alt='С днём свадьбы' src='https://mysite.ru/files/photo/1415756046/s_1440684696.jpg'></a>
     </td>
  </tr>
 </table>
  </div>
  </body>
</html>

@AlexZaw · 13.11.2019, 14:40

Katerina1993, так может дело не в атрибутах, а в вашей функции?

Атрибуты, сами по себе, не могут влиять на скорость загрузки страницы.

@PrismerBat · 13.11.2019, 15:13

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

@esculap_ra · 13.11.2019, 18:43

А что в логаг pagespeed ?

@Katerina1993 · 13.11.2019, 19:49 **[ТС]**

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

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

А что в логаг pagespeed ?

Это где смотреть, если имеется ввиду ниже "Рекомендации", то мне предлагают исправить по возможности следующее, оптимизация изображения. Указано именно то самое изображение у которого используются атрибуты width и height, нужно сжать это изображение на 87 %. Если же не использовать width и height, то тогда в рекомендации будет отображено "Поздравляем! Проблемы не обнаружены.".

Атрибуты, сами по себе, не могут влиять на скорость загрузки страницы.

google pagespeed с этим не согласен, он сразу понижает проценты загрузки страницы если я использую эти атрибуты.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	13.11.2019, 14:40
	Katerina1993, так может дело не в атрибутах, а в вашей функции? Атрибуты, сами по себе, не могут влиять на скорость загрузки страницы. 0

@PrismerBat 0 / 0 / 0 Регистрация: 31.10.2019 Сообщений: 1
	13.11.2019, 15:13
	Если Ваши изображения больше, чем проставленные для них размеры, то гугл может считать эти изображения неоптимизированными. 0

@esculap_ra 462 / 265 / 55 Регистрация: 22.08.2010 Сообщений: 1,204 Записей в блоге: 4
	13.11.2019, 18:43
	А что в логаг pagespeed ? 0