Оптимизируйте работу css на следующих ресурсах: css — Оптимизация. Ускорение сайта

jquery — pagespeed google — Stack Overflow на русском

Для более подробной информации о скорости загрузки тестируйте ваши веб-страницы с инструментом (Гугл также рекомендует) WebPagetest = результат теста вашей главной веб-страницы. Если вы щелкните на изображение в колонке Waterfall, то вы увидите подробную информацию о загружаемых ресурсах/файлах тестируемой веб-страницы, с указанием времени загрузки для каждого ресурса. В данном анализе, в колонке Waterfall View, вы можете видеть, что наибольшие тормоза веб-страницы — это шрифты ttf (щелкните прямо на красной полосе/баре и откроется окно с подробность загрузки данного ресурса): fonts/Ubuntu/Ubuntu-Regular.ttf = Content Download: 2393 ms + fonts/Ubuntu/Ubuntu-Bold.ttf = Content Download: 2277 ms и так далее.

Рекомендации оптимизации скорости загрузки веб-страниц:

• Примените асинхронную загрузку скриптов для максимально возможного количества скриптов веб-страницы — подробнее статья Гугл «Используйте асинхронные скрипты».
• Задайте вашему лого размер, соответствующий размеру показа на веб-странице. Оптимизируйте ваши svg файлы с этим инструментом SVG Editor.
• Задайте всем изображениям ваших веб-страниц размеры, соответствующие размеру показа. Для изменения размера вы можете использовать этот инструмент Online Photo Editor.
• Сожмите изображения на ваших веб-страницах с этим инструментом ImageOptim online.
• Для устройств с экранами высокого разрешения: добавьте к элементу img атрибут srcset. Этот атрибут расширяет функциональные возможности элемента img. Благодаря ему вам будет проще назначать изображения с учетом параметров устройства. атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства. Например, использовать изображения 2x на экране 2x и, потенциально, изображения 1x на устройстве 2x при ограниченной пропускной способности сети.
  Пример:

<img src="photo.png" srcset="[email protected] 2x" ...>

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства. Вы можете задать любые условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные возможности не вошли в противоречие с будущими разработками, продолжайте назначать этому атрибуту изображение 2x.

• Для изменения изображений в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д. Пример:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

• Также вы можете определять размер обрабатываемого изображения, добавив дескриптор width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки. Пример:

<img src="lighthouse-200.jpg"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400. jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

В этом примере приведено изображение, которое занимает половину ширины области просмотра (sizes=»50vw») и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера.

Источник: статья Гугл Изображения для отзывчивого дизайна.

• Сожмите исходный код ваших веб-страниц с этим инструментом HTMLcompressor.
• Для предварительной загрузки ресурсов, требуемых для открываемой веб-страницы, примените мета тэг preload — документация W3.
• Для связанных ресурсов (могут быть затребованы пользователем, но не обязательно), примените мета тэги
  dns-prefetch + preconnect + prefetch + prerender. Эти тэги указаны в порядке повышения мощности требуемых ресурсов браузера для применения этих тэгов. Например, тэг prerender потребляет наибольшее количество мощности браузера, поэтому этот тэг может тормозить загрузку текущей веб-страницы, но связанная веб-страница с этим тэгом откроется, практически мгновенно. Определяйте важность связанных веб-страниц и потенциальную возможность их вызова пользователем. Документация W3 о этих тэгах .

Лучшее решение для полной мобильно оптимизации — это применение технологии Гугл AMP Accelerated Mobile Pages. Готовьте ваш веб-сайт к новому индексу Гугл Mobile-first Indexing — вероятно это начнётся в феврале 2018.

pagespeed insights — Как удалить код JavaScript и CSS, блокирующий отображение верхней части страницы

Вопрос задан 6 лет 9 месяцев назад

Изменён 5 лет 1 месяц назад

Просмотрен 11k раз

Доброго времени суток!

Не получается исправить последнее правило от Google Page Speed Insights:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.

Примерно 3 % содержания верхней части страницы можно отобразить, не дожидаясь загрузки указанных далее ресурсов. Попробуйте отложить ее или асинхронно загрузить блокирующие ресурсы либо встроить их особо важные составляющие прямо в код HTML.

Оптимизируйте работу CSS на следующих ресурсах: http://ecoexspert.kz/css/style.css

Попробовал разные способы:

1. перенёс CSS вниз body,
2. вынес стили в HTML документ

А Google Page Speed Insights всё равно ругается, как можно исправить проблему?

Ссылка на ресурс.

• pagespeed-insights

Установите ссылки на ваши файлы css и js внизу перед закрытым элементом /body. При этом, для валидации примените для линка стилей property=stylesheet, примерно так:

<link rel=stylesheet property=stylesheet href=code/example.css>

