Для чего используется сжатие css файла: Карта сайта

Основы веб-дизайна. Часть 1: планирование

• 09.10.2020
• Веб-дизайн

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

Лучшие веб-шрифты: почему веб-безопасные шрифты важны

• 03.08.2021
• Веб-дизайн

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

Введение в YAML

• 22.06.2022
• Веб-разработка

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

Краткий обзор лучших бесплатных средств проверки посещаемости веб-сайтов

• 26.03.2018
• Веб-аналитика

Средство проверки посещаемости веб-сайта быстро дает вам представление о том, сколько посетителей привлекает ваш веб-сайт и как они попадают на ваш веб-сайт. Важно ответить на следующие вопросы: Насколько успешна ваша страница? Выгодно ли сотрудничество? Проверка трафика веб-сайта особенно полезна в контексте анализа конкуренции. Здесь мы представляем шесть бесплатных инструментов, которые позволяют вам оценивать трафик…

Чем меньше, тем лучше, когда дело доходит до ресурсов страницы! – Digital.gov

Время чтения: 12 минут

Восемь принципов мобильной совместимости

На этой неделе мы поговорим о том, как уменьшить ресурсы страницы, чтобы улучшить отрисовку страницы.

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

1. Включить сжатие
2. Минимизировать ресурсы
3. Оптимизировать изображения
4. Оптимизация доставки CSS
5. Приоритет видимого содержимого

Включить сжатие

Проблема: большие файлы страниц, которые приводят к низкой производительности рендеринга

Включение сжатия файлов обычно экономит от 50 до 70 процентов размера файла и может уменьшить размер ресурсов страницы до 90 процентов.

Apache Server — включите параметры zip в файле .htaccess. Ниже приведен пример:

AddOutputFilterByType DEFLATE текстовый/обычный
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
Приложение AddOutputFilterByType DEFLATE/xml
Приложение AddOutputFilterByType DEFLATE/xhtml+xml
Приложение AddOutputFilterByType DEFLATE/rss+xml
Приложение AddOutputFilterByType DEFLATE/javascript
Приложение AddOutputFilterByType DEFLATE/x-javascript
 

NGINX Server — включите сжатие, добавив в файл конфигурации следующий код:

gzip включен;
gzip_comp_level 2;
gzip_http_версия 1.0;
gzip_proxy любой;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types текст/обычный текст/текст html/приложение css/x-javascript
текст/xml-приложение/xml-приложение/xml+rss text/javascript;
# Отключить для IE < 6, потому что есть некоторые известные проблемы
gzip_disable "MSIE [1-6]. (?!.*SV1)";
# Добавляем заголовок Variable для нижестоящих прокси, чтобы избежать отправки кэшированных
gzip-файлы в IE6
gzip_vary включен;
 

Litespeed Server — В разделе конфигурации сервера перейдите в «Настройка» и убедитесь, что «включить сжатие» включено.

Вы можете быстро выполнить тест с помощью инструмента сжатия gzip, например https://varvy.com/tools/gzip/.

И последнее предостережение: прокси-серверы и антивирусное программное обеспечение могут отключать сжатие при загрузке файлов на клиентский компьютер.

Ссылки

• Включить сжатие | https://developers.google.com/speed/docs/insights/EnableCompression
• Включить сжатие Gzip | https://varvy.com/pagespeed/enable-compression.html
• Как исправить PageSpeed ​​Insights, включающую сжатие в WordPress | https://www.proteusthemes.com/help/fix-pagespeed-insights-enable-compression-wordpress/

Сокращение ресурсов

Проблема: Большие файлы CSS, JavaScript и HTML увеличивают скорость загрузки

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

Ниже приведен пример того, как минимизация уменьшает файл CSS.

Ниже приведен несвернутый текст файла CSS:

/* Комментарий слайдера 1 */
#слайдер ул {
  положение: родственник;
  маржа: 0;
  заполнение: 0;
  высота: 200 пикселей;
  стиль списка: нет;
}
/* Комментарий слайдера 2 */
#слайдер уль ли {
  положение: родственник;
  дисплей: блок;
  плыть налево;
  маржа: 0;
  заполнение: 0;
  ширина: 500 пикселей;
  высота: 300 пикселей;
  фон: #ccc;
  выравнивание текста: по центру;
  высота строки: 300 пикселей;
}
 

Ниже приведен свернутый текст файла CSS, обратите внимание на разницу, без пробелов и все в одной строке:

#slider ul {position:relative; маржа: 0; заполнение: 0; высота: 200 пикселей; стиль списка: нет;} #слайдер ul li {позиция: относительная; дисплей:блок; плыть налево; маржа: 0; заполнение: 0; ширина: 500 пикселей; высота: 300 пикселей; фон:#ccc; выравнивание текста: по центру; line-height:300px;}

Решение.

Для каждого типа файла требуется свой процесс минимизации файла, и существует множество инструментов для минимизации каждого типа файла. Ниже приведены некоторые примеры.

• HTML
  • HTML-минификатор — https://github.com/kangax/html-минификатор
  • Инструмент HTML Minifier — https://www.webnots.com/seo-tools/html-minifier
• УСБ
  • cssnano — https://github.com/cssnano/cssnano
  • csso — https://github.com/css/csso
  • Минификатор CSS — https://www.webnots.com/seo-tools/css-minifier
• JavaScript
  • UglifyJS2 — https://github.com/mishoo/UglifyJS2
  • JSMin — http://crockford.com/javascript/jsmin
  • Компрессор YUI — http://yui.github.io/yuicompressor/
  • Минификатор JS — https://www.webnots.com/seo-tools/js-minifier

Ссылки

• Минимизация ресурсов (HTML, CSS и JavaScript) | https://developers. google.com/speed/docs/insights/MinifyResources
• YSlow: Сокращение JavaScript и CSS | https://gtmetrix.com/minify-javascript-and-css.html
• Что такое минификация и как минимизировать CSS, JS и HTML? | https://www.webnots.com/what-is-minification-of-css-javascript-and-html/

Оптимизация изображений

Проблема. Файлы изображений слишком велики и влияют на производительность

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

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

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

Решение: используйте инструменты для сжатия файлов изображений!

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

• Используйте правильные форматы файлов — Для графики, такой как значки, маркеры или другая графика, в которой не используется много цветов, используйте формат файла GIF и сохраните файл с меньшим количеством цветов. Однако, если ваше изображение имеет более детализированную графику и цвета, используйте формат файла JPEG для сохранения изображений и снижения качества. Ниже приведены еще несколько рекомендаций по формату файла:
  • Использовать файлы JPEG для всех высококачественных фотоизображений
  • Используйте файлы GIF для образов, содержащих анимацию или очень маленькую или простую графику. Например, изображения размером менее 10 x 10 пикселей или цветовая палитра менее 3 цветов
  • Никогда не используйте файлы изображений BMP или TIFF
• Сохраните изображение с правильными размерами — сохраните изображение нужного размера, чтобы уменьшить размер файла, вместо использования HTML или CSS для изменения размера изображений. Это улучшит время рендеринга. Существует множество программ для изменения размера изображений — от простой программы обработки изображений GNU (GIMP) до более сложных программ, таких как Photoshop, Illustrator или Fireworks.
• Оптимизация изображения — Обрежьте изображения, чтобы удалить все пробелы вокруг изображения, и используйте CSS для добавления отступов. Оптимизация изображения выполняется с помощью одного из многих инструментов в зависимости от формата. Ниже приведены некоторые примеры инструментов сжатия изображений.
  • Несколько типов файлов
    • ImageMagick https://www.imagemagick.org/script/convert.php
  • JPEG
    • JPEE 9 http://jpegclub.org/
    • jpegoptim http://freshmeat.sourceforge.net/projects/jpegoptim/
  • PNG
    • OptiPNG: Расширенный оптимизатор PNG http://optipng.sourceforge.net/
    • PNGOUT http://www.advsys.net/ken/util/pngout.htm

Ссылки

• Оптимизация изображений | https://developers.google.com/speed/docs/insights/OptimizeImages
• PageSpeed: Оптимизация изображений | https://gtmetrix. com/optimize-images.html
• Оптимизация изображений 101 — Оптимизация изображений постов в блоге для SEO | https://www.bloggertipstricks.com/image-optimization-seo.html

Оптимизация доставки CSS

Проблема: Таблицы стилей, блокирующие отрисовку, приводят к медленной загрузке страницы

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

В идеальном и несложном мире настройка CSS могла бы выглядеть примерно так:

• Будет использоваться одна внешняя таблица стилей размером менее 75 КБ
• Для контента, отображаемого в верхней части страницы, используйте встроенный CSS в атрибуте стиля HTML-тегов для более быстрого рендеринга страницы контента, который будет просматриваться первым
• Нет вызовов @import для CSS
• Нет CSS в HTML-коде, таком как элементы div или h2 в нижней части страницы, так как это содержимое может загружаться медленнее, чем код в верхней части страницы, который обычно читается пользователем в первую очередь.

