Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Скорость загрузки страницы напрямую связана с двумя факторами:

2 <ul><li>Скорость соединения с интернетом</li>

3 <li>Вес страницы - то есть информации, которую нужно передать через интернет</li>

4 </ul>В прошлом уроке мы разобрали, как на загрузку влияет скорость соединения с интернетом. При этом мы пока не изучали, как тестировать вес страницы и какие факторы на это влияют.

5 В этом уроке мы разберем:

6 <ul><li>Что влияет на вес страницы</li>

7 <li>Что такое кеширование и как проверить его наличие</li>

8 <li>Зачем используется оптимизация изображений</li>

9 <li>Как минификация файлов позволяет уменьшить вес страницы для пользователя</li>

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

11 <h2>Вес страницы</h2>

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

13 Обычно нужно передавать такую информацию:

14 <ul><li>HTML-разметка</li>

15 <li>Файлы стилей CSS</li>

16 <li>Файлы с кодом на JavaScript</li>

17 <li>Изображения</li>

18 <li>Видео, аудио, анимация и прочие медиаэлементы</li>

19 </ul>Чтобы узнать вес у любой страницы, можно использовать "Инструменты разработчика".

20 Во вкладке Network внизу указана основная информация о странице:

21 Там можно найти:

22 <ul><li>Общее количество запросов. Здесь указаны все запросы, которые были выполнены на странице - например, запрос к CSS-файлу, запрос к изображению и так далее</li>

23 <li>Общее количество обработанных и переданных данных. В разных инструментах эти данные представлены по-разному, но всегда разделяются</li>

24 <li>Время, затраченное на обработку страницы. По этому показателю можно узнать, насколько долго грузится страница</li>

25 </ul>Дальше мы рассмотрим, как уменьшить размер страницы.

26 <h2>Оптимизация изображений</h2>

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

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

29 В качестве примера возьмем один из уроков этого курса и проверим, сколько места занимают изображения. После этого узнаем, что влияет на вес изображения.

30 Чтобы проверить вес всех изображений на странице, воспользуемся "Инструментами разработчика" и знакомой нам вкладке Network. На этой вкладке можно отфильтровать данные по типу с помощью фильтра Images.

31 После выбора фильтра мы увидим все файлы изображений и данные о них:

32 <ul><li>Имя файла</li>

33 <li>Тип файла</li>

34 <li>Объем переданной информации по сети</li>

35 <li>Вес изображения</li>

36 </ul>Внизу обновится строка состояния и вместо веса страницы будет отображаться суммарный вес всех изображений:

37 Вес страницы на скриншоте равен 3 МБ. Более 500 Кб этого веса приходится на картинки, что составляет 1/6 от общего веса страницы.

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

39 С разрешением все довольно просто - чем оно выше, тем больше размер файла. Здесь стоит учитывать контекст сайта.

40 Представим сайт, на котором изображения могут быть до 1000 пикселей в ширину. В таком случае загружать изображение с шириной 5000 пикселей бесполезно - это приводит только к лишней нагрузке на сайт.

41 О формате поговорим немного подробнее. В основном используются два формата:

42 <ul><li>png- этот формат стоит использовать, если изображение содержит прозрачные элементы. У таких файлов довольно большой размер</li>

43 <li>jpg- этот формат стоит использовать, если в изображении нет прозрачных элементов. Такие файлы заметно меньше, чем png-файлы</li>

44 </ul>В этом уроке скриншоты не содержат прозрачных элементов, поэтому использовать форматpngбессмысленно. Мы использовали форматjpgи сэкономили много места.

45 Например, одно и то же изображение на скриншоте занимает:

46 <ul><li>103 Кб в форматеjpg</li>

47 <li>277 Кб в форматеpng, что почти в три раза больше</li>

48 </ul>Так же приобретает популярность формат WebP - он позволяет сжимать файлы еще более эффективно, чемjpg.

49 <h2>Кеширование файлов</h2>

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

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

52 Особенно это полезно, когда пользователь часто использует один и тот же сайт.

53 Проверить кеширование файлов можно с помощью уже изученной вкладки Network в инструментах разработчика. На этой вкладке важно выключить настройку Disable Cache, потому что с ней файлы не сохраняются. Это полезно в других сценариях, но не при тестировании кеширования. Отключите эту настройку и перезагрузите страницу.

54 Если снова перейти к изображениям, то в столбце Size у многих файлов появится значениеmemory_cache.

55 Это означает, что файлы не были скачаны. Браузер использовал кешированные версии, которые были взяты с устройства пользователя:

56 В нижней строке состояния видно, что теперь скачано всего 6 Кб графической информации - а не 500 Кб, как было без кеширования.

57 <h2>Минификация файлов</h2>

58 Вес HTML, CSS или JavaScript или любого текстового файла зависит от количества символов внутри. В качестве символов считаются буквы, цифры, пробелы и переносы строки.

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

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

61 Для примера взглянем на Bootstrap - известный CSS-фреймворк. Он позволяет подключить обычную версию CSS-файла и минифицированную. Сравним размеры файлов:

62 <ul><li>274 Кб без минификации</li>

63 <li>227 Кб с минификацией</li>

64 </ul>Здесь разница кажется небольшой. Но посмотрим на пример с JavaScript-файлами:

65 <ul><li>142 Кб без минификации</li>

66 <li>60 Кб с минификацией</li>

67 </ul>В крупном проекте таких файлов могут быть десятки, поэтому минификация способна сильно уменьшить вес страницы.

68 <h2>Выводы</h2>

69 В этом уроке мы рассмотрели, от чего зависит вес интернет-страницы. Теперь вы знаете, почему важно использовать все средства для оптимизации контента:

70 <ul><li>Оптимизация изображений</li>

71 <li>Включение кеширования файлов</li>

72 <li>Минификация файлов формата HTML, CSS и JavaScript</li>

73 </ul>Все эти оптимизации позволят существенно уменьшить вес страницы, а значит пользователь сможет быстрее ее загрузить.