Оптимизация сайта для google page speed и lighthouse

Форматы файлов шрифтов

1]TTF (шрифт True Type)

Это основные типы шрифтов, созданные Microsoft и Apple, и поэтому они предустановлены как на компьютерах Windows, так и на iOS. Он состоит из одного двоичного файла, поэтому им легко управлять. Это наиболее часто используемые форматы для файлов шрифтов, и все основные браузеры поддерживают его, но единственная проблема с этим форматом заключается в том, что шрифты TTF не сжимаются, а размер файла довольно велик по сравнению с другими форматами.

2]OTF (шрифт открытого типа)

Можно назвать это улучшенной версией TTF. Этот формат, разработанный Microsoft и Adobe, имеет расширенный набор символов и поддерживается на нескольких платформах. Кроме того, он содержит данные шрифта принтера и данные экранного шрифта в одном компоненте. Вы можете использовать OTF как на Windows, так и на Mac. Формат OTF имеет дополнительное пространство и, таким образом, позволяет хранить до 65 000 символов. Эта функция особенно полезна для дизайнеров.

Читать: Загрузка бесплатных шрифтов для логотипов и коммерческого использования.

3]Шрифты SVG

SVG (масштабируемая векторная графика) – это новая версия OTF. Его также называют цветными шрифтами, и он полезен для дизайнеров, которые склонны использовать шрифты, вдохновленные кистью. При разработке шрифтов SVG можно использовать несколько цветов и прозрачностей. SVG – единственный формат файлов, поддерживаемый iPhone и iPad с Safari версии 4.1 или ниже. SVG, однако, не подходит для основного текста, а также в нем отсутствуют подсказки для шрифтов.

4]WOFF (формат открытого веб-шрифта)

WOFF – это в основном OTF или TTF с метаданными и сжатием, поддерживаемыми всеми основными браузерами. Он был создан, чтобы жить в сети. Это результат сотрудничества Mozilla Foundation, Microsoft и Opera Software. Поскольку шрифты сжаты, они загружаются быстрее. Метаданные позволяют включать данные о лицензии в файл шрифта для решения проблем с авторским правом. Это рекомендация консорциума World Wide Web, которая, несомненно, является будущим форматов шрифтов.

Читать: Как установить шрифты в Windows 10.

5]WOFF2

Очевидно, это следующая версия WOFF с улучшенным сжатием. WOFF2 поддерживает почти все популярные веб-браузеры и широко используется веб-разработчиками. Кроме того, он поддерживает спецификации OTF и TTF, а также коллекции шрифтов и вариативные шрифты.

6]EOT (встроенный формат файла OpenType)

Формат файла EOT, разработанный Microsoft, имеет единую структуру EMBEDDEDFONT, которая включает в себя все основные сведения об имени шрифта и поддерживаемых символах, поэтому вам не нужно распаковывать, устанавливать или распаковывать шрифт, если он уже установлен в вашем система.

Это были одни из наиболее часто используемых форматов файлов шрифтов. Сообщите нам, если вы хотите, чтобы мы добавили больше в список.

Типы файлов WOFF

Доминантный тип файла WOFF

.WOFF

Форматирование:	.woff
Категория:	Web Open Font Format File

WOFF расширение файла шрифта веб основном с Format Web Open Font (WOFF), формат, который в основном содержится на веб-страницах. Он использует сжатую версию той же таблицы на основе структуры шрифта, используемого TrueType, OpenType и формат Open Font.

Программист:	Open Source
Категория файла:	Файлы шрифтов
Запись:	HKEY_CLASSES_ROOT\.woff

Программные обеспечения, открывающие Web Open Font Format File:

Internet Explorer, разработчик — Microsoft Corporation

Windows

Mac

Mozilla Firefox, разработчик — Mozilla

Windows

	Mac
	iOS

Android

Linux

Solaris

illumos

Google Chrome, разработчик —

Windows

	Mac
	iOS

Android

Linux

Opera, разработчик — Opera Software

Windows

	Mac
	iOS

Android

Linux

FontForge, разработчик — Open Source

Windows

Mac

Linux

Использование пользовательских шрифтов на веб-страницах

Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах

Вы, вероятно, слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет корректно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат WOFF.

Что такое WOFF?

