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

#css #оптимизация

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

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

Ответы

Ответ 1

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

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




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

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


Ответ 2

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


Ответ 3

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

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

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

$("head").append("");


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

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