Уроки
-
Введение
-
SEO
- Кликабельность снипета в поисковых системах
-
Индексация
-
Заголовки H1-H6
Атрибут «alt» у картинок
Атрибут Title у ссылок
Содержание robots.txt
Дублирующийся «title»
Дублирующийся «description»
Человеко понятное название картинки
Правила форматирования текста на странице
Требования и рекомендации формата микроразметки
Валидация микроразметки Яндекс и Google
Человеко понятный формат ссылок
Ошибки в Robots.txt
Содержание карты сайта
Файл карты сайта
Требования к форматированию ссылок
Тег Hreflang
Тег «canonical»
-
Скорость
-
Сократите количество запросов
-
Переизбыток маленьких картинок
Группировка CSS файлов
Группировка JavaScript файлов
Переизбыток файлов шрифтов
Перенаправления при загрузке файлов
Наличие сквозных CSS, JS файлов
Загрузка дубликатов файлов
Использование JavaScript фасадов
Перенаправление JavaScript кодом
Редирект с/на www версию
Использование технологии спрайтов
Корректное подключение видеоплеера
- Общая оценка
- Настройте сервер
- Ускорьте показ первого содержимого
-
Сократите размер файлов
-
Минификация CSS для сокращения его объёма
Минификация встроенного JavaScript кода страницы
Допустимый размер HTML кода страницы
Минификация встроенного CSS кода страницы
Минификация картинок без потери качества
Минификация JavaScript файлов для сокращения его объёма
Суммарный размер всех картинок на странице
Неиспользуемый CSS код
Оптимизация шрифтов
Переизбыток монохромных иконок
Наличие монохромного шрифта
Оптимизация data:URL картинок
Формат анимированных изображений MP4, WEBM, SVG вместо GIF и WEBP
Неиспользуемый JavaScript код
Обрезка однотонных полей у изображений
Использование WebP формата в изображениях
Слишком качественные картинки без использования сжатия
Подходящий битрейт видео
Избыточно крупные картинки
- Быстродействие сервера
- Исправьте блокировки
-
Сократите количество запросов
-
Мобильная адаптация
-
Cломанная вёрстка
-
Скриншоты для мини-отчёта
Горизонтальная прокрутка экрана
Крупные заголовки
Блок выходит за экран
- Удобство
-
Cломанная вёрстка
-
Программные ошибки
- Код
- Работа почты
- Доступность
- Настройки сервера
-
Удобство
- Читаемость текста
- Интерфейс
- Визуальные дефекты
-
Взаимодействие с другими программами
-
Разделение страницы на HTML5 секции
Телефоны без кликабельной ссылки для быстрого начала звонка
Ссылки для Email адресов
Валидация Manifest.json со списком фавиконов
Сниппеты сайта при отправки ссылок в соцсетях и мессенджерах
Список просканированных ссылок
Раздражающие всплывающие сообщения без ведома пользователя
Тег для указания крупного фавикона
Файл BrowserConfig
Иконка Apple touch bar для Mackbook pro
Файл Favicon.ico
-
Уязвимости
- Код
-
Настройки сервера
-
Загрузка всех файлов страницы по HTTPS
Заголовок Strict-https для повышения безопасности
Закрытый доступ к служебным файлам
Шифрованное IPv6 соединение
Включённый показ ошибок на севере
Корректность SSL сертификата
Доступность HTTPS
Перенаправления на защищённое
Уязвимости безопасного SSL соединения
HTTP заголовки для повышения безопасности
- Сторонние сервисы
Крупные заголовки
Размер текста на экране компьютера может достигать 50 пикселей и более. Если забыть указать отдельный размер текста для мобильного устройства, то на нём тоже будут отображаться крупные буквы в 50 пикселей. Тогда в 1 строку на экране мобильного устройства поместится только 5–7 букв.
Также проблема возникает, когда верстальщик забыл изменить ширину блока. Например, кнопка на экране монитора имеет ширину, заданную в процентах. Но ширина монитора 1920 пикселей, а мобильного экрана всего 360–424 пикселя. Разумеется, слова перестанут помещаться в кнопку, и текст будет отображаться в столбик, что выглядит некрасиво.
То же самое касается любых ситуаций, связанных с шириной блоков: количество столбцов, направление выравнивания блоков, адаптацией таблиц и т.д.