Однако на практике все часто бывает сложнее, и каждое усложнение приводит к задержке рендеринга страницы.

Решение. Оптимизируйте файлы CSS, чтобы сделать их более эффективными!

Ниже приведены некоторые рекомендации по оптимизации файлов CSS для максимально быстрой загрузки и рендеринга для клиента:

• Не встраивайте большие URL-адреса данных — URL-адрес данных — это схема URI, которая позволяет встраивать данные в HTML-документ. Хотя встраивание небольших URI в ваш CSS может быть удобным, встраивание больших URI данных может привести к тому, что размер CSS будет намного больше, что замедлит время рендеринга страницы. В Интернете доступно множество генераторов URL-адресов данных, которые помогают наиболее эффективно создавать схемы URI.

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

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

  ), потому что это часто приводит к дублированию кода. Кроме того, включение стилей в наш код противоречит политике безопасности контента консорциума World Wide Web (W3C), которая по умолчанию блокирует стили любых уровней элементов. Дополнительные рекомендации можно найти в Рекомендации W3C 2016 Content Policy Level 2 или в рабочем проекте W3C 2018 Content Security Policy Level 3.

• Если у вас есть более одного файла CSS, их следует объединить в один файл. — Если вы используете несколько внешних файлов CSS, объедините их в один файл, чтобы ускорить загрузку за счет уменьшения времени загрузки файлов туда и обратно.

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

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

Когда ваш сайт и страницы будут готовы, запустите их на этих двух сайтах, что поможет вам оценить производительность ваших листов CSS:

• Инструмент доставки CSS https://varvy.com/tools/css-delivery/
• Встроенные сценарии CSS https://www.giftofspeed.com/inline-your-css-code/

Ссылки

• Оптимизированный тест CSS | https://www.giftofspeed.com/css-delivery/
• Оптимизация доставки CSS
  • https://developers. google.com/speed/docs/insights/OptimizeCSSDelivery
  • https://varvy.com/pagespeed/optimize-css-delivery.html

Приоритет видимого содержимого

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

Видимый контент — также называемый над линией сгиба (газетный термин) — это часть экрана, которую пользователь видит в первую очередь, прежде чем он прокрутит страницу. Часто это заголовок и/или меню навигации. Пользователи хотят, чтобы страница загружалась быстро. Однако многие веб-страницы довольно велики, и ни один пользователь не хочет ждать, пока загрузится вся страница, прежде чем он увидит какой-либо видимый контент. Чем больше страница, тем больше сетевых циклов требуется для извлечения и отображения содержимого верхней части страницы. Загрузка видимого контента перед другими элементами страницы создает гораздо лучший пользовательский интерфейс.

Решение.

В дополнение к другим приведенным выше рекомендациям по производительности (таким как Доставка CSS), ниже приведены некоторые дополнительные рекомендации, которые можно использовать для определения приоритетов и ограничения размера страницы для улучшения визуального восприятия контента:

• Структура HTML для загрузки сначала видимого или верхнего содержимого — Самый простой способ улучшить то, как пользователь воспринимает время загрузки веб-страницы, — сначала загрузить HTML-код, необходимый для содержимого верхней части страницы, поместив его вверху HTML-файла в тегах body. Поскольку браузер считывает HTML по одной строке кода и по порядку, код для видимого содержимого будет прочитан и выполнен первым.

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

• Загрузить компоненты в порядке важности — Перечислите свои компоненты и упорядочите их от наиболее важных к наименее важным и найдите способ загрузить их в порядке приоритета. Например, если у вас есть основной контент и боковая панель, которая включает в себя рекламу Google AdSense, кнопку Twitter, кнопку Facebook и кнопку Google Plus, было бы наиболее выгодно загрузить главную страницу, а затем менее важную боковую панель, а затем любой нижний колонтитул. такой контент, как местонахождение компании и контактная информация. Наконец, попробуйте оставить любую обработку JavaScript до конца после загрузки страницы, чтобы сэкономить время. Загружая вещи в порядке приоритета, пользователь может начать просматривать видимый контент или верхнюю часть страницы, пока загружается остальная часть страницы, и он сообщит об отличной загрузке страницы, даже если вся страница на самом деле не загружена.

  No related posts.