Оптимизация css: 7 советов по оптимизации CSS для ускорения загрузки страниц / Хабр

Содержание

Улучшение скорости загрузки сайта. Часть 2. Оптимизация CSS и JavaScript файлов — SEO на vc.ru

CSS

6070
просмотров

Вторым шагом после изображений подумайте об оптимизации ваших CSS и JavaScript файлов. Не забывайте всегда минимизировать эти файлы. По умолчанию CSS являются ресурсом, который блокирует отрисовку страницы в браузере. Это значит, что браузер остановит создание HTML элементов пока не загрузит и не прочтет весь ваш CSS. Поэтому всегда минимизируйте CSS, а также удалите неиспользуемые стили. Это особенно важно если Вы используете какой-нибудь CSS фреймворк (на вряд ли вы используете все стили фреймворка). PurgeCSS может помочь Вам автоматизировать процесс удаления неиспользуемых стилей. Если это возможно для Вас, постарайтесь при загрузке страницы загружать только критический CSS, а загрузку остального CSS отложить, пока страница полностью не загрузится. Критический CSS – это CSS, который необходим для стилизации только той части страницы, которая находится в области видимости экрана при загрузке страницы.

JavaScript

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

Ленивая загрузка JavaScript’а

Также старайтесь откладывать загрузку большого JS кода (файла), который не используется на всех страницах. Например, у Вас может быть компонент весом в 100-200 килобайт, который используется только на одной странице, а загружается на всех страницах. Постарайтесь разделить Ваш JavaScript на несколько кусочков(файлов) и загружать каждый из них только там, где он необходим. Этого легко можно добиться с помощью таких сборщиков как Webpack.

Влияние JS на отрисовку страницы

И помните, создание HTML страницы идет сверху вниз, и если браузер по пути отрисовки страницы встретит JS, он «поставит на паузу» отрисовку страницы пока не скачает (если необходимо) и не выполнит его. Поэтому старайтесь, чтобы ваш основной JS файл подключался ниже всего основного HTML, желательно перед закрывающимся тегом body, чтобы не задерживать отрисовку необходимого HTML. Если вы подключаете JS файл не внизу страницы, то используйте атрибут defer при подключении скрипта, что укажет браузеру на то, что это скрипт нужно обрабатывать только после того, как вся страница будет полностью отрисована.

Сокращение времени ответа сервера

Есть еще один из самых важных пунктов для улучшение скорости загрузки страницы. Это сокращение времени ответа от сервера или времени до получение первого байта (TTFB – Time to first byte). TTFB – это время, которое необходимо, чтобы отправить запрос от клиента (браузера) и получить первый байт данных от веб сервера.

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

Используйте сервер с хорошей производительностью

Чем быстрее ваш сервер читает или записывает данные и быстрее обрабатывает различные процессы тем быстрее ваш сайт вернет ответ пользователю.

Используйте последние версии

Старайтесь использовать самые последние версии языков программирования, фреймворков, библиотек, CMS, веб сервера или чего-либо еще, что работает на вашем сервере, чтобы пользоваться всеми преимуществами обновлений по производительности, которые могли быть выпущены. Так, PHP 7.0 дает прирост производительности в 180% по сравнению с предыдущей версией 5.6

Оптимизируйте запросы к Базе Данных

Посмотрите, может быть вы столкнулись с проблемой n+1, не добавили индексы там, где необходимо или запрашиваете много неиспользуемых данных.

Используйте кэширование

Каждый раз, когда пользователь делает запрос, на сервере делается запрос в базу данных (БД), генерируется HTML из данных и возвращается клиенту. Представьте, если у Вас сайт, на котором вы обновляете контент раз в неделю. Но все равно каждый раз, когда ваш сайт открывается, будет происходить запрос в базу данных, даже если информация не обновлялась. Поэтому, когда первый раз пользователь делает запрос на определенные данные вы можете получить их из БД, показать их пользователю и кэшировать (сохранить локально) эти данные на неделю (например). И после этого, в течение недели, все, кто будут открывать эту страницу уже не будут делать запрос в базу данных каждый раз, а им будет показываться сохраненная копия этих данных. Это будет уменьшать время загрузки страницы и нагрузку на сервер. В некоторых случаях вы можете кэшировать не только данные из БД, а страницы целиком.

