Уроки
-
Введение
-
Поисковая оптимизация
- Битые ссылки
- Карта сайта
- Микроразметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
-
Минификация
-
Минификация CSS
Минификация JavaScript файлов
Минификация inline CSS кода
Минификация картинок без потери качества
Минификация JavaScript файлов
Неиспользуемый CSS код
Оптимизация data:URL картинок
Формат анимированных изображений
Неиспользуемый JavaScript код
Использование WebP
Отсутствует сжатие картинки
Битрейт видео
-
Сокращение запросов
-
Переизбыток мелких картинок
Несгруппированные CSS файлы
Несгруппированные JavaScript файлы
Переизбыток шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JS фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
- Время загрузки
- Настройки сервера
- Картинки
- Первое содержимое
-
Минификация
- Мобильность
- Баги
-
Удобство
- Соцсети
- Browserconfig.xml
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Безопасность
- Шифрованное соединение
- Эксплойты
- Уязвимости
Предварительное соединение
Предварительное соединение с сервером
Часто сайты загружают файлы из внешних сервисов. Это могут быть карты или виджеты соцсетей. Те, в свою очередь, загружают данные из своих источников.
Например, при отображении карты яндекса на сайте, подгружается скрипт https://api-maps.yandex.ru/services/constructor/1.0/js/
, а тот запрашивает фото карт с адреса https://core-renderer-tiles.maps.yandex.net
. Таким образом, после загрузки скрипта он тратит время на подключение к сайту, выдающим картинки.
Но можно ускорить работу карт ,добавив на страницу специаильный код, который создаст подключение к адресу https://core-renderer-tiles.maps.yandex.net
ещё до загрузки самого скрипта.
<link rel="preconnect" href="https://core-renderer-tiles.maps.yandex.net" crossorigin />
<link rel="dns-prefetch" href="https://core-renderer-tiles.maps.yandex.net" />
Таким образом вы ускорите загрузку карты от несколько десятков до сотен миллисекунд.
Но это имеет смысл, только если карта или виджет соцсетей - находится на первом экране. Во всех остальных случаях отложите загрузку карты до тех пор покамест вся остальная страница не загрузится, либо до момента, когда пользователь, прокручивая страницу, вот вот увидит карту.
Предзагрузка файлов
Предзагрузка файлов не помогает загрузить страницу быстрее, а лишь помогает отобразить быстрее значимый контент. Следовательно, предзагружать CSS и JavaScript смысла нет. Картинки и видео предзагрузить не получится, так как отсутствует возможность загружать картинку в соответствии с DPR.
Стоит предзагружать файлы шрифтов, чтобы как можно быстрее отобразить текстовое содержимое страницы.