WOFF является аббревиатурой, которая расшифровывается как «Web Open Font Format». Он используется для сжатия шрифтов для использования со свойством CSS @ font-face. Это способ встраивания шрифтов в веб-страницы, так что вы можете использовать специализированные шрифты, помимо типичных «Arial, Times New Roman, Georgia», которые являются одними из тех вышеупомянутых безопасных веб-шрифтов.

WOFF был представлен W3C в качестве стандарта для упаковки шрифтов для веб-страниц. Это стало рабочим проектом 16 ноября 2010 года. Сегодня у нас фактически есть WOFF 2.0, который улучшает сжатие по сравнению с первой версией формата почти на 30%. В некоторых случаях эта экономия может быть еще более существенной!

Зачем использовать WOFF?

Веб-шрифты, в том числе поставляемые в формате WOFF, предоставляют много преимуществ по сравнению с другими вариантами шрифтов. Как бы ни были полезны эти безопасные веб-шрифты, и в нашей работе эти шрифты, безусловно, найдутся, есть смысл расширить наш выбор и открыть типографские опции.

Шрифты WOFF имеют следующие преимущества:

• Они более доступны, чем шрифты в виде изображений. WOFF разрабатывает простой HTML-текст с помощью CSS, предоставляя вам доступность и контроль дизайна, которые изображения не допускают.
• Файлы WOFF содержат типографскую информацию, такую ​​как контекстные формы и рисунки старого стиля. Это дает вашим веб-страницам лучшую типографику, потому что вы используете правильные символы, а не только приблизительные значения.
• Шрифты WOFF могут помочь с интернационализацией, потому что вы можете вставлять шрифты с символами из других языков.
• Как и весь текст в стиле CSS, шрифты в стиле WOFF более удобны для поисковых систем. Поисковые системы не «видят» текст, встроенный в изображение, и хотя текст ALT может помочь, ничто не заменит сам текст.
• Шрифты WOFF сжаты, поэтому они меньше, чем другие типы файлов шрифтов. Это поможет скорости загрузки сайта и общей производительности.
• Вы можете использовать файлы WOFF для сохранения идентичности вашего бренда, встраивая ваши корпоративные шрифты в файлы WOFF.

Поддержка браузера WOFF

WOFF имеет отличную поддержку браузеров в современных браузерах, в том числе:

• Chrome 6+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 11.1+
• Safari 5.1+

В настоящее время он практически поддерживается всеми приложениями, за исключением всех версий Opera Mini.

Как использовать шрифты WOFF

Чтобы использовать файл WOFF, вам необходимо загрузить файл WOFF на ваш веб-сервер, дать ему имя с

 @ font-face 

, а затем вызовите шрифт в вашем CSS. Например:

1. Загрузите шрифт с именем

    myWoffFont.woff 

   в каталог

   /fonts 

   веб-сервера.

2. В вашем файле CSS добавьте раздел

    @ font-face 

   1.  @ font-face {

3.  font-family: myWoffFont; 

4. формат

    src: url ('/ fonts/myWoffFont.woff') ('woff'); 

5. } 

6. Добавьте новое имя шрифта (

    myWoffFont 

   ) в свой стек шрифтов CSS, как и любое другое имя шрифта:

   1.  p {

7.  font-family:  myWoffFont , Женева, Arial, Helvetica, без засечек; 

8. } 

Где взять шрифты WOFF

Есть два замечательных места, где вы можете найти множество бесплатных шрифтов WOFF для коммерческого и некоммерческого использования:

• Открытая библиотека шрифтов
• Шрифт Белка

Если у вас есть лицензия на использование шрифта, который недоступен в формате WOFF, вы можете использовать создатель WOFF, например, Font Squirrel, для преобразования файлов шрифтов в файлы WOFF. Существует также инструмент командной строки под названием

 sfnt2woff 

, который вы можете использовать в Macintosh и Windows для преобразования ваших шрифтов TrueType/OpenType в WOFF. Загрузите двоичный файл, соответствующий вашей системе, и запустите его из командной строки (или терминала) и следуйте инструкциям.

Пример WOFF

Вот несколько примеров файлов WOFF: Страница WOFF на HTML5 за 24 часа.

Оригинальная статья Дженнифер Крынин. Отредактированный Джереми Жираром 7/11/17

Что такое Woff2

Woff2 — это формат сжатия шрифтов, предназначенный для использования на веб-страницах. Он является продолжением формата WOFF (Web Open Font Format) и предназначен для улучшения производительности загрузки шрифтов.