Поиграйте с установкой async — только для скриптов js: устанавливайте и смотрите какой результат в браузере. Также я рекомендую вам для ускорения применять сжатие исходного кода с этим инструментом и сжатие картинок с этим инструментом. Пример async:

<script async src=code/modernizr.custom.53362.js></script>

3

На всех js файлах добавьте атрибут defer, а весь css уберите куда подальше вниз. И то и другое надо минифицировать, можно еще и то, и другое вставлять в тело страницы.

1

Оставьте css сверху, js вниз, defer не ставить если подключается больше 1 файла

Сайт почему-то не доступен…

Вообще данная рекомендация гугла (о 3%) напрямую связана с тем, что внешний css-файл небольшой, поэтому лучше от него отказаться, а все стили перенести прямо в html-код страницы (в секцию HEAD). С точки зрения гугла, лучше потратить чуть больше трафика, чем создавать новое http-соединение. С учетом того, что используется gzip-сжатие для html, то всё довольно логично.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

7 приемов повышения производительности CSS

Коди Арсено

Обновлено 28 апреля 2018 г.

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

Что такое CSS?

Каскадные таблицы стилей, или CSS, — это язык, используемый для определения визуального представления веб-сайта на основе содержимого, представленного в документе языка разметки. Он считается одной из «краеугольных технологий» Интернета наряду с HTML и JavaScript. CSS обычно хранится во внешних таблицах стилей или .css , но его также можно интегрировать непосредственно в документы HTML.

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

Производительность CSS и скорость веб-сайта

При оценке скорости веб-сайта необходимо измерять различные показатели производительности, однако выделяются два из них:

• Время до первого байта
• Время до начала рендеринга

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

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

Влияние производительности CSS на время начала рендеринга

Прежде чем браузер сможет начать размещение содержимого веб-страницы, ему нужны инструкции в виде HTML и CSS. Таким образом, рендеринг не может начаться до тех пор, пока не будут загружены и обработаны все внешние таблицы стилей. Чем больше рейсов туда и обратно требуется, тем дольше посетители должны ждать.

Использование внешнего CSS включает выполнение одного или нескольких HTTP-запросов, поэтому ваша цель должна состоять в том, чтобы максимально сократить количество требуемых запросов. Например, размещение вашего плагина, баннера и стилей ссылки макета в одном файле .css может значительно ускорить время до первого рендеринга. У нас есть руководство по другим способам ограничения HTTP-запросов на веб-сайтах WordPress.

Улучшение производительности CSS: введение во встраивание

Одним из способов обеспечить быструю доставку CSS является практика встраивания. Встраивание означает вставку внешних ресурсов CSS непосредственно в документы HTML. Этот метод лучше всего работает для небольших ресурсов, но, тем не менее, дает заметную разницу.

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

Чтобы встроить CSS, просто скопируйте нужный код CSS из внешнего файла CSS и вставьте его между тегами стиля в разделе заголовка вашего HTML-документа, например:

 
    
    <стиль>
        .your-styles {
            вес шрифта: полужирный;
        }

        .и т.д. {
            цвет: #222222;
        }
    

 

Встраивание больших ресурсов CSS

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

Критический CSS — это проект GitHub, который поможет вам выбрать, какой CSS принадлежит верхней части страницы, но вам также следует выполнить ручную проверку, чтобы убедиться, что ни один критический компонент не был упущен.

После минимизации и сжатия Gzip все ваши стили, скрипты и разметка в верхней части страницы в идеале должны весить менее 14 КБ. Поскольку 14 КБ — это примерно объем данных, который сервер может отправить за первый цикл. Пребывание ниже этого порога позволяет пользователям получать все, что выше сгиба, в первом полученном пакете данных.

Улучшение производительности CSS с помощью асинхронной загрузки и кэширования

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

Умный способ обойти эту проблему включает асинхронную загрузку. К сожалению, нет способа асинхронно загружать файлы CSS изначально, но вы можете использовать скрипт, например loadCSS.js, для выполнения этой работы.

Инструменты для улучшения производительности CSS

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

Дополнительные советы по повышению производительности CSS

1. Используйте предварительную загрузку и HTTP/2 push

Подсказка ресурса предварительной загрузки сообщает браузерам, что ресурсы следует извлекать раньше, чем в противном случае. Чтобы дать вашему CSS преимущество, установите его в качестве тега ссылки в HTML-документе следующим образом:

Кроме того, вы можете включить предварительную загрузку в качестве заголовка HTTP в конфигурацию вашего сервера:

 Ссылка: ; отн=предварительная загрузка; как=стиль
 

Если ваш сервер настроен для HTTP/2 (что и должно быть), предварительная загрузка будет интерпретироваться как отправка сервером. KeyCDN также поддерживает отправку на сервер, что поможет еще больше ускорить доставку высокоприоритетных файлов CSS. Чтобы узнать больше, прочитайте наш блог push-объявлений сервера HTTP/2.

