От автора: внезапно мне понадобилась оптимизация CSS. Все началось с этого. Я был убежден, что делаю все, по крайней мере, нормально, но Google PageSpeed Insights оценил мою скорость как однозначно «Низкую».
Tavolia — это самый большой проект, над которым я когда-либо работал, поэтому неудивительно, что это был первый случай, когда я столкнулся с проблемами со скоростью.
Я знаю, что Google не является истиной в последней инстанции, но они являются доминирующей поисковой системой, и сделать их счастливыми означает лучший SEO.
Я хочу, чтобы сайт хорошо ранжировался, и хочу, чтобы он загружался очень быстро, особенно на смартфонах. К счастью, Google рассказал мне, как именно я должен улучшить производительность главной страницы:
Я буду изучать, как исправить эти проблемы, одновременно внося эти исправления, поэтому давайте приступим! Сегодня мы рассмотрим первый шаг: блокирующий рендеринг CSS.
Удаляем блокирующий рендеринг CSS до первого сгиба
Существует три способа загрузки CSS:
Загрузка CSS перед body обеспечивает загрузку содержимого уже с примененными стилями. За: мой контент не будет изменяться во время загрузки. Против: ничего не появится, пока не будет загружен CSS.
Загрузка CSS после body обеспечит намного более быструю загрузку контента, потому что все HTML-файлы могут загружаться раньше. За: контент появляется раньше. Против: контент в начале не оформлен стилями. Это то, что у меня есть сейчас.
Встраивание CSS до первого сгиба сделает очень быстро загружаемыми контент и стили для всего, что находится вверху главной страницы. За: контент и стили загружаются очень быстро, лучше всего работают. Против: требуется больше работы, сложнее в обслуживании. Это то, что мы будем делать сегодня.
Вот то, что Google сообщает мне о моих объектах, блокирующих рендеринг:
Примечание: это не включает JS, я уже поместил все скрипты в нижней части страницы.
Вот моя главная страница, когда я удаляю каждый из трех файлов, на которые указывает Google:
Три файла css, на которые указывает Google, это:
Bootstrap.css, который я использую для множества мелочей, таких как выпадающие списки и таблицы. Это большой файл (137kb, 19kb gzipped) с множеством неиспользуемых правил. Неудивительно, что это не сильно влияет на результат, только ломает верхние выпадающие списки и слегка меняет шрифт заголовков и подзаголовков.
Meta.css, который управляет большинством стилей CSS на моем сайте. Здесь он в основном меняет внешний вид панели навигации и цвет основной кнопки.
Home.css, созданный специально для этой страницы, является основным для вышеописанного контента. Без него вся структура разрушается.
Самым простым решением было бы встроить весь файл «Home.css». Поскольку он специфичен для этой страницы, css будет находиться только в одном месте, что упростит его поддержку.
Посмотрим, как выглядит страница с «Home.css», по сравнению с ожидаемым конечным результатом:
Это хорошее начало и приличное время до первого отображения, но если я оставлю это так, то контент будет изменяться со временем, пока не примет конечную форму. Это будет не слишком хорошим пользовательским интерфейсом, и Google укажет, что мой контент до первого сгиба слишком сильно изменяется.
Итак, давайте посмотрим, какие дальнейшие улучшения мы можем сделать.
1. font-family, font-size и background-color для body
Модуль сброса Bootstrap удаляет отступы по умолчанию, которые применяются к тегам body. Я имитирую это поведение, чтобы убрать отступы с самого начала. Я сделаю то же самое с помощью правила border-box.
Я также скопирую background-color и font-family для body, чтобы страница с самого начала имела правильный цвет фона и шрифт. Я использую оригинальный стек шрифтов, поэтому на загрузку шрифтов не потребуется дополнительное время. Я также применим правило font-sizeк к тегу html, поэтому размер будет согласованным.
Наконец, я копирую атрибуты line-height и font-weight Bootstrap, чтобы высота и ширина заголовок и подзаголовков не изменялись при загрузке.
html { font-size: var(--base-font-size);
}
body { margin: 0; background-color: var(--primary-background-color); font-family: var(--body-font);
}
*, ::after, ::before { box-sizing: border-box;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 500;
}
Примечание: поскольку я в значительной степени полагаюсь на переменные CSS, это также означает, что все мои переменные CSS теперь включены. Вот результат:
Это уже кое-что! Теперь нам нужно еще разобраться с этой надоедливой панелью навигации
2. Панель навигации и выпадающие меню
При нажатии кнопок меню выпадающие подменю получают класс «show», и к ним применяется следующее правило:
.dropdown-menu.show { display: block; }
Поэтому я могу просто скрыть выпадающие меню прямо через встроенные стили:
.dropdown-menu { display: none; }
Я также скрою содержимое меню навигации до тех пор, пока их CSS не будет загружен. К счастью, все мои ссылки навигации обернуты в класс .nav-button-wrapper, поэтому я могу легко их настроить.
Кроме того, я хочу, чтобы пустая панель навигации имела правильную высоту, поэтому я задам дня нее дополнительное поле, которое будет удалено после загрузки остальной части CSS.
Наконец, у панели навигации есть толстая фиолетовая верхняя граница и пунктирная нижняя граница. Я скопирую это правило из файла meta.css во встроенные стили. Это повторит код и усложнит его работу, но я рискну. Вот краткое описание стилей панели навигации:
.dropdown-menu { display: none; }
.nav-button-wrapper { display: none; }
nav { padding: 1.4rem; border-top: .25rem solid var(--primary-color); border-bottom: 1px dashed var(--tenth-primary-color);
}
И в файле Meta.css:
/* Отмена css до первого сгиба из home-css.html */
.nav-button-wrapper { display: block; }
nav { padding: 0; }
Конечный результат загружается нормально
Вот что мы сейчас имеем:
Панель навигации отображается нормально, а теперь нам нужно исправить нижние кнопки!
3. Кнопки
Я частично использую классы кнопок bootstrap с помощью .btn-primary и btn-light, но у меня также есть довольно много пользовательского кода.
Я удалю подчеркивание, изменю цвет, добавлю поля для обеих кнопок.
На загрузку текстуры основной кнопки потребуется некоторое время, поэтому я заменю ее встроенным цветным заполнителем.
Светлая кнопка также будет иметь свою границу и размер шрифта.
И чтобы все было правильно настроено, мне нужно задать для кнопок inline-block и предоставить для оборачивающих их абзацев отступы bootstrap по умолчанию.
p { margin-top: 0; margin-bottom: 1rem; }
.btn { display: inline-block; padding: .5rem 1rem; border-radius: 0; text-decoration: none;
}
.btn-primary { background-color: #d84a41; border: 0; color: white;
}
.btn-light { font-size: .875rem; border: 1px solid #ccc; color: inherit;
}
И, наконец, вот результат:
Слева только с встроенными стилями css; справа — когда все загрузится
Заключение
Теперь Google меня любит.
С 59/100 до 89/100, довольно значительное улучшение! Говоря по правде, я и не думал, что эти изменения окажут такое влияние на оценку скорости. Они не влияют на пользовательский опыт *слишком сильно*, и я думал, что объем моего ответа на сервер играет большую роль. Но эй, я не жалуюсь!
Автор: Barnaby Brachamul
Источник: https://codeburst.io/
Редакция: Команда webformyself.