Woff2 использует современные алгоритмы сжатия, которые помогают уменьшить размер файлов шрифтов без потери качества визуального представления. Если сравнивать с форматом WOFF, то Woff2 может дать еще более существенное снижение размера файла.

Основное достоинство формата Woff2 в том, что он позволяет загружать шрифты значительно быстрее, так как файлы имеют меньший объем и меньшую задержку при передаче по сети

Это особенно важно в контексте мобильных устройств и медленных интернет-соединений, где оптимизация загрузки шрифтов становится критической задачей

Для использования шрифта в формате Woff2 на веб-странице необходимо указать его в CSS-стиле, подключив его с помощью правила @font-face. Поддержка формата Woff2 есть во всех современных браузерах, поэтому проблем с отображением шрифтов в этом формате не возникает.

Загрузка шрифтов в формате Woff2 может происходить как с веб-сервера, так и с CDN (Content Delivery Network)

Важно учесть, что Woff2 не поддерживается браузерами Internet Explorer версии 8 и ниже, поэтому для корректного отображения содержимого на таких браузерах необходимо предусмотреть альтернативные варианты

Width (ширина)Скопировать ссылку

Другим распространённым значением при разработке шрифта является ширина. Этот параметр часто характеризуют терминами «плотный», «сжатый» или «расширенный», хотя то, что значат эти слова, является полностью субъективным. Согласно спецификации, 100 должно равняться ширине , а допустимые значения могут варьироваться от 1 до 1000. Как и вес, ширина соответствует существующему (и очень неудачно названному) CSS-свойству и задаётся в процентах. На ранних стадиях внедрения технологии многие дизайнеры шрифтов не придерживались стандарта с числовыми диапазонами, так что это может выглядеть немного странно в вашем CSS. Но диапазон ширины в 3% — 5% всё еще является допустимым, даже если в этом случае 5% фактически является нормальной шириной. Надеюсь, со временем этот момент станет более стандартизированным

Почему вам это понравитсяСкопировать ссылку

Одна из важных задач при разработке адаптивного дизайна — не допустить ситуацию, в которой текст больших заголовков, после каждого слова переносится на новую строку, не помещаясь в ширину маленьких экранов. Помимо настройки размера шрифта , попробуйте сделать текст заголовка немного уже. Это позволит поместить больше слов на каждой строке без уменьшения размера шрифта, которое визуально может выглядеть как снижение акцента или нарушение иерархии заголовков

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans

Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся

После этого с использованием тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.

Если у Вас возникают трудности при подключении шрифтов, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу примера, чтобы понять какой код CSS был использован.

Каскадность в CSS

Цветовое оформление в CSS

Обобщенное правило

Теперь, для работы со шрифтами, вы знаете все основные правила. Это:

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила . Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для и . Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила :

Важно обратить внимание на запись. Внутри правила так обозначаются свойства и

Использование одного правила или нескольких

Этот раздел относится не только к правилу , но и ко всем обобщенным правилам, которые вы изучите в процессе прохождения курсов. С одной стороны, использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:

1. Запоминание правильного порядка значений. Используя обобщенные свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщенном свойстве. С опытом вы сможете переключиться на одно правило.

Разновидности шрифтов[]

Web-безопасные шрифты

Web-безопасные шрифты — группа шрифтов, которые можно использовать на web-сайтах и поддержка которых стремится к 100 % (то есть они будут отображаться практически на любой машине). На Фэндоме такие шрифты обычно используют в качестве оформления всего текста (или как минимум для подстраховки), для глобальных профайлов (так как туда просто не импортировать свой шрифт) и если не хочется подгружать что-то извне.

Семейства шрифтов

Всего их 5 штук:

• serif (с засечками)
• sans-serif (без засечек)
• monospace (моноширинный)
• cursive (курсивный)
• fantasy (декоративный)

Их стоит использовать как подстраховку, указывая в конце списка шрифтов (поскольку они точно будут работать, если все шрифты перед ними будут недоступны).

Использование популярных шрифтов

Шрифтов, которые поддерживали бы все системы, может быть и нет совсем. Тем не менее, есть такие, которые стремятся к 100 % поддержки: Arial, Trebuchet MS, Tahoma, Times New Roman, Palatino, и т. д. Подобного рода шрифты можно использовать и в качестве основных, и в качестве подстраховки (на Фэндоме таким шрифтом является Arial). Совместимость шрифтов можно посмотреть на различных сайтах, например на cssfontstack и w3schools).