Оптимизируйте скорость установления защищенного соединения SSL

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

Кэшируйте статические ресурсы

К ним относятся JS, CSS, файлы, шрифты и изображения. Когда пользователь заходит на Ваш сайт Вы можете дать браузеру выбрать откуда ему брать ресурсы, и это может оказать существенное влияние на время загрузки сайта. Вы можете сохранять статические ресурсы в браузере, когда пользователь первый раз заходит на Ваш сайт. Это и есть кэширование. Вы можете безопасно кэшировать статические ресурсы на долгое время: на 6 месяцев или даже на год. Cloudflare также может кэшировать все статические ресурсы на Вашем сайте. Но, что делать если за это время Вы изменили контент этих файлов, но не изменили название, например добавили пару строчек в свой JS файл? Изменить название файла! Но вы не можете постоянно менять название, но можете добавить какой-нибудь хэш как строку запроса, когда запрашиваете файл. Например, “/js/app.js?v=123456”. Вы будете запрашивать один и тот же файл, но технически для браузера это уже будет другой файл, который еще не был кэширован. Вы можете делать это вручную или, опять же, автоматизировать этот процесс с помощью сборщиков. Это называется контроль версий (versioning) или очистка кэша (cache busting).

CDN

Используйте сеть доставки контента (CDN) для статических ресурсов. Когда пользователь запрашивает изображение (например) с Вашего сайта, он должен отправить запрос к Вашему серверу, независимо от того, где находится пользователь и Ваш сервер. CDN может помочь минимизировать расстояние от клиента до ресурса. CDN – это группа серверов, разбросанных по всему миру, которые работают вместе, чтобы предоставить контент пользователю с того сервера, который находится максимально близко к нему. CDN с одним из самым большим количеством серверов по всему миру — это Cloudflare. Как вы видите есть несколько преимуществ начать использовать Cloudflare. Для большинства сайтов бесплатный тариф будет более чем достаточным. (Они не платят мне J)

Conclusion

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

уменьшение объема кода, CSS и HTML оптимизаторы, валидация

Содержание статьи

Оптимизация HTML-кода
Уменьшение объема кода и оптимизация CSS
CSS и HTML оптимизаторы
Валидация

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

Оптимизация HTML-кода

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

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

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

Уменьшение объема кода и оптимизация CSS

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

Прежде всего, следует избегать флеш-технологий, JavaScript, фреймов, текста, представленного картинкой. Все элементы, какие возможно, следует оформить в отдельных, внешних файлах (например, CSS и JS, как уже отмечалось выше). Помогут для оптимизации кода специальные плагины. К примеру, можно установить плагин Autoptimize, который автоматически оптимизирует код HTML, CSS, JS (если поставить соответствующие галочки). Необходимо настроить грамотную и удобную навигацию по сайту, которая будет понятна пользователям и корректно распознаваема поисковиками. Это увеличит скорость, качество загрузки и индексации сайта.

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

Некоторые способы улучшить структуру CSS в ручном режиме:

Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;
Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;
Использовать лаконичные, понятные описания в комментариях;
Необычные шрифты прописывать при помощи стилей, а не изображений;
Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;
Применять к заголовкам инструменты h2 – и далее, чтобы они корректно распознавались при индексации;
Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;
Использовать разнообразные и краткие мета-теги.

CSS и HTML оптимизаторы

Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:

CleanCSS. com;
CSS Optimizer;
CSS Compressor;
CY-PR.com;
плагин Autoptimize.

Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.

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

На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.

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

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

Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:

optimization.com;
Портал seo-чеклист;
плагин Firebug.

Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.

Валидация

Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator. w3c.org

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

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

Как оптимизировать CSS для повышения производительности в Интернете

Часть 2 из Серия акселераторов Blue Triangle: передовой опыт повышения производительности в Интернете то, о чем вы думаете, но CSS влияет на все, что отображается.

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

