Сжатие CSS для уменьшения времени загрузки


Оглавление (нажмите, чтобы открыть):

Уменьшаем размер CSS файла и ускоряем его загрузку

Вопрос оптимизации загрузки web-странички был актуален всегда, даже не смотря на всевозрастающую скорость передачи данных в сети. Уменьшение времени загрузки сайта — это одна из самых важных тем вебдизайна. Обычно основное внимание уделяется уменьшению размеров изображений и оптимизации запросов к БД. Но также стоит уделить внимание и усечению ненужных символов как в самом файле кода странички так и в файле с описаниями его стилей. Тем более, что часто файл с описанием стилей съедает довольно ощутимое пространство трафика.

Но это ведь нас не может устраивать. Давайте научимся делать все лаконично и экономично! Рассмотрим несколько способов уменьшения стандартного файла СSS и проверим эффективность каждого из способов на деле, выполняя замеры его веса в байтах. Итак, какие же существуют способы оптимизации описания стилей? Сперва, рассмотрим пример обычного CSS файла.

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

Автоматическая оптимизация

Первая операция, которую мы применим к файлу CSS, должна упростить наш код, удалив не нужные символы как, например, двойной пробел или точка с запятой не к месту. Заходим на www.cleancss.com/ и процессируем наш код .

После не сложных манипуляций размер файла уменьшился до 448 байт, а это значит, что мы хоть и немного, но сделали загрузку файла быстрее. А это уже успех.

Сжатие стилевых свойств

Перейдем к простым манипуляциям, которые не испортят читабельности, но вместе с тем уменьшат размер нашего CSS файла. Запишем все стилевые свойства построчно, исключив пробелы после знаков ‘;’

Теперь размер нашего файла уменьшился до 400 байт. т.е. уже меньше на 115байт от первоначального.

Пишем стили в одну строку

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

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

Как включить gzip сжатие и ускорить загрузку сайта

Автор: Сергей Коваленко · Опубликовано 12.03.2020 · Обновлено 04.10.2020

В этой статье рассмотрим как включить динамическое gzip сжатие в файле .htaccess на хостинге с поддержкой Apache и тем самым ускорить скорость загрузки вашего интернет ресурса.

Зачем включать динамическое gzip сжатие

Как вы наверное уже знаете, скорость загрузки сайта влияет и на позиции его выдачи в поисковых системах и на восприятие сайта пользователями. Сейчас интернет пестрит динамичными, супер крутыми и красивыми сайтами. Но когда начинаешь пользоваться подобным ресурсом и он начинает по 10 -15 секунд загружать свои странички, то потихоньку пропадает всякий интерес к нему. Так как мы не готовы столько ждать, ведь время один из самых драгоценных ресурсов, которым мы располагаем и не хотим его тратить попусту.

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

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

Преимущества и недостатки динамического gzip сжатия

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

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

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

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

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

В этой ситуации много зависит от используемого вами хостинга и от количества сжимаемых файлов на сервере.

Как проверить наличие gzip сжатия на сайте

Для того чтоб проверить, работает ли gzip сжатие на сайте достаточно посетить ресурс PageSpeed Insights от Google, и провести там анализ скорости загрузки сайта. Если у вас не включено сжатие то среди других советов по оптимизации загрузки сайта будет присутствовать пункт «Включите сжатие».

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

Если вести диалог со службой поддержки вашего хостера сложно, то вы сами можете проверить запуск gzip на вашем хостинге воспользовавшись сервисом HTTP Compression Test. Для этого перейдите по ссылке.

Включение gzip через файл .htaccess

Когда вы убедились, что gzip работает у вас на хостинге, но при проверке скорости загрузки сайта через ресурс PageSpeed Insights от Google все равно появляется рекомендация включить сжатие, стоит проверить, возможно оно не включено у вас в файле .htaccess.

Обязательно сохраните резервную копию перед тем как проводить любые изменения в файле!

Для этого заходим в корневой каталог сайта на сервере и открываем для редактирования непосредственно сам файл .htaccess. Ищем в нем строки:

Как упороться по оптимизации скорости загрузки страниц

При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье.

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

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

Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

Содержание:

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

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

Просмотреть такое соотношение можно проще и без использования дополнительных сервисов. В браузерных инструментах для разработчиков можно навести на адрес изображения:

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

При возможности, для части изображений страниц рекомендуется использовать отложенную загрузку (Lazy Load), которая позволит первоначально загрузить только те изображения, которые видны пользователю при открытии страницы. Все последующие изображения будут догружаться по мере скроллинга.

