Урок 106. Оптимизация JS и CSS кода сайта

Урок 106. Оптимизация JS и CSS кода сайта

Всем-всем привет!

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

Урок получится коротким, поэтому скорее начнем. Погнали!

Что такое JS и CSS код?

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

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

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

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

Для чего нужно оптимизировать JS и CSS код?

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

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

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

  1. JSCompress. Работает исключительно с JavaScript;Оптимизация JS онлайн
  2. Refresh-SF. Позволяет оптимизировать как JS, так и CSS, а также работает с HTML.Оптимизация js

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

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

Оптимизируя свой блог, я попробовал оба сервиса: в первый залил проблемный файл JS, а во второй CSS (как узнать проблемные файлы?) и буквально через 5 секунд код оптимизировался и уже можно было заливать, что я и сделал.

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

На этом все, дорогие друзья!

До скорых встреч!

Пост опубликован: 05/04/2017


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

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