Использование системных шрифтов

В веб-дизайне существует практика использования шрифтов определенной операционной системы. Например, следующий код:

.safefonts{
font-family-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
}

содержит в себе системные шрифты сразу нескольких операционных систем (MacOS, Windows, Ubuntu, Android). Их использование не является обязательным (поскольку на Фэндоме уже есть несколько используемых шрифтов по умолчанию), но может быть весьма «интересным».

Нестандартные шрифты

К данному типу относится огромное множество шрифтов, которые требуют дополнительной загрузки и установки на проекте. Одним из самых известных сайтов со шрифтами является https://fonts.google.com/, который активно используется на Фэндоме.

В некоторых случаях после установки шрифтов они становятся доступны не сразу. Чтобы увидеть изменения, рекомендуется почистить кэш браузера.

Удаление глифов

Для отображения текста на сайте обычно требуются далеко не все символы, включенные в шрифт по умолчанию. Часть из них относится к другому языку (например, к китайскому), часть — к специальным символам, которые вы не используете. Существует для удаления из шрифтов неиспользуемых глифов и по Windows / Mac. Наиболее популярные — это сервис Font Squirrel (в режиме Advanced), а также и . Также Google Fonts позволяет загружать только используемые наборы символов. Этот метод оптимизации позволяет сократить результирующий файл еще на 10-50%.

В совокупности, все указанные методы оптимизации размера подключаемых шрифтов позволяют существенно ускорить отображение сайта на всех устройствах, независимо от красоты используемых шрифтов и неплохо автоматизируются: например, в облаке Айри.рф сокращается размер поступающих с хостинга шрифтов на 20-80%.

🚫 Расширение файла .woff2 часто дается неправильно!

По данным Поиск на нашем сайте эти опечатки были наиболее распространенными в прошлом году:

woff

Мы нашли следующие аналогичные расширений файлов в нашей базе данных:

.woff
Web Open Font Format

Не удается открыть файл .woff2?

Если дважды щелкнуть файл, чтобы открыть его, Windows проверяет расширение имени файла. Если Windows распознает расширение имени файла, файл открывается в программе, которая связана с этим расширением имени файла. Когда Windows не распознает расширение имени файла, появляется следующее сообщение:

Выберите приложение для открытия этого файла .woff2

Это означает, что в операционной системе нет приложения по умолчанию, связанного с типом файла .woff2. Чтобы решить эту проблему и открыть файл, вы можете выполнить следующие действия:

• Щелкните правой кнопкой мыши на файле .woff2. Появится контекстное меню.
• В контекстном меню выберите Открыть с помощью. Windows отобразит список рекомендуемых приложений.
• Если нужное приложение есть в списке, выберите его из предложенных вариантов.
• Если вы не можете найти соответствующее приложение, возможно, вам потребуется установить программное обеспечение, поддерживающее конкретный тип файла.

Если вы не знаете, как изменить приложение по умолчанию для файла .woff2, ознакомьтесь с FAQ.

Можно ли изменить расширение файлов?

Изменение расширения имени файла — не самая лучшая идея. Расширение файла служит подсказкой для операционной системы и различных программ о типе данных, содержащихся в файле. Изменяя расширение файла, вы, по сути, изменяете то, как программы интерпретируют и обрабатывают этот файл. Каждый файл имеет определенный формат, также известный как тип файла или формат файла. Проблема в том, что изменение расширения файла не меняет его формат.

Если у вас есть полезная информация о расширение файла .woff2, напишите нам!

<< Расширение файла .woff

Расширение файла .wog >>

Использование @font face Kit Generator

Для практического тестирования, вы можете скачать пакет на Graublau Sans Web. Этот пакет шрифтов содержит шрифты OpenType, основанные на PostScript, которые поддерживаются в Safari 3.1+, Firefox 3.5+ и Opera 10+. Для того чтобы добиться такого же функционала в Internet Explorer и исправить все недочёты отображения, вы можете воспользоваться @font-face Kit Generator. Кликните на кнопку “Add Fonts” и загрузите шрифт, который хотите использовать. Затем выберите пункт “Expert” для проверки необходимых опций, о которых мы поговорим подробнее:

Форматы шрифтов

Вся проблема в том, что вам необходимо активировать поддержку EOT для работы @font-face в Internet Explorer IE4 — IE8 (в IE9 RC, WOFF уже поддерживается). Шрифты SVG вам понадобятся только для Mobile Safari, которое стоит на iPhone и iPad iOS 4.2. Chrome и Opera с этим форматом знакомы. В качестве альтернативы SVG, вы можете использовать сжатую версию SVGZ, которая занимает намного меньше места. Однако она не поддерживается на iPhone, так что вам по любому придётся работать с SVG.

Создание формата TrueType активирует поддержку в Safari (начиная с версии 3.1), Firefox (3.5) и Opera (10). В будущем WOFF грозится стать стандартным форматом для Web шрифтов.

Рендеринг и прочие параметры

• Add Hinting: эта опция предназначена для улучшения отображения на Windows. Вы можете отключить её, если шрифты уже оптимизированы.
• WebOnly добавляет специфические модификации, которые позволяют браузерам использовать данные шрифты, но исключают установку шрифтов на операционную систему. Выбор этого параметра предотвращает нарушение авторских прав.
• Keep OT Features: шрифты OpenType могут хранить в себе ряд функций. Однако данные функции почти не поддерживаются современными браузерами.
• Remove Kerning: эта ещё одна возможность уменьшить размер файла. В том случае, если вы будете использовать данный шрифт внутри тега body, очень рекомендую выбрать данную опцию.
• Simplify Outlines: эта опция уменьшает качество отображения элементов шрифта.
• Build Cufón File — это не традиционная часть внедрения @font-face.

Дополнительные настройки

Дополнительные настройки предназначены для удаления всех лишних символов. Хотите того или нет, но тут всё зависит от шрифта, который вы выбрали. Некоторые шрифты могут содержать тысячи различных символов, которые никогда не будут использоваться.

Опция Basic Subsetting стоит по умолчанию для восточных Европейцев, которые используют шрифты основанные на MacRoman. Custom Subsetting позволяют пользователю определить, какие символы он будет использовать в файле. Если опция No Subsetting деактивирована, то шрифт просто сконвертируется в том виде, в котором он есть.

CSS-форматы

Вы можете выбрать три разные версии:

• Fontspring Syntax
• Further Hardening of the Bulletproof Syntax
• Mo’ Bulletproofer
• Smiley

Fontspring syntax — это, возможно, самый простой вариант. Он может передать файл WOFF в IE9 и EOT в более раннюю версию IE. Он также будет работать на мобильных версиях браузеров и операционках, таких как iOS и Android.

CSS Опции

Для манипулирования шрифтами, вы также можете использовать следующие CSS свойства: font-weight и font-style.

Данная опция будет работать, если шрифт содержит все стили, такие как обычный, курсив, жирный и жирный с курсивом.

Последняя по списку, но не по значению, — опция Base64 Encode, которая позволяет шрифту быть закодированным согласно base64. В результате, шрифт не появится как файл в пользовательском кэше.

gZip или другой способ сжатия данных сайта

Рекомендуется включить на сервере сжатие данных перед их отправкой клиенту. Так можно уменьшить размер текстовых ресурсов, следовательно ускорить загрузку сайта.

Проверить включено ли на вашем сайт gZip сжатие можно на сервисе: gidnetwork.com/tools/

Если вы хотите узнать применяется ли вообще какая либо технология сжатия, то можно проверить сайт на сервисе: whatsmyip.org/http-compression-test/

Если сжатие выключено, и нет возможности включить его настройками на хостинге, то можно сделать это внеся инструкции в

Пример файла с настройками для gZip сжатия:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Заключение

При оптимизации сайта под Google Page Speed и Lighthouse — стоит понимать что главным приоритетом должно оставаться удобство пользования сайтом и скорость его работы, а не нарисованные синтетические баллы.

Некоторые приемы оптимизации могут быть неудобны с точки зрения разработки при частом обновлении проекта.

Не все перечисленные методы являются необходимыми для применения для выхода в зеленую зону оценки. Порой достичь зелёной зоны можно внедрив лишь часть рекомендаций.

В этой статье рассмотрены только аспекты HTML верстки. Если проект работает на CMS или фреймворке, то также стоит оптимизировать работу сервера и бэкенда.