Легко оптимизируем CSS и JS онлайн для ускорения загрузки

 

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

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

Как узнать, какие файлы нуждаются в сжатии?

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

Поскольку Google  является для нас одним из основных поисковиков – в вопросе оптимизации CSS  будем пользоваться его рекомендациями. Пройдите на страницу сервиса и введите URL сайта. В  результатах измерения выберите вкладку “Сократите CSS” – откроется список файлов нуждающихся в изменении, с указанием расположения

css-compressor-googleТеперь для вас не составит труда применить рекомендации.

Что подразумевается под сжатием  CSS и JS?

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

Чем меньше в CSS знаков, переносов и пробелов – тем меньше его размер и тем быстрее он загружается. Учитывая

Так выглядит фрагмент обычного  Style.css:css-compressor-300x199

Так  – умеренно-оптимизированный:

css-compressor2Существует ещё вариант полной оптимизации о котором я расскажу дальше.

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

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

Откройте редактируемый файл в текстовом редакторе Notepad++ или в панели администратора сайта и скопируйте содержимое.

Читать также:  Правильная настройка лучшего плагина кэширования W3 Total Cache

Для оптимизации предлагаю воспользоваться удобным онлайн-сервисом refresh-sf.com.

После перехода на сайт, откроется основная панель сервиса в которой предлагается несколько способов  оптимизации файлов CSS и JS, скопировав и вставив код в специальное поле, указав URL  или загрузив его с компьютера.

Рассмотрим вариант вставки текста.

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

css-compressor-insertНиже установите параметры сжатия. Собственно нас волнует только один параметр, который выделен маркером.

css-compressor-output

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

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

Если вы определились с выбором типа сжатия – нажмите кнопку “Compress” и через несколько секунд получите результат.css-compressor-rezult-300x154

Здесь же будет представлен отчёт о размере файла до сжатия и после.css-compressor-rezult1-300x207

Нажмите кнопку “Download compressed file”css-compressor-download-300x44

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

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

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

Скопируйте содержимое файла, вставьте в представленное поле и выберите тип сжатия “Advansed” – не думаю, что у вас возникнет необходимость его редактирования.css-js-300x196

Читать также:  Гарантированный подъем ТИЦ и конкурс – угадай ТИЦ

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

css-js1Как видно из результата – файл сокращён ещё на 21%. Если при сжатии будут выдаваться сообщения об ошибках – воспользуйтесь предыдущим методом.

После внесённых изменений, просто сохраните файл и проверьте работоспособность сайта, а также воспользуйтесь сервисом Page Speed Insights.

css-compressor-google-resultПосле сжатия CSS и JavaScript, скорость загрузки сайта увеличится на несколько миллисекунд, что непременно скажется на позиции в результатах поисковой выдачи.

Закладка постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *