10 советов по ускорению загрузки CSS

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

Быстрая загрузка CSS

Итак, вот несколько быстрых советов, которые помогут повысить скорость загрузки CSS.

  1. Внешние таблицы стилей. Всегда избегайте встроенного CSS в HTML-коде для стилизации отдельных элементов, поскольку он загружается с каждой загрузкой страницы. В то время как внешние таблицы стилей кэшируются браузерами и не требуют перезагрузки каждый раз, когда посетитель продолжает просматривать ваш сайт. Вызовите style.css в тегах HEAD вашего html, как это
  2. Один CSS-файл. Чем меньше количество запросов CSS, тем лучше. Всегда выбирайте загрузку одного файла CSS только на каждой странице.
  3. Первый элемент для загрузки. Вставьте CSS в качестве первой строки кода после HEAD-тегов в html. Это гарантирует, что ваш CSS начнет загружаться в тот момент, когда начнется загрузка страницы.
  4. Небольшие CSS-файлы — чем меньше CSS-файл, тем быстрее он будет загружаться и давать дизайн вашему сайту. Используйте элементы дизайна только в случае необходимости. CSS3 позволяет добавлять множество причудливых вещей, таких как переходы, градиенты и т. Д. — но вам действительно нужно стилизовать каждый элемент.
  5. Эффективные селектора CSS. Изучите CSS, который позволяет вам вступать в CSS-коды на гораздо более мелкие строки. Например,

    можно записать в виде

     
  6. Сжимайте файлы CSS. Минимизируйте и сжимайте код CSS, чтобы уменьшить размер файла CSS, чтобы он загружался как можно быстрее. Хотя многие плагины могут это сделать, но это увеличивает нагрузку на сервер. Удалите ненужные пробелы и комментарии CSS. Мы используем онлайн-компрессию CSS с помощью YUI Compressorсжатый CSS
  7. Удалите неиспользуемый код CSS. Мы используем GTmetrix для определения неиспользуемого CSS и простого удаления CSS-накладок. Зачем загружать неиспользуемые CSS, когда это не требуется.
  8. Использование сетей CDN — Content Delivery гарантирует, что ваш CSS будет кэшироваться по всему миру и будет доступен как можно быстрее с ближайшего локального сервера для получения сверхбыстрого ответа. Мы используем MaxCDN и просто удаляем сжатый файл CSS через FTP.
  9. Избегайте версий. Старайтесь сохранить URL-адрес файла CSS. Как добавить несколько параметров запроса? для выделения версий файлов CSS или добавления времени сервера для принудительного обновления CSS затрудняет кэширование CSS. Например

     
  10. Изучите CSS3 — это новейшая версия CSS и делает стилизацию еще более эффективной. Устраните силу CSS правильно.
//