<<На Главную     <В меню Советы для программиста

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

Воспользоваться этим сервисом довольно просто.  Переходим по сл. ссылке на on-line инструмент PageSpeed и  указываем URL страницы, которую будем анализировать:

 

 

Результаты анализа могут выглядеть приблизительно сл. образом:

 

 

К сожалению, некоторые предлагаемые методы оптимизации вашего сайта требуют известной квалификации разработчика. Прежде всего, это касается пунктов Использование кэша браузера и Включение сжатия. А вот оптимизировать коды CSS нам вполне под силу (на рисунке выше обведено красным). Самое простое решение этой задачки связано с использованием расширения PageSpeed Insights (PSI) для браузера Chrome. Итак, первое что необходимо будет сделать, так это установить в  Chrome соответствующее дополнение . Для этого жмём на кнопку настроек Chrome в правом верхнем углу . Далее идём меню Инструменты>Расширения:

 

 

... и  в самом низу страницу жмём Ещё расширения :

 

 

 

В следующей форме в поле поиска набиваем название нужного нам расширения:

 

 

Так. Предположим, что с установкой PSI вы успешно справились. Теперь о том, как воспользоваться этим add-on'ом для задачи, ну допустим оптимизации CSS-кода. Сделать это совсем несложно. Первым делом открываем в Chrome нужную для анализа страницу, жмём на кнопку Настроек>Инструменты >Инструменты разработчика :

 

 

Продолжаем. На форме ниже выбираем пункт меню PageSpeed и кликаем по Начать анализ:

 

 

Результаты анализа страницы могут выглядеть приблизительно так :

 

 

 

Поскольку для нашей учебной задачи нас интересует оптимизация кода CSS , то жмём на соотв. ссылку (см. верхний рисунок). Видим такую картинку:

 

 

Жмём на верхнюю ссылку для просмотра оптимизированного кода и сохраняем его:

 

 

Само-собой, не забудьте оптимизированный CSS  код 'вернуть на место' - переслать его например по FTP по месту расположения вашего сайта на хостинге в соответствующий подкаталог.

Simashkov.2014

19.05.2014 г.

Назад