Привет друзья! Продолжаем рассматривать тему: как можно оптимизировать свой сайт на WordPress, да и не только на нем. В данной статье мы рассмотрим, как можно оптимизировать наши скрипты, то есть JavaScript. Почти на любом сайте используются Java-скрипты, особенно на тех, кто использует WordPress.

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

Так вот, размеры этих скриптов могут быть внушительными (я не говорю обо всех). А ведь именно его размер будет влиять на скорость загрузки страницы сайта. Если на Вашем сервере или хостинге используется gzip сжатие, то Ваши скрипты, конечно, будут меньшего размера, но не забывайте о том. Что при загрузке страницы, в данном случае, эти скрипты необходимо распаковать, а на это требуется время. Поэтому я Вам бы посоветовал лучшего всего оптимизировать JavaScript.

Сжать и оптимизировать сам JavaScript можно при помощи технологий, например: JSMin, Packer, YUI Compressor, Google Closure Compiler. Наиболее популярные и распространенные варианты – это две последние, вот их мы и будем рассматривать.

YUI Compressor

YUI Compressor – это компрессор, который разработан компанией Yahoo. При его использовании Вы получаете гарантированно работоспособный скрипт, причем его размер будет снижен в несколько раз. Давайте воспользуемся онлайн-сервисом, который предоставляет весь функционал технологии YUI Compressor. Кроме этого, нам необходим еще какой-нибудь Java-скрипт, чтобы оценить работоспособность всего этого, я использую следующий код:

Исходный код

function Proiz(a) {
        var n=0;
        var p=1;
        while(a>0) {
            n = a % 10;
            a = Math.floor ( a / 10 );
            p = p * n;
        }
        return p;
    }   
 
    var arr = [135,25,52,35,43,21];
 
    document.write("Исходный массив: " + arr + "<br>");
 
    for (i=0, size=arr.length; i<size; i++) {
        arr[i] = Proiz(arr[i]);
    }
 
    document.write("Новый массив: " + arr);

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

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

Исходный код

function Proiz(b){var d=0;var c=1;while(b>0){d=b%10;b=Math.floor(b/10);c=c*d}return c}var arr=[135,25,52,35,43,21];document.write("Исходный массив: "+arr+"<br>");for(i=0,size=arr.length;i<size;i++){arr[i]=Proiz(arr[i])}document.write("Новый массив: "+arr);

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

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

Google Closure Compiler

Теперь давайте протестируем инструмент для сжатия и оптимизация JavaScript от Google (доступен он по следующей ссылке). В нем нам необходимо также вставить код, можно и URL или файл и нажать на кнопку Compile (для теста я использую тот же код):

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

Тут можно сказать почти тоже самое, только процент сжатия и оптимизации немного меньше, чем прошлым методом – 12,45%. Тут еще интересное, что русский текст, то есть кириллицу преобразует в UTF-8. Так что буду оптимизировать все свои скрипты на сайтах, что и Вам советую. Удачи Вам и до новых встреч!