Тут буду краток — круто, если это будет реализовано на большом контентном проекте. Однако после внедрения на одном из самых крупных сайтов в моей практике, скорость загрузки не изменилась.

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

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

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега . Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

Если же доработка по минификации разовая, можно обратиться к выгрузке оптимизированных данных из отчёта Google PageSpeed Insights как это было показано в пункте про оптимизацию изображений.

Оптимизация JS

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

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

Загружать только те скрипты, которые используются на странице. Браузеру не следует загружать лишние скрипты, которые не влияют на работу элементов просматриваемой страницы.

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

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

Встраивание JS скриптов в HTML-код

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

Оптимизация скорости загрузки сайта по Google PageSpeed Insights


Краткое содержание статьи:

PageSpeed Insights — инструмент от Google, анализирующий производительность страницы на мобильных и десктопных устройствах с предоставлением рекомендаций по их улучшению. Зачем его использовать? В лидирующих поисковых системах скорость сайта является важным критерием ранжирования. От того, насколько быстро произошла загрузка страницы, зависят не только трафик и позиции сайта, но и конверсия, глубина просмотров, лояльность пользователей и прочие важные параметры интернет-маркетинга.

Кратко об изменениях в работе инструмента

Раньше при оценке сайта Google основывался на своих метриках и правилах. Из недостатков: инструмент мог показывать оптимизированные страницы с быстрой загрузкой, но по факту страница могла грузиться долго, и при этом оценка отображаться высокой. Была и обратная ситуация: страницы загружались быстро, а оценка была низкой. 12 ноября 2020 года инструмент был обновлен. Формулы подсчета показателей полностью сменились, а также добавились новые.

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

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

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

  • 90 или выше – быстрая;
  • от 50 до 89 – средняя;
  • ниже 49 – медленная.

Данные наблюдений и Origin Summary

Далее располагаются данные наблюдений и Origin Summary, которые отображаются в том случае, если хватает данных для статистики. В целом они показывают сводную информацию о скорости проверяемой страницы в сравнении с другими страницами, по которым были собраны данные за последние 30 дней. Origin Summary отличается от «Данных наблюдений» тем, что оценивает скорость всех страниц вашего сайта.

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

  • Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
  • Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

Имитация загрузки страницы

Имитация загрузки страницы оценивается по 6 показателям:

  • Время загрузки первого контента (FCP).
  • Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
  • Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
  • Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
  • Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
  • Максимальная потенциальная задержка (FID).

«Оптимизация», «Диагностика» и «Успешные аудиты»

В разделе «Оптимизация» указывается то, что поможет ускорить загрузку проверяемой страницы. Раздел «Диагностика» – это дополнительная информация о соответствии страницы рекомендациям по производительности. В целом он также содержит информацию по оптимизации тех или иных показателей, поэтому уделить внимание необходимо обоим разделам.

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

