5

Когда воспользовалась сервисом PageSpeed Insights, обнаружила, что требуется:

Исправьте обязательно: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Количество блокирующих скриптов на странице: 3.
Количество блокирующих ресурсов CSS на странице: 5.
Удалите код JavaScript, препятствующий отображению:

http://eco-turizm.net/…ntent/themes/turisme/jquery.js?ver=3.9.5
http://eco-turizm.net/…ntent/themes/turisme/script.js?ver=3.9.5
http://eco-turizm.net/…s/turisme/script.responsive.js?ver=3.9.5

Оптимизируйте работу CSS на следующих ресурсах:

http://eco-turizm.net/…/A.style.css.pagespeed.cf.IOwq-urdC1.css
http://eco-turizm.net/…ss,qver=2.69.pagespeed.cf.uGPlOiFioZ.css
http://eco-turizm.net/…s,qver=2.3.1.pagespeed.cf.3zvcGKDV_-.css
http://eco-turizm.net/…s,qver=3.9.5.pagespeed.cf.TvzLgYPSmo.css
http://fonts.googleapis.com/…s?family=Artifika&subset=latin&ver=3.9.5

Вот это "Удалите код..." не очень понятно. Я удалила эти три файла, но пришлось вернуть обратно, т.к. шапка сайта не загружалась.

Объясните чайнику, как склеить css в один файл и минизировать (сжать, как я понимаю).

На хостинге, в разделе "Настройки оптимизации сайта" есть опции "Объединить файлы style.css в один файл". Это то, что нужно сделать? А каким образом его сжать?

Ещё я не знаю, как выполнить пункт "Оптимизируйте работу CSS".

Прошу объясните или дайте ссылку на вменяемую статью для начинающих.

0

4 ответа 4

2

В самом PageSpeed Insights, во вкладке "Для компьютеров" в самом низу страницы есть ссылка "Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы". Отсюда можно взять CSS и JavaScript.

Кроме того, сам Гугл Предлагает подключать CSS после закрывающего тэга </html>, это не совсем валидно, но действительно ускоряет загрузку страницы. Чтоб страница первые секунды не отображалась без стилей, я в секции <head> документа прописываю

<style>
    body{visibility: hidden;}
</style>

А в конец CSS добавляю body {visibility: visible;}

И еще, скрипты по возможности подключать в конце документа, перед </body> со свойством defer.

0

Под "Удалите из верхней части страницы код JavaScript" скорее всего имелось введу что лучше перенести его вниз страницы, а не удалять совсем. Попробуйте перенести подключение скриптов ближе к футеру.
Подключение CSS лучше перенести наоборот вверх страницы.
Статья про оптимизацию
Cервисы для сжатия CSS - насколько я понимаю(сама к сожалению не пользовалась), нужно скопировать код CSS-файла в форму, сделать сжатие и сжатый код скопировать обратно в файл. Можно приписать к расширению min.css .

3
  • Как выглядит код JavaScript и в каком файле он сидит? В файле Заголовка? Я где-то читала, что перенос с верхней части в нижнюю вызывает у посетителей сайта "прыгающую" страницу во время ее загрузки. Так ли это? 28 апр 2015 в 23:17
  • @Татьяна, перед оптимизацией было бы очень не плохо разобраться сначала в теме, хотя бы немного. Ознакомиться с js можно здесь
    – BOPOH
    29 апр 2015 в 3:07
  • подключение выглядит вот так <script src="/js/script1.js"></script>, находится скорее всего в файле header.php, если такой есть. "Прыгающая" страница действительно может быть если скрипты влияют на отображение, попробуйте перенести и если будут проблемы - верните обратно. Если не знаете какие скрипты могут влиять на отображение страницы можете по-экспериментировать, по одному переносить подключение скриптов. 29 апр 2015 в 12:41
0

1. Для склеивания - перенесите все css стили в один основной

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

2. Подключение для гугл шрифта

$("head").append("<link href='http://fonts.googleapis.com/…s?family=Artifika&subset=latin&ver=3.9.5' rel='stylesheet' type='text/css'>");

3. Скрипты для ускорения загрузки лучше перенести вниз

4. По поводу сжатия CSS и JS файлов (минимизация) – на некоторых хостингах присутствует возможность включения функции предварительной минимизации этих файлов. Сервер берет ваш файл, и минимизирует его, удаляя все пробелы, разрывы строк и из красивого и форматированного файла вы получаете одну строку, уменьшая таким образом меньший размер файла и соответственно уменьшая скорость его загрузки.

0

Если нужно получить хорошие цифры — выносим стили, которые относятся к шапке, меню и первому экрану в head, просто инлайново.

Все остальные стили и скрипты подключаем либо динамически (с помощью js), либо просто пихаем в конец html документа, перед закрывающим

Картинки можно сжать через tinyPNG, также желательно нарезать под разные разрешения.

Но, в целом, скорость современного интернета позволяет сильно не париться об этом

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.