Уроки
-
Введение
-
SEO
- Кликабельность снипета в поисковых системах
-
Индексация
-
Заголовки H1-H6
Атрибут «alt» у картинок
Атрибут Title у ссылок
Содержание robots.txt
Дублирующийся «title»
Дублирующийся «description»
Человеко понятное название картинки
Правила форматирования текста на странице
Требования и рекомендации формата микроразметки
Валидация микроразметки Яндекс и Google
Человеко понятный формат ссылок
Ошибки в Robots.txt
Содержание карты сайта
Файл карты сайта
Требования к форматированию ссылок
Тег Hreflang
Тег «canonical»
Орфография интерактивных элементов интерфейса
-
Скорость
-
Сократите количество сетевых запросов
-
Переизбыток маленьких картинок
Группировка CSS файлов
Группировка JavaScript файлов
Переизбыток файлов шрифтов
Перенаправления при загрузке файлов
Наличие сквозных CSS, JS файлов
Загрузка дубликатов файлов
Использование JavaScript фасадов
Перенаправление JavaScript кодом
Редирект с/на www версию
Использование технологии спрайтов
Корректное подключение видеоплеера
-
Общая оценка
-
Время загрузки страницы
Общее время загрузки страницы.
Время отображения первой графики
- Настройте сервер
- Ускорьте показ первого содержимого
-
Сократите размер графических файлов
-
Минификация встроенного JavaScript кода страницы
Минификация встроенного CSS кода страницы
Минификация картинок без потери качества
Суммарный размер всех картинок на странице
Оптимизация шрифтов
Переизбыток монохромных иконок
Наличие монохромного шрифта
Оптимизация data:URL картинок
Формат анимированных изображений MP4, WEBM, SVG вместо GIF и WEBP
Обрезка однотонных полей у изображений
Использование WebP формата в изображениях
Слишком качественные картинки без использования сжатия
Подходящий битрейт видео
Избыточно крупные картинки
- Быстродействие сервера
- Исправьте блокировки
- Сократите объём кода
-
Сократите количество сетевых запросов
- Мобильная адаптация
-
Программные ошибки
- Код
- Работа почты
- Доступность
- Настройки сервера
-
Удобство
- Читаемость текста
- Интерфейс
- Визуальные дефекты
- Взаимодействие с другими программами
- Фавикон изображения
-
Уязвимости
- Код
-
Настройки сервера
-
Загрузка всех файлов страницы по HTTPS
Заголовок Strict-https для повышения безопасности
Закрытый доступ к служебным файлам
Шифрованное IPv6 соединение
Включённый показ ошибок на севере
Корректность SSL сертификата
Доступность HTTPS
Перенаправления на защищённое
Уязвимости безопасного SSL соединения
HTTP заголовки для повышения безопасности
- Сторонние сервисы
Время загрузки страницы
Загрузка файлов страницы происходит в следующем порядке:
- Загрузка HTML кода.
- Загрузка ресурсов, указанных в коде. Это картинки, CSS, JavaScript код и другие файлы.
- Второй этап загрузки ресурсов. Например, если в CSS коде в качестве фона указано изображение, то оно загрузится на этом этапе. Код JavaScript исполняется в синхронном, однопоточном режиме. Он может загрузить другие файлы, но это считается дурным тоном, так как ведёт к проблемам многопоточного программирования.
- Срабатывает событие onpageready. В этот момент браузер перестаёт показывать иконку о том, что страница загружается. Это и считается загрузкой страницы. В момент срабатывания этого события браузер гарантирует, что HTML код страницы и все файлы первых двух этапов загрузки полностью загружены, а JavaScript код исполнен.
- Загрузка отложенных ресурсов. У события onpageready может быть множество обработчиков. Часть из них запускают бизнес логику вроде генерации интерактивных функций. Какие-то обработчики могут отправлять данные и загружать файлы. Но если ваш сайт — не какой-то сложный программный онлайн-продукт, то вся бизнес-логика отрабатывает за доли секунды, а сетевые запросы производятся асинхронно. Поэтому считается, что страница в этот момент готова к работе и интерактивна.
Главный способ ускорить сайт - это перенос всего, чего только можно с первых трёх этапов загрузки на последний:
- Загружайте код капчи, карт, онлайн консультант и других сторонних сервисов не через размещение тега
<script>в HTML коде страницы, а путём добавления обработчика события onpageready. - Большие куски контента также лучше подгрузить отложено. Например, в карточке товара могут быть рекомендации похожих товаров. Поскольку пользователь прокрутит страницу и увидит рекомендации самое ранее через 10 секунд, то есть смысл подгрузить эти данные отдельным запросом. Сделать это можно также в коде обработчика события onpageready.
- Медиафайлы, как картинки видео и аудио лучше вообще загружать по запросу. Картинки, когда пользователь прокручивает экран и находится на расстоянии 1-2 экранов от них. Видео и аудио, когда пользователь нажимает кнопку воспроизведение.
Если загрузка страницы длиться 30 секунд и более, то значит на ней присутствуют блокирующие окончательную загрузку файлы. Один или несколько файлов не получается загрузить и браузер ждёт 30 секунд, прежде чем откажется от их загрузки и переведёт статус страницы в состояние «готово».