Уроки
-
Введение
-
Поисковая оптимизация
- Битые ссылки
- Карта сайта
- Микроразметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
-
Минификация
-
Минификация CSS для сокращения его объёма
Минификация JavaScript файлов
Минификация inline CSS кода
Минификация картинок без потери качества
Минификация JavaScript файлов для сокращения его объёма
Неиспользуемый CSS код
Оптимизация data:URL картинок
Формат анимированных изображений MP4 и WEBM вместо GIF и WEBP
Неиспользуемый JavaScript код
Использование WebP формата в изображениях
Слишком качественные картинки без использования сжатия
Подходящий битрейт видео
-
Сокращение запросов
-
Переизбыток маленьких картинок
Группировка CSS файлов
Группировка JavaScript файлов
Переизбыток файлов шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JavaScript фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
- Время загрузки
- Настройки сервера
- Картинки
-
Первое содержимое
-
Последовательность подключения JavaScript файлов
Режим отображения шрифтов
Настройка предварительного соединения
Удаление ленивой загрузки
Длительное время исполнения JavaScript кода
Загрузка файлов отложено или по востребованию
Сервер размещён в той же стране, где проживают пользователи сайта
Запросы в другую страну, вызывающих блокировку загрузки страницы
-
Минификация
- Мобильность
- Баги
-
Удобство
- Соцсети
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Безопасность
- Шифрованное соединение
- Эксплойты
- Уязвимости
Длительное время исполнения JavaScript кода
Весь JavaScript код браузера выполняется в одном потоке выполнения. Это значит, что все скрипты, даже асинхронные выполняются строго последовательно. То есть, в браузере у JavaScript отсутствуют параллельные вычисления.
Если вы подключаете скрипт онлайн консультанта, карт, капчи, счётчиков аналитики на странице, то они будут исполнены сразу. Это отложит показ действительно важного контента.
Норма выполнения отдельно загружаемого JavaScript файла 0.05 секунды. А для всех inline скриптов в HTML коде страницы - 0.15 секунд.
Чтобы исправить это загружайте скрипты сторонних сервисов следующим образом:
- Счётчики, онлайн консультанты, карты (за исключением расположенной на первом экране), системы сторонней авторизации (VK ID, Yandex ID и т.д.) нужно загружать именно на этом этапе, чтобы они вообще никак не замедляли загрузку страницы. Сделать это лучше с помощью конструкции window.addEventListener("load", (event) => {
setTimeout(function() {
// Тут вызов кода загрузки
}, 50);
}); или jQuery версия $(window).on("load", function(event) {
setTimeout(function() {
// Тут вызов кода загрузки
}, 50);
})
- Капчи нужно загружать в момент начала заполнения формы. То есть, по событию focus поля формы.
- Всякие системы аналитики, кроме основной, также стоит загружать через это события. Например, если вы используете Yandex метрику и Google аналитику, то Yandex метрику можете загрузить сразу, а Google аналитику через конструкцию, показанную в первом пункте.