Оптимизация. Ускорение сайта

Рейтинг: 5Ответов: 1Опубликовано: 28.04.2015

Когда воспользовалась сервисом 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".

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

css оптимизация
Источник: Stack Overflow на русском

Ответы

▲ 2

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

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

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

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

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