2. Не встраивайте все подряд

Не утруждайте себя встраиванием всего в свой HTML-файл, так как это приведет к увеличению размера исходного HTML-документа и, следовательно, к увеличению времени для TTFB.

3. Объедините и уменьшите свой CSS

Объединение ваших таблиц стилей в один файл и отправка уменьшенной версии может значительно уменьшить размер вашего CSS. Узнайте больше об этом процессе в нашей статье о минимизации CSS, JS и HTML.

4. Уменьшите размер ваших таблиц стилей

Чем меньше ваши таблицы стилей и чем меньше селекторов они содержат, тем меньше работы придется выполнять браузерам при отображении вашей веб-страницы. Таким образом, вы должны сделать все возможное, чтобы удалите ненужные селекторы , используйте служебные классы и избегайте дублирования кода CSS. Вы можете использовать такой инструмент, как uncss, чтобы убедиться, что ваша таблица стилей содержит только необходимый код CSS.

5. Будьте избирательны в своих селекторах

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

6. Избегайте дорогостоящих свойств

Некоторые свойства CSS значительно дороже других, поэтому их следует использовать с осторожностью. Вот несколько свойств, на которые следует обратить внимание:

• border-radius
• box-shadow
• filter
• :nth-child
• положение: фиксированное;
• transform

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

7. Избегайте

@import

Никогда не используйте директиву @import для включения внешних таблиц стилей, поскольку она блокирует параллельные загрузки. Это архаичная практика. Вместо этого всегда используйте тег ссылки.

Резюме

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

404: Страница не найдена

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

Что я могу сделать сейчас?

Если вы впервые посещаете TechTarget, добро пожаловать! Извините за обстоятельства, при которых мы встречаемся. Вот куда вы можете пойти отсюда:

Поиск

• Узнайте последние новости.
• Наша домашняя страница содержит самую свежую информацию о Java-разработке.
• Наша страница «О нас» содержит дополнительную информацию о сайте, на котором вы находитесь, TheServerSide. com.
• Если вам нужно, свяжитесь с нами, мы будем рады услышать от вас.

Просмотр по категории

Архитектура приложения

• Как поддерживать постоянство полиглотов для микросервисов

  Управление данными микросервиса может быть затруднено без многоязычной сохраняемости. Изучите, как работает стратегия, ее проблемы…

• Основные тенденции в отношениях с разработчиками для создания более сильных команд

  Узнайте о корпоративных тенденциях оптимизации методов разработки программного обеспечения, включая отношения с разработчиками, использование API, сообщество…

• 5 заслуживающих внимания проблем разработки программного обеспечения для автомобилей

  Современные автомобили оснащены технологиями, но создание автомобильных приложений не всегда является легкой прогулкой. Вот пять уникальных …

Качество ПО

• Возможности ChatGPT для тестирования программного обеспечения

  ChatGPT может помочь тестировщикам программного обеспечения писать тесты и планировать покрытие. Как команды могут предвидеть будущие возможности тестирования ИИ…

• Компании розничной торговли получают показатели DORA ROI благодаря специализированным инструментам

  Показатели DORA и другие показатели инженерной эффективности появляются в надстройках к существующим инструментам DevOps. А вот сторонний…

• Вопросы и ответы на сертификационный экзамен Scrum master

  Готовы ли вы к сертификационному экзамену Scrum master? Проверьте себя, ответив на эти 10 сложных вопросов и ответов на экзамене Scrum master.

Облачные вычисления

• Как создавать моментальные снимки Amazon EBS и управлять ими через интерфейс командной строки AWS Моментальные снимки

  EBS являются важной частью любой стратегии резервного копирования и восстановления данных в развертываниях на основе EC2. Ознакомьтесь с тем, как …

• Цены на облачную инфраструктуру взлетели на 30%

  Сложные макроэкономические условия, а также высокие средние цены реализации облачных вычислений и серверов хранения вынудили . ..

• Разверните приложение с малой задержкой с помощью AWS Local Zones за 5 шагов

  Как только вы решите, что локальные зоны AWS подходят для вашего приложения, пришло время для развертывания. Следуйте этому пошаговому видео…

Безопасность

• Microsoft: правительственные учреждения взломаны в результате атак по электронной почте

  В то время как Microsoft смягчила атаки и не обнаружила доказательств дальнейшего доступа за пределами учетных записей электронной почты, Outlook взломал …

• История, эволюция и современное состояние SIEM

  SIEM удовлетворил потребность в инструменте безопасности, который мог бы выявлять угрозы в режиме реального времени. Но новые угрозы означают, что следующая эволюция …

• Chainalysis отмечает резкий рост платежей программ-вымогателей

  Рост общих платежей программ-вымогателей в этом году является обращением вспять снижения, которое Chainalysis наблюдала в 2022 году, когда платежи упали .