Как CSS может замедлить работу вашего сайта?

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

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

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

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

HTML и CSS — это два минимальных требования для критического пути рендеринга. HTML — это документ, который создает страницу, а его анализ создает объектную модель документа (DOM). CSS стилизует DOM с помощью объектной модели CSS (CSSOM). Чтобы страница использовала CSS, она должна быть загрузить и затем разобрать .

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

Чтобы оптимизировать доставку CSS и ускорить работу вашего сайта, вам необходимо:

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

Давайте посмотрим, как это сделать.

Уменьшить размер файла CSS

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

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

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

Минификация CSS

Минификация удаляет все пробелы, комментарии и посторонние символы в CSS. Получится (48 символов) :

 h2 { 
   color: black; 
  цвет фона: синий; 
 }

в этот (38 символов) :

 h2{color:black;background-color:blue;}

Вот несколько инструментов для минимизации вашего CSS:

Для ручной минимизации вы можете использовать CSSNano или кссо.
Более крупные сайты, которым могут быть полезны автоматизированные рабочие процессы, могут использовать Gulp или Webpack.

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

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

Уменьшить длину файла CSS

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

 p { 
  цвет: #00000; 
 }

Некоторые инструменты минификации преобразуют это в сокращенное шестнадцатеричное число:

 p { 
   color: #000; 
 }

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

 h2, h3 { 
   color: blue; 
 }

Не это:

 h2 { 
   цвет: синий; 
 } 
 h3 { 
   цвет: синий; 
 }

Ограничение определений стилей также применяется к наследованию — некоторые свойства в CSS наследуются в HTML вложенными элементами (называемыми потомками). Вы также можете форсировать наследование в определениях свойств, если наследование не установлено по умолчанию. Наследование означает, что это:

  
     Заголовок
 
     Заголовок 
     
Абзац

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

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

Сжатие CSS

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

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

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

Загружайте CSS быстрее и раньше

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

HTTP preload и push , которые позволяют загружать CSS раньше, чем обычно, и
ленивая загрузка в сочетании с встраиванием CSS в HTML .

Оба этих метода доставки позволяют анализировать HTML во время загрузки CSS.

Доставка CSS с помощью HTTP/2 push или HTTP preload

HTTP/2 push и HTTP preload — это два механизма, которые немного по-разному управляют поведением сети.

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

Предварительная загрузка в документе HTML:

Предварительная загрузка в заголовке ответа HTML:

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

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

HTTP/2 push
HTTP/2 push немного отличается. По сути, они выполняют многие из тех же целей, а предварительная загрузка фактически использует push-API, когда он доступен по умолчанию. Чтобы предотвратить это, вы можете включить «nopush» в заголовок ответа HTTP, например:

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

При использовании HTTP/2 push сервер выполняет отправку, а не браузер при предварительной загрузке. Это важное отличие означает, что файл CSS, который был отправлен, сразу же переносится вместе с HTML и другими важными файлами, используя push. В результате push может загружать ресурсы даже быстрее, чем предварительная загрузка. Однако, если вы используете push, вы рискуете переопределить использование кэшированных ресурсов и увеличить объем отправляемых данных, поэтому будьте осторожны с реализацией.

Другим важным отличием является то, что push можно использовать только для соединений HTTP/2. Если на вашем сайте не включен HTTP/2, он не сможет использовать push. Это также означает, что способ инициирования отправки зависит от конфигурации вашего сервера.

Особые указания
Ни предварительная загрузка, ни проталкивание не могут использоваться повсеместно. Тем не менее, использовать их — хорошая идея, потому что браузеры, которые не могут использовать предварительную загрузку или push-уведомление, будут игнорировать эти атрибуты, а браузеры, которые могут их использовать, будут загружать страницы намного быстрее. Предварительная загрузка поддерживается большинством основных браузеров, но без поддержки в Firefox, Opera и IE и только частичной поддержки в Edge. С другой стороны, Firefox поддерживает push, а Safari и IE — нет.

Внедрение и отложенная загрузка CSS

Если предварительная загрузка и отправка на сервер недоступны, вы можете встроить CSS в тег