Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>25 ноя 2019</li>

3 <li>0</li>

4 </ul><h2>Как заставить сайт грузиться быстрее</h2>

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

6 vlada_maestro / shutterstock

7 Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

8 Прошли времена, когда нужно было ждать несколько минут, чтобы открыть страницу без картинок. Сейчас<a>большинство пользователей закроет сайт</a>, если он не загружается уже дольше трёх секунд.

9 Мы подготовили несколько рекомендаций, которые помогут ускорить загрузку сайта.

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

11 Сложно заметить разницу между двумя частями этого изображения, поэтому не стоит загружать на сайт картинки в полном размере.

12 Изображения в GIF или JPG весят меньше, чем аналогичные в PNG. Также есть более современные форматы, которые, не теряя качества, могут быть легче, чем GIF и JPG. Например, иконки можно заменить на SVG - это формат векторных изображений, которые отрисовываются прямо в браузере.

13 Размер SVG-файла может быть менее 1 КБ, но при этом на нём не будет ни одного артефакта сжатия. Также он не размажется, даже если указать разрешение в 4К.

14 Есть ещёwebpилиwebm(видео) и другие форматы. Однако стоит учитывать, что не все браузеры их поддерживают. На "Википедии" есть<a>актуальный список форматов</a>, которые поддерживаются разными браузерами.

15 Ленивая загрузка - это когда изображения или видео загружаются не сразу, а постепенно. В большинстве случаев - перед тем как пользователь до них доберётся.

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

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

18 <img src="images/0.png" lsrc="images/1.jpg" class="lazy-image">Здесь в атрибутsrcзаписано не само изображение, а заглушка - небольшой чёрный квадрат. Настоящий путь указывается в атрибутlsrc. Оттуда его будет получать скрипт:

19 var images = document.getElementsByClassName("lazy-image"); //Получение всех изображений, которые должны подгружаться window.addEventListener("scroll", function () { OnScroll(); }); //Вызов функции OnScroll() каждый раз, когда пользователь скроллит страницу function OnScroll() { var offset = window.innerHeight; //Расстояние, на котором будет начинаться загрузка изображений. В этом случае расстояние будет равняться высоте окна for(var i = 0; i < images.length; i++) //Обход всех изображений { var imagePath = images[i].getAttribute("lsrc"); //Получение пути к настоящему изображению if(images[i].getAttribute("src") != imagePath) //Если изображение уже загрузилось, то его не трогаем { if(window.pageYOffset >= images[i].offsetTop - offset) //Если пользователь доскроллил до изображения на расстояние отступа { images[i].setAttribute("src", imagePath); //Указываем путь настоящего изображения } } } }Если вы используете фреймворки или библиотеки<a>JavaScript</a>, то они должны находиться на сайте, а не где-то в другом месте.

20 То есть подключать их нужно не так:

21 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>А вот так:

22 <script src="jquery-3.4.1.min.js"></script>Это увеличит скорость, потому что браузеру не придётся скакать по разным серверам. Тем более с сервера кроме вас эту библиотеку подключили ещё на тысячи сайтов, на которые заходят тысячи пользователей.

23 То же самое касается видео, изображений, документов и прочего.

24 Большие скрипты можно минифицировать, то есть удалить всё, что не влияет на их работу. Например, вот так выглядит полный код:

25 function Sum (a, b) //Функция сложения двух чисел, которая очень нужна для этого сайта. { return a + b; //Как бы мы обошлись без этого? }Когда браузер запускает этот скрипт, он удаляет все комментарии, табуляцию и ненужные пробелы. То есть для него важно только это:

26 function Sum(a,b){return a+b;}Можно удалить всё это заранее, чтобы увеличить скорость загрузки. Например, если скрипт весил 45 КБ, то после минификации его размер сократится до 32 КБ. То же самое можно сделать с файлами стилей и <a>HTML</a>-страницами.

27 Во время разработки удобно разделять функционал сайта на несколько скриптов:

28 <ul><li>menu.jsотвечает за меню;</li>

29 <li>scrolling.jsдобавляет плавную прокрутку;</li>

30 <li>lazyloading.jsподключает ленивую загрузку и так далее.</li>

31 </ul>Браузеру приходится закачивать каждый файл отдельно. Поэтому время уходит не только на саму загрузку, но и на отправку запросов.

32 Даже если объединённый скрипт получится большим, он всё равно загрузится быстрее, чем несколько маленьких. Исключение стоит сделать для скриптов, загрузка которых не сильно влияет на работу сайта, - их можно вынести отдельно.

33 Убедитесь, что скрипты не препятствуют загрузке сайта, если пользователь ничего не потеряет от их отсутствия. Это касается метрик и всяких красивостей. Для этого сделайте их подключение таким:

34 <script src="useless.js" async></script>Атрибутasyncскажет браузеру, что скрипт можно загружать параллельно с остальным контентом.

35 Если вы выполнили все советы, но сайт всё ещё грузится долго, добавьте индикатор загрузки. Это даст пользователям знать, что сайт жив и есть смысл немного подождать.

36 Скорость работы своего сайта вы можете проверить с помощью инструмента<a>PageSpeed от Google</a>. Там же вы найдёте дополнительные рекомендации.

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

38 <a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>