Раздел «Успешные аудиты» показывает параметры, которым соответствует ваша страница. Здесь остаётся только облегченно вздохнуть и порадоваться, что это дорабатывать не нужно.

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

  • Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
  • Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
  • Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

  • Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
  • Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media=»print» в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:

  • На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.
  • С самописными сайтами будет более-менее понятно, что и куда переносить, но на сайтах с готовыми CMS это будет сделать сложнее. В этом случает помогут следующие плагины:

    • Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
    • Для Joomla плагины JCH Optimize.
    • Для Drupal плагины JCH Optimize.
    • В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
    • Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

    Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

    Используйте современные форматы изображений

    В этом разделе инструмент рекомендует использовать форматы изображений JPEG 2000, JPEG XR и WebP, которые превосходят JPEG и PNG в характеристиках сжатия и сохранения качества.

    Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

    Исходя из приведенных таблиц наиболее лучшим оказывается формат WebP (но всё еще не универсальным), который можно получить следующим образом:

    • Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
    • Плагин AdobeWebM для Adobe Photoshop CC.
    • Плагины для CMS:
      1. для WordPress плагин WebP Express.
      2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта — оптимизация css, js и картинок» и Ammina Optimizer.
      3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
      4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
      5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

    Настройте эффективную кодировку изображений

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

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

    • PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
    • JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
    • GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

    Оптимизация изображений может происходить следующим образом:

    • Вручную с помощью Adobe Photoshop и с использованием экшенов.
    • Пакетное преобразование с помощью FastStone Image Viewer.
    • Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
    • С помощью доработки кода, например в Bitrix.
    • С помощью плагинов:
      1. для WordPress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
      2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
      3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
      4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
      5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

    Удалите неиспользуемый код CSS

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

    Если вы знаете, что на вашем сайте есть неиспользуемые стили, то следует удалить их. Сюда же относится перенос стилей вниз (в пределы тега body), которые не нужны для отображения важного контента на первом экране.

    Сократите время ответа сервера (время до получения первого байта)

    Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

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

    • Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
    • Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
    • Оптимизируйте таблицы базы данных MySQL.
    • Если используете старую версию CMS, лучше обновите её до последней версии.
    • Включите кеширование сайта браузером.
    • Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
    • Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
    • Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
    • Выполните рекомендации из разделов Google PageSpeed Insights, описанных выше.

    Дополнительные варианты плагинов для популярных CMS, которые помогут в сокращении ответа сервера:

    1. Для WordPress плагины WP Super Cache, PHP Speedy WP, Optimize DB.
    2. Для Bitrix предлагаем варианты, в которых можно ознакомиться, как ускорить сайт.
    3. Для Joomla уже упоминаемый плагин JCH Optimize, а также включение кеширования в админ-панели.
    4. Для Drupal модули «Authenticated User Page Caching (Authcache)», «CSS GZIP», «JavaScript Aggregator», «eAccelerator».
    5. Для Opencart модули Smart Optimizer, Turbo OpenCart.

    Уменьшите размер кода JavaScript

    Все, что поможет справиться с этой проблемой, ищите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте показ всего текста во время загрузки веб-шрифтов

    Данный раздел сообщает о том, что пользователи сайта не увидят ваш контент до тех пор, пока шрифты не будут подгружены. Добавьте в тег link параметр display=swap, таким образом браузер будет отображать дополнительный шрифт, пока основной шрифт не будет загружен полностью.

    Далее в стилях к основному шрифту необходимо подключить дополнительный шрифт в font-family. Например:

    Если же вы отдаёте предпочтение локальным шрифтам, то в @font-face добавьте свойство «font-display: swap;»:

    Минимизируйте работу в основном потоке

    В этом разделе подразумевается оптимизация кода JS: удалите неиспользуемый JS, первым загружайте только необходимый, сожмите данные JS. Более подробно смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите размер структуры DOM

    DOM (от англ. Document Object Model – «объектная модель документа») может нанести ущерб производительности страницы, если оно имеет большое дерево. Дерево DOM состоит из объектов, которые называются узлами, например это элементы HTML, текстовое содержимое, закомментированный код и пр. Оптимальное количество узлов в DOM 1500, глубина – 32 узла, количество дочерних и родительских элементов – менее 60.

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

    Задайте правила эффективного использования кеша для статических объектов

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

    Сократите время выполнения кода JavaScript

    Здесь снова говорится об улучшении кода JS – необходимо уменьшить размер фрагментов кода JS: использовать только тот, который нужен для правильной работы сайта; сократить, сжать данные кода и кешировать. Более подробно о том, что может помочь смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите глубину вложенности критических запросов

    В этом разделе говорится о цепочке критических запросов, которые позволяют браузеру загружать страницу как можно быстрее, с определением приоритетов загружаемых ресурсов и порядком их загрузки. Например, браузер обрабатывает HTML, к нему подключены CSS ресурсы, он начинает обрабатывать их, а далее обнаруживается, что к HTML подключены и шрифты, для обработки которых ему снова нужно отправить запросы. Решить проблему можно добавлением в тег link значение rel=preload. Более подробно смотрите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте подходящий размер изображений

    Помимо рекомендации сжатия всех изображения без потери качества, есть еще несколько вариантов исправления данной ошибки в PageSpeed Insights:

    • Внедрение адаптивных изображений, у которых есть несколько версий размеров.
    • Использование SVG – векторный формат изображений.
    • Адаптивные изображения на основе клиентских подсказок, которые сообщают браузерам информацию о ширине области просмотра, ширине изображения и пр.

    Отложите загрузку скрытых изображений

    При заходе на сайт, посетителю отображается первый экран. Если на странице большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет. Чтобы пользователь не закрыл страницу, необходимо сделать, чтобы загрузка происходила максимально быстро, для этого рекомендуется использовать lazy loading или «ленивая загрузка» при которой изображения будут подгружаться асинхронно. Lazy loading можно реализовать несколькими способами:

    • Использование Intersection Observer API.
    • Скрипты Lazy loading (David Walsh), BLazy, Lazy Load XT jQuery, Yall, Lazysizes.
    • Для WordPress плагины Lazy Load, a3 Lazy Load, Rocket Lazy Load.
    • Для Bitrix решение «Ленивая загрузка изображений».
    • Для Joomla плагин LLFJ Lazy Load.
    • Для MODX плагины Lazy load, Lazy image.
    • Для Opencart плагин Lazy Load Images.

    Уменьшите размер кода CSS

    Сокращение CSS может улучшить загрузку страниц вашего сайта. Для сжатия CSS вы можете использовать различные сервисы, например: cssresizer.com, csscompressor.com, css-minifier.com, а также плагины.

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

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


    Для текстового содержимого рекомендуем использовать алгоритмы сжатия GZIP, Deflate или Brotli на вашем сервере. GZIP является наиболее распространенным, так как поддерживается большинством браузеров. На некоторых хостингах по умолчанию включено сжатие. Также можно воспользоваться плагинами по сжатию текста, которые мы перечислили в ранее упоминаемых разделах.

    Используйте предварительное подключение к необходимым доменам

    Для быстрого соединения с внешними ресурсами, указанными в коде вашего сайта (напр. Google Fonts) рекомендуется добавлять подсказки preconnect или dns-prefetch, чтобы сообщить браузеру, что загрузка должна быть установлена как можно быстрее. Примеры:

    Избегайте большого количества переадресаций

    При цепочках редиректов возникает замедление скорости загрузки страницы, так как браузеру приходится несколько раз запрашивать ресурс. В данном разделе инструмент укажет ресурсы, которые перенаправляются, также их можно найти с помощью программы Netpeak Spider, redirectdetective.com, redirect-checker.org и пр. онлайн-сервисами. Чтобы найти, где задана цепочка редиректов проверьте: .htaccess, nginx.config, PHP, HTML и JavaScript.

    Настройте предварительную загрузку ключевых запросов

    Предварительная загрузка позволяет быстрее отобразить страницу. Реализовать её можно путём добавления в тег link значение rel=»preload». Более подробно было рассмотрено выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Используйте видеоформаты для анимированного контента

    Для повышения производительности вашего сайта не рекомендуется использовать большие GIF-файлы с анимацией, лучше – использовать форматы MPEG4, WebM. Для конвертации можно воспользоваться сервисами: convertio.co, ezgif.com, onlineconvertfree.com и пр.

    Предотвратите чрезмерную нагрузку на сеть

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

    Итоги. Многие рекомендации инструмента по оценке скорости загрузки сайта Google PageSpeed Insights перекликаются между собой. Исправив наиболее серьезные ошибки, которые включают в себя не один вид доработок, вы исправите и ряд других, которые в последствии будут отображаться в успешных аудитах инструмента. Важно помнить, что достижение 100 балов не должно наносить ущерб ни функционалу, ни дизайну сайта. Стремление к высокому баллу может быть не оправданным. И помните, что PageSpeed Insights содержит лишь рекомендации по улучшению вашего сайта, однако и без внедрения некоторых из них, ваш сайт может отлично функционировать и приносить доход.

    Как сократить время загрузки сайта до двух секунд средствами Google Chrome

    Время загрузки веб-проекта часто играет решающую роль. Если сайт грузится слишком долго, поисковики будут понижать его в выдаче, а пользователи закрывать, не дождавшись. Мы перевели рассказ разработчика Lucidchart, в котором он описывает, как его команда снизила время загрузки веб-приложения до двух секунд. Хотите так же? Читайте дальше!

    Рассказывает Бен Дилтс, разработчик из Lucidchart

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

    Общий лимит времени для загрузки приложения и отображения пользовательского контента составлял 2 секунды. Это примерно половина медианного времени загрузки нашего полноценного приложения.

    Примерно месяц спустя мы достигли своей цели. И вот как мы это сделали.

    Надёжно замеряем прогресс

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

    • пропускную способность сети;
    • латентность сети и её надежность;
    • состояние кэша браузера;
    • доступную мощность процессора.

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

    1. Тестирование проводится на стандартном Linux-ноутбуке для разработки Lenovo P50, i7, 32GB RAM, SSD.
    2. Тестирование должно проводиться в только что запущенном Chrome.
    3. В инструментах разработчика Chrome:
      • Отключить кэш браузера.
      • Установить пропускную способность сети на уровень «Fast 3G».
      • Замедлить процессор в 4 раза.

    Уменьшение пропускной способности сети и замедление процессора делает результаты тестов соизмеримыми с реальной жизнью, а также сопоставимыми друг с другом. Каждый раз, когда мы хотели замерить производительность, мы выполняли весь процесс (закрывали Chrome, открывали его, разбирались с инструментами разработчика, загружали страницу) по три раза, чтобы убедиться, что в процессе замера не было никаких аномалий.

    Granatum, удалённо, средняя по рынку от 60 000 до 150 000 ₽

    Чтобы достичь загрузки за 2 секунды на полной скорости, мы поставили цель в 9 секунд при замедленном процессоре, пропускной способности и отключенном кэше. После первых замеров результат был около 13 секунд.

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

    Убираем лишнее

    Основным инструментом, который мы использовали для анализа производительности загрузки, была вкладка «Perfomance» инструментов разработчика Chrome, которая подробно показывает как сетевую активность, так и активность процессора на одном графике:

    Первое, что мы здесь заметили, это то, что мы тратили около 6,5 секунд из нашего 9-секундного лимита просто на загрузку приложения. Большую часть этих ресурсов потреблял JavaScript.

    Сначала мы решили уменьшить общий вес кода, убрав зависимости, которые нам были не нужны. Например, мы знали, что в приложении не пригодятся наши старые UI на первом Angular, поэтому мы спокойно убрали весь Angular 1 из зависимостей. В конечном итоге мы уменьшили зависимости наполовину и сократили вес на 150 КБ в сжатом виде.

    Затем мы взялись за код самого приложения. Мы использовали отличный проект source-map-explorer для изучения наших скомпилированных JavaScript-пакетов. Этот инструмент даёт визуальное представление того, какой конечный вес (не сжатый) имеет код из каждого файла и директории.

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

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

    Brotli спешит на помощь

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

    Джеймс Джадд предложил нам использовать brotli вместо gzip для сжатия наших статических ресурсов, так как почти все поддерживаемые нами браузеры умеют работать с brotli.

    Brotli — формат сжатия без потерь с открытым исходным кодом, созданный Google. Он довольно медленно сжимает, но распаковывает со скоростью, сравнимой с gzip. Вы никогда не будете использовать brotli для работы с динамически генерируемым контентом, но зато он отлично подойдёт для работы с JavaScript и CSS-ресурсами.

    В результате использования brotli вместо gzip общий размер ресурсов уменьшился на 15–20 % и время загрузки снизилось до 4,5 секунд, оставляя нам 4,5 секунды для парсинга/компиляции/выполнения скриптов, загрузки и отображения пользовательского контента.

    Для анализа веб-сайтов существует множество различных сервисов. Заинтересованы в оптимизации? Тогда наша подборка для вас.

    Железо не должно сидеть без дела

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

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

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

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

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

    В итоге нам удалось сократить время простоя процессора с 1,3 секунды до 0,2 секунды.

    Всё подождёт

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

    Мы рассмотрели каждый сетевой запрос, исходящий во время инициализации приложения, и решили, что почти все из них могут подождать. Загрузка крошечного API YouTube только на случай, если пользователь решит встроить в диаграмму видео на YouTube? Подождём до тех пор, пока не проверим, что присутствует видео с YouTube. Проверка списка каналов в Slack в случае, если они интегрированы с Slack для обмена диаграммами? Подождём, пока они откроют диалог обмена. Загрузка словаря переносов? Подождём, пока пользователь включит расстановку переносов. Подписка на канал обсуждения диаграммы? Это может подождать несколько секунд, пока документ не будет интерактивным.

    Затем мы стали думать, какую работу процессора можно отложить. Инициализация элементов пользовательского интерфейса вроде некоторых диалоговых окон могла подождать до тех пор, пока они не станут видны. Создание экземпляров классов, которые предоставляют данные элементам интерфейса (например, должна ли кнопка быть активирована), можно отложить до первого обращения к ним.

    Успех

    В конце концов, нам удалось снизить время загрузки до нашей 9-секундной цели.

    Когда мы отключили всё замедление и запустили приложение на полной мощности, результаты наших усилий были впечатляющими. Мы без проблем достигли цели в 2 секунды загрузки. И знаете, что самое приятное? Многие из этих достижений было просто применить к нашему полноценному редактору Lucidchart, что снизило среднее время загрузки на lucidchart.com более чем на 10 %.

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

    • Улучшайте точность ваших замеров, проводя их на распространённом оборудовании с уменьшенной пропускной способностью сети и процессором.
    • Уменьшение количества кода чрезвычайно важно. Проверьте, можно ли что-нибудь сделать с вашим кодом и зависимостями.
    • Сжатие с помощью brotli может помочь сильно уменьшить объёмы загрузок для таких статических ресурсов, как код.
    • Выполняйте сетевые запросы как можно раньше и как можно реже, чтобы снизить время простоя процессора.
    • Откладывайте как можно больше работы, пока приложение не будет загружено и не станет интерактивным.

    Сжатие CSS на сервере?

    Доброе утро Хабрчане!

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

    Хотел спросить у вас, имеется ли инструмент для переформатирования css файлов? И как бороться с этим сжатием?

    Я понимаю что сжатие это хорошо, но на этих проектах это не нужно, так как проекты не большие.

    15 Сервисов сжатия CSS файлов

    Вступление

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

    Сжатие и валидность

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

    Именно поэтому, все 15 Сервисов сжатия CSS файлов тестирую по простенькому алгоритму (пункты 1 и 2 в начале, пункты 3 и 4 для каждого сервиса сжатия):

    1. Беру контрольный CSS файл шаблона Twenty Seventeen. Его объем 84,8 кБ.
    2. Проверяю его на валидность тут ( https://jigsaw.w3.org/css-validator/ ).
    3. Использую сервис сжатия из списка ниже.
    4. Опять проверяю на валидность.

    Результаты и описания сервисов сжатия CSS файлов в этом обзоре.

    Проверка валидности тестируемого файла

    Проверяем фал на валидность на сервисе W3 ( https://jigsaw.w3.org/css-validator/ ).

    Результат: Проверка файла CSS шаблона Twenty Seventeen на валидность показала 10 ошибок и 106 предупреждений. Сервис сам исправляет эти ошибки, и отдает файл исправленным ниже ошибок. Теперь у нас есть валидный файл CSS для дальнейшего тестирования. Объем файла после исправления снизился до 67 кБ.

    15 Сервисов сжатия CSS файлов

    Инструмент css сжатия cy-pr.ru

    Это единственный русскоговорящий сервис этого обзора. Набор инструментов cy-pr.ru tools пользуется хорошей популярностью среди веб-мастеров, для простого, можно сказать общего, анализа сайта. Есть среди инструментов и сжатие файлов css.

    В контексте использования для сжатия CSS файлов WordPress, этот инструмент интересен, тем, что после сжатия не нарушает структуру файла. Такой файл удобнее читать и он не нарушает правила составления CSS файлов WordPress.

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

    Тестирование

    • Тест с выбранным файлом дает такой результат:
    • Исходный код: 66.978 Кб, Оптимизированный код: 56.704 Кб, Коэффициент: 15.3% (-10274 байт)
    • Валидность после сжатия: вижу что ошибок не появилось.
    • Результат. Сжатие файла было хорошее (15,3%), валидность заранее исправленного файла после сжатия не пострадала.
    • Итог. Сервис тест прошел.
    • Примечание. Я специально так подробно показал это тестирование, чтобы вы поняли алгоритм оценки.

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

    cssdrive.com

    Отличная утилита для сжатия CSS файлов. Можно выбрать один из трех уровней сжатия, в зависимости от того, насколько читаемым должен быть сжатый CSS файл. По умолчанию стоит режим «Normal». Он отдает хороший результат сжатия.

    Результат сжатия тест файла:

    • Оригинал: 70611 bytes
    • Сжатый файл: 62946 bytes
    • Сжато: 7665 bytes (11%).
    • Валидность w3: Ошибок не обнаружено.


    cleancss.com

    Сжатие файлов CSS это лишь один из инструментов этого ресурса. Здесь сжать можно всё (смотрим скрин).

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

    Тестовый файл сжался, но информации о сэкономленном объеме я не получил. При этом полностью убралось структурное (каскадное) оформление файла, что в принципе не является ошибкой WordPress, но не рекомендовано для распространения.

    Проверяю сжатый файл на валидность: ошибок НЕТ.

    Смотрю объем сжатого файла в свойствах, вижу его новый объем 56,1 по сравнению с 65,4. А это сжатие на 14%. Неплохо.

    csscompressor.com

    Вот что пишет автор в анонсе. Используйте CSS Compressor для сжатия CSS (CSS 1, CSS 2, CSS 2.1 и CSS 3), чтобы уменьшить размер CSS-кода и ускорить загрузку вашего сайта. Вы можете выбрать один из четырех уровней сжатия, в зависимости от того, насколько читаемым вам нужен сжатый CSS, и степень сжатия. Это быстро, легко и бесплатно!

    Подтверждаю, отличный инструмент, с простым и современным дизайном сервиса. Работает просто, есть дополнительные настройки.

    • Из недостатков, отсутствие возможности проверить загрузочный файл CSS с компьютера.
    • Проверка тестового файла в режиме стандартного сжатия дала, экономию 10,23%.
    • Контрольная проверка файла на валидность ошибок не выявила.

    Giftofspeed.com

    Данный инструмент позволяет сжимать файлы CSS по загрузке, по URL и через поле ручного ввода без ограничения объема.

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

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

    • Original size: 66979 bytes
    • Compressed size: 57097 bytes
    • You save: 14.75%
    • Валидатор сжатый файл прошел без ошибок.

    pagecolumn.com

    Простой инструмент сжатия без лишних настроек. Работает мгновенно.

    • Было: 64496 bytes
    • Стало: 56595 bytes
    • Сжатие: 12.3%

    А вот проверка на валидность выявила одну критическую ошибку разбора.

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

    lotterypost.com

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

    Этот инструмент не хранит копию вашего кода. Сервер обрабатывает его «на лету» и возвращает результат вам, не сохраняя ничего. Поэтому, если вы используете этот инструмент для сжатия суперсекретного CSS-кода (если есть такая вещь), он не сохраняется или не читается автором

    • Размер ввода: 64,495 байт
    • Размер выходного файла:57,059 байт
    • Сжатие:7 436 байт (вход уменьшен на 11,5%)
    • Время:0,9259 секунд

    Валидность без ошибок.

    Примечание: Я специально добавил столь подробное описание сервиса, чтобы подчеркнуть еще одну грань онлайн инструментов – безопасность информации.

    phpinsider.com

    Очень простой инструмент сжатия CSS, о котором даже писать нечего и не хочется. Правда, результат сжатия валидный, а тестовый файл сжался на 9,15%.

    cssportal.com

    Этот веб-ресурс, а по сути это портал, заслуживает внимание. Здесь вы можете не только сжать и проверить на валидность CSS фалы (только по url). Можно генерировать CSS коды с визуальным контролем результата, и делать любые работы с файлами CSS. Для сжатия масса настроек и режимов сжатия. После сжатия указаны рекомендации, а структура файла не нарушается.

    При сжатии контрольного файла получены результаты:

    • Input: 66.979KB,
    • Output: 60.764KB,
    • Compression Ratio: 9.3% (-6215 Bytes).

    creativyst.com

    generateit.net

    Клон www.cssportal.com с кривой работой.

    tools.arantius.com

    JavaScript инструмент, дающий на контрольном файле 11,19 % сжатия. Сносит структуру файла, но отдает валидный результат. Просто и не интересно.

    refresh-sf.com

    Инструмент сжатия: Online JavaScript/CSS/HTML Compressor

    Перед выпуском уже готовой статьи встретил ссылку на это инструмент. Он может сжимать не только CSS файлы. После сжатия контрольного файла CSS, получил такой результат:

    • Вход: 64.50 KB
    • Выход: 55.08 KB
    • Gzip: 10.64 KB.

    Общие выводы

    Честно говоря, в начале статьи, для себя я бы остановился после первого компрессора. Однако, к выводам, рекомендую www.cssportal.com и не столько для сжатия, сколько для комплексной работы с CSS файлами.

    Итак, для сжатия рекомендую:

    Для работы с CSS файлами:

    Выбирайте, что вам больше нравиться, а сжимая файл, не забывайте про его валидность и проверяйте её до и после сжатия, тут:

    Как сократить время загрузки сайта и не терять 53% посетителей

    Akamai и SOASTA проанализировали данные нескольких миллиардов посещений крупнейших интернет-магазинов и выявили, что 53% посетителей оставляют страницу, на загрузку которой требуется 3 секунды и более. Каждая дополнительная 0,1 секунды (100 миллисекунд) увеличивает отказы ещё на 7%.

    Из этого следует, что сайты должны загружаться менее чем за 3 секунды. В идеале, время первой отрисовки контента 2 секунды и менее, с последующим подгружением остального контента. Вы можете возразить, что это невозможно для интернет-магазина, так как тут много контента и изображений. Но главная страница крупнейшего в мире интернет-магазина Amazon содержит 110 товаров с фотографиями (а также баннеры, изображения, иконки, логотип и текст). При этом первая отрисовка контента происходит за 1,8 секунды.

    Для того чтобы измерить скорость (время загрузки) сайта можно использовать разные сервисы, например: GTMetrix, Pingdom или Google Page Speed Insights. Последний сервис от Google является наиболее популярным.

    Как сократить время загрузки сайта

    1. Оптимизируйте изображения

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

    Используйте форматы с более эффективным сжатием. Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.

    Используйте сервисы. У вас нет графического редактора? Вам помогутCompressor.io или TinyPNG. Оба инструменты бесплатны и эффективны. Способны сжимать изображения до 80% без заметной потери качества.

    Сокращайте фактический размер изображений. Например, необходимый размер изображения на сайте 300×300 пикселей. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать 300×300 пикселей. Не стоит загружать изображение размером 600х600 пикселей и затем подгонять размер картинки с помощью CSS или HTML кода до необходимых 300х300 пикселей. Потому что меньший размер в HTML ещё не значит, что он занимает меньше места на сервере. Браузеру все равно нужно загрузить полное изображение. Поэтому, проверяйте требуемую ширину и высоту изображения, и если нужно уменьшайте до загрузки.

    2. Используйте сжатие GZIP

    Это метод сжатия, который может значительно ускорить работу сайта, уменьшив размер файла на целых 70% без ухудшения качества изображений или видео. Чтобы узнать поддерживает ли ваш сайт GZIPPED, можно пройти простой тест. Функция сжатия GZIP активируется в настройках сервера. Если это звучит сложно, то просто обратитесь в службу поддержки вашего хостинг-провайдера, они помогут активировать данную функцию.

    3. Javascript и таблицы стилей CSS

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

    4. Используйте CDN

    В России (в связи с протяженностью территории) может происходить задержка прохождения интернет-сигнала. Например, если сайт размещен на сервере в Москве и пользователь заходит на него из Москвы, то время загрузки может быть 2 секунды. А если на этот же сайт заходит пользователь из Владивостока, то время загрузки может доходить до 20 секунд. Использование сети CDN (Content Delivery Network или сеть доставки контента) — позволяет доставлять контент из ближайшего сервера, а не только из оригинального. Тем самым, ускоряется загрузка сайтов на устройство конечного пользователя.

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

    6. Сокращайте количество переадресаций

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

    7. Подключите турбо-страницы

    Турбо-страницы — эта технология Яндекса, которая позволяет создавать лёгкие версии страниц, которые открываются быстро даже при медленном подключении к интернету. На загрузку таких страниц уходит примерно в 15 раз меньше времени, чем на загрузку оригиналов. Скорость обеспечивается применением вёрстки, оптимизированной для мобильных, а также сетевой инфраструктурой Яндекса: данные, из которых собираются Турбо-страницы, хранятся на серверах компании. В результатах поиска, Новостях, Дзене и других сервисах Яндекса они помечаются специальными значками с ракетой.

    Бонус: Скорость загрузки влияет на SEO

    Приятный бонус: Backlinko провели большое исследование, в котором проанализировали 1 млн. поисковых результатов в Google и пришли к выводу, что чем быстрее загружается страница — тем выше сайт в результатах поисковой выдачи.

    В данной статье рассмотрена лишь 1 точка роста конверсии. Если вы хотите узнать больше, то заходите в блог компании Conversant.me №1 по увеличению конверсии в России.

    Автор: Эдуард Файзуллин

    Материал опубликован пользователем.
    Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

    Сжатие таблицы при сжатии окна браузера

    13.08.2020, 18:16

    Сдвигаются текстуры при сжатии окна браузера
    при сжатии браузера примерно в 1/4 монитора все текстурф почему то сдвигаются. сайт.

    Масштабирование изображений при сжатии окна браузера
    Добрый вечер, как реализовать изменение размера изображения при сжатии окна браузера? Хочу чтобы.

    При сжатии окна текст уплывает вверх
    Почему у меня при сжатии окна текст уплывает в верх почему такое происходит? 2 13.08.2020, 18:52 2

    1495sanek1495, Вам необходимо причитать про @media запросы

    Вот пример, работы с @media:

    13.08.2020, 21:30 3

    Решение

    13.08.2020, 21:30

    Ломается верстка при сужении окна браузера
    Когда сжимаю браузер в какой то момент получается второй ряд https://official-ubn-ural.ru/

    Блоки смещаются при изменении окна браузера
    Здравствуйте. Решил самостоятельно обучаться HTML, но вот вопрос сразу же возник при создании.

    Разъезжаются блоки при изменении окна браузера
    Здравствуйте! Помогите пожалуйста с проблемой разъезда блоков! Проект у меня на локальной машине.

    CSS сжатие

    Вставьте Ваш CSS-код для сжатия:

    Добавьте до 10 CSS-файлов (Ограничение размера: 2 МБ на файл)

    CSS сжатие

    Чтобы сайт быстрее грузился его css-файлы можно оптимизировать. Данный онлайн инструмент предназначен для сжатия css файлов с целью уменьшения размера кода и увеличения скорости загрузки сайта. Чтобы сжать css вставьте фрагмент кода в текстовое поле или загрузите файл. Файлы не теряют своё свойство после сжатия.

    Мастер Йода рекомендует:  Призовой фонд конкурса шаблонов Telegram увеличен до 315 000 долларов
    Добавить комментарий