Уроки
-
Введение
-
Поисковая оптимизация
- Битые ссылки
- Карта сайта
- Микроразметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
- Минификация
-
Сокращение запросов
-
Переизбыток мелких картинок
Несгруппированные CSS файлы
Несгруппированные JavaScript файлы
Переизбыток шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JS фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
- Время загрузки
- Настройки сервера
- Картинки
- Первое содержимое
- Мобильность
- Баги
-
Удобство
- Соцсети
- Browserconfig.xml
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Безопасность
- Шифрованное соединение
- Эксплойты
- Уязвимости
Долгий 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 аналитику через конструкцию, показанную в первом пункте.