Оптимизация сайта, общие рекомендации, часть I.

Данные рекомендации являются общими и подойдут для любого сайта, на любом фреймфворке.

Оптимизация изображений

  • Использовать современные форматы изображений (сжатые PNG, .webp) WEBP - поддерживают прозрачность. Даже сильно сжатые изображения выглядят хорошо.
  • Ленивая погрузка изображений, кроме первого экрана.
<img loading="lazy" src="___" />

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

<img loading="eager" src="___" />

При использовании некоторых фреймворков оптимизация изображений происходит автоматически (next.js, astro.js и др)

Минификация кода

Удаление всех ненужных символов из кода в финальной сборке.

При использовании современных фреймворков этот процесс происходит автоматически.

Динамическая загрузка сторонних скриптов и модулей

Тяжёлые модули которые не требуются для работы страницы здесь и сейчас можно загружать отложено. Например, виджет карты который находится в самом низу страницы можно загружать при прокрутке этой страницы до определенного уровня страницы - это позволит выиграть значительное количество времени при первичной загрузке, так ка потребуется загрузить скрипт виджета, стили, иконки, элементы карты - всё вместе может быть до 1 мб загрузки и до 2-4 секунд (в зависимости от устройства) обработки скрипта со стилями и рендеринга элементов виджета.

    <div id="map_container" class="map container-fluid">
        <script        
        id="ymap_lazy"        
        type="text/javascript"
        charset="utf-8"   
        async  
        data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3e4840dc788fb0832d974899683b0&width=100%25&height=400&lang=ru_RU&scroll=true">
        </script>
    </div>

Выше приведённый код, будет активирован и загружен при наведении мыши, при прокрутке до определенного уровня и при клике по элементу “map_container”

  <script>
    let map_container = document.getElementById("map_container");
    let options_map = {
      once: true, //запуск один раз, и удаление наблюдателя сразу
      passive: true,
      capture: true,
    };

    map_container.addEventListener("click", start_lazy_map, options_map);
    map_container.addEventListener("mouseover", start_lazy_map, options_map);
    map_container.addEventListener("touchstart", start_lazy_map, options_map);
    map_container.addEventListener("touchmove", start_lazy_map, options_map);
    window.addEventListener("scroll", checkMapVisibility);

    let map_loaded = false;
    function start_lazy_map() {
      if (!map_loaded) {
        let map_block = document.getElementById("ymap_lazy");
        map_loaded = true;
        map_container.style.backgroundImage = "none";
        map_block.setAttribute("src", map_block.getAttribute("data-src"));
        map_block.removeAttribute("data_src");
        console.log("YMAP LOADED");
      }
    }
    // функция для проверки расстояния до элемента
    // если элемент ближе установленной дистанции - начинается загрузка.
    function checkMapVisibility() {
      let rect = map_container.getBoundingClientRect();
      let distanceToViewport = rect.top - window.innerHeight - 600;

      if (distanceToViewport < 0) {
        start_lazy_map();
      }
    }
  </script>

Анимации

  • Во всех случаях - лучше использовать CSS анимации когда это только возможно.

    Наиболее оптимизированными считаются анимации, использующие свойства transform и opacity, потому что они могут быть обработаны на GPU (графическом процессоре), что уменьшает нагрузку на CPU.

  • Использовать JS для анимаций когда CSS - не может удовлетворить наши потребности, либо когда CSS требует очень большого количества операций, которые могут быть легко выполнены коротким JS кодом.

Настройки сервера

  • Включаем HTTP2 в настройках сервера - сразу прирост скорости загрузки данных.

https://leonardo.osnova.io/4ad13e4a-e144-5346-8bb7-04b4b49d3928/

Оригинал: https://leonardo.osnova.io/4ad13e4a-e144-5346-8bb7-04b4b49d3928/

  • Настраиваем gzip стандартный уровень сжатия 5-6, более высокий уровень сжатия сильнее нагружает браузер в связи усложнением раскодировки и не приносит значительного выигрыша в объеме передаваемых данных.
  • Настройка кеширования на сервере (тут всё зависит от типа сайта и частоты обновлений).