Другие статьи по теме:
Несколько советов по экономному использованию CSS для сокращения количества сетевых запросов.
Многократное использование изображений
На веб-странице целое множество повторяющихся элементов: логотипы в разных местах или в нескольких цветовых решениях, кнопки навигации, пиктограммы и прочие картинки, которые загружаются отдельно. Но большинство из них можно использовать многократно, даже если их масштаб / направление / цвет отличаются. Например, здесь используется одна и та же стрелочка, несмотря на разное направление:
Это легко реализовано с помощью CSS-свойств:
Также нет необходимости подгружать разные файлы для логотипов отличающихся цветов. Используйте один, а свойства задавайте в CSS:
Можете использовать редактируемый шаблон с CodePen.
Элементы взаимодействия и анимация
Большинство интерактивных или динамичных элементов в интерфейсе реализуется с помощью JavaScript, но даже подобную анимацию можно сделать на чистом CSS:
Что ещё умеет CSS без JS:
- Индикаторы выполнения (Progress bar).
- Выпадающие меню.
- Модальные окна.
- Редактирование текста на странице и прочее.
Примеров и готовых шаблонов в сети множество. Постарайтесь использовать минимально необходимое количество громоздких JS-библиотек и уменьшайте количество подгружаемых с серверов элементов с помощью реюзабельных картинок и пиктограмм.
Какие SEO-инструменты пригодятся?
- Проверка времени отклика сервера, размера страницы и скорости загрузки кода для списка URL. Стремиться нужно к показателю менее 900 мс.
- Анализ конкурентов по запросу с возможностью проверить скорость загрузки контента. Старайтесь быть быстрее конкурентов.
- Ещё 12 способов уменьшить скорость загрузки ваших страниц.
Другие статьи по теме: