Оптимизация статики

Современные браузеры весьма успешно анализируют приоритет ресурсов прямо во время их парсинга. И именно здесь на сцене появляется критический запрос.
Запрос является критическим, если в нем содержится статика, необходимая для рендеринга контента в рамках пользовательского рабочего окна.
Благодаря можно напрямую предписать высокий приоритет в очереди загрузки статический файлов, что может значительно оптимизировать UX.

<link rel="preload" href="style.css" as="style">

К содержанию ↑

Сжатие ресурсов

Несмотря на то, что мы сделали всего один запрос на сервер, не стоит забывать, что объем данных тоже имеет значение. Минифицирование js, css и html кода позволяет уменьшить объем данных до 40-50%, что никогда не будет лишним. Особенно это актуально для мобильных устройств.
Также сжимайте и конвертируйте картинки из png в jpg, если Вам не нужна прозрачность.

Декоратор debounce

Результатом декоратора debounce(callback, ms) должна быть обёртка, которая передаёт вызов callback не более одного раза в ms миллисекунд. Другими словами, когда мы вызываем debounce, это гарантирует, что все остальные вызовы будут игнорироваться в течение ms.

function debounce(callback, ms) {
  let isRun = false;

  return function() {
    if (isRun) return;

    callback.apply(this, arguments);

    isRun= true;

    setTimeout(() => isRun = false, ms);
  };
}


let fn = debounce(alert, 1000);

fn(1); // выполняется немедленно
fn(2); // проигнорирован

setTimeout(() => fn(3), 300); // проигнорирован (прошло только 300 мс)
setTimeout(() => fn(4), 1300); // выполняется
setTimeout(() => fn(5), 1500); // проигнорирован (прошло только 200 мс от последнего вызова)

К содержанию ↑

Операции с DOM

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

Мемоизация

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

// Обычная функция, прибавляющая 10 к переданному ей числу
const add = (n) => (n + 10);
add(9); // 19

// аналогичная функция с мемоизацией
const memoizedAdd = () => {
	let cache = {};
	return (n) => {
		if (n in cache) {
			console.log('Fetching from cache');
			return cache[n];
		}
		else {
			console.log('Calculating result');
			let result = n + 10;
			cache[n] = result;
			return result;
		}
	}
}

// эту функцию возвратит memoizedAdd
const newAdd = memoizedAdd();
console.log(newAdd(3)); // 13 вычислено
console.log(newAdd(3)); // 13 взято из кэша

К содержанию ↑

Обозначьте стратегию загрузки шрифтов

Сначала браузер строит DOM и CSSOM; шрифты не будут подгружаться до тех пор, пока не встретятся в CSS-селекторе уже существующего узла DOM. Такое поведение ощутимо замедляет рендеринг текста.
Font-display – новое свойство CSS, предоставляющее возможность решить проблему без использования JS.

@font-face {
	font-family: Roboto;
	src:  url('font/Roboto.woff') format('woff');
	font-display: swap;
}

А также:

• Уменьшение вложенности DOM дерева
• Минификация, использование табов для отступов
• Разделение стилей на куски и их дозагрузка после первого экрана
• Упрощение селекторов CSS (по методологии БЭМ)
• Ленивая загрузка данных (Infinite Scrolling) в том числе изображения
• Перенос, либо отложенная (async, defer) загрузка скриптов JavaScript
• Используйте CDN ресурсов по возможности
• Избавьтесь от лишних зависимостей