все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

Сокращаем файлы CSS и JavaScript для увеличения скорости сайта

Всем привет. Продолжаем оптимизировать скорость загрузки наших веб-сайтов по рекомендации Google с помощью его инструмента Page Speed. Сегодня пост будет небольшой, но конкретный. Мы уже знаем с вами, где и как можно проверить скорость загрузки сайта, оптимизировать изображения под ваш сайт.

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

17.09

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

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

какие файлы сокращать

Жмем на данную рекомендацию и нам предложат уже готовый вариант сокращенного файла стилей CSS.

готовый файл css

Смотрим оптимизированный файл, жмем на ссылке правой кнопкой мыши, сохранить как, ставим имя style и сохраняем на компьютере. Затем скаченным файлом заменяем файл стилей, который есть у нас на блоге через Файл Зиллу. Теперь у нас будет сокращенный файл.

 

Переносим код JavaScriptиз верхней части блога

Это сделать достаточно легко. PageSpeedукажет нам, какие коды нужно перенести. Ок. С этим определились. Здесь мы будет работать с двумя файлами header.phpи footer.php. Но сначала делаем их резервные копии.

Теперь либо скачиваем эти два файла на компьютер через ftp, либо заходим в админ-панель, редактор и работаем уже здесь. Открываем файл header.phpи ищем там код скрипта, который нам указал PageSpeed. Выглядит он следующим образом.

пример кода javascript

 

Вырезаем данный код из файла headerи переносим его в файл footer.php, и вставляем перед закрывающим тегом </body>. Сохраняем файл. Теперь смотрим, все ли работает правильно. Если все хорошо, то оставляем там. Если вдруг что-то перестало работать, то лучше вернутся к первоначальному варианту. Значит такой перенос уже невозможен.

У себя на блоге я перенес так 4 скрипта из верхней части блога. Еще осталось 3, но технически я их перенести не могу.

Ок. если у вас возникают вопросы, то оставляйте их в комментариях. Я обязательно отвечу на них.

С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!