Ответ
Продолжаем ускорять сайт Опции темы
Старый 05.03.2013, 16:32
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Продолжаем ускорять сайт
В продолжение предыдущей темы хочу рассказать про официальный плагин от Google Developers - PageSpeed Insights (для аддона Firebug), который пока разработан под Firefox (по моим сведениям). Так что у кого нету лисичики - пора устанавливать, хотя я очень сомневаюсь что на этом форуме есть люди у которых не установлен FireFox хотя бы в качестве тылового браузера .

Устанавливаем основу плагина - аддон Firebug с канала https://addons.mozilla.org/uk/firefox/addon/firebug/. Для тех кто с ним н есталкивался раньше могу сказать в двух словах что это уникальный рессурсогрыз - не в плане производительности а в плане поедание кода страницы - с его помощью можете эксперементировать с цветами, картинками, шрифтами, в общем со стилями и блоками сайта НЕ затрагивая самого исходника, что очень полезно когда некуда деть энергию, а повредить сайт не хочется. Если кого-то заинтересует - распишу более детально, а пока вернемся к ускорению сайта.

Итак Аддон Firebug стоит.

Далее ставим само расширение - которое доступно по ссылке https://dl-ssl.google.com/page-speed...page-speed.xpi или на оффициальной старницке

https://developers.google.com/speed/pagespeed/?hl=ru

Как положено соглашаемся со всем и стартуем





Надо сказать что это расширение изначально разрабатывалось компанией Google для личных целей, и уже потом было принято решение о выводе его в общее пользование. Именно этим плагином на Google проверяли и оптимизировали свои страницы

Далее запускаем Firebug, я использую для этого контекстное меню браузера





И выбираем вкладку Page Speed








Ждем пока проанализируеться страница и видим что у нас так, а что можно поправить для ускорения сайта





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

Ну а дальше мы можем разбирать функционал плагина - развернуть или свернуть все заметки (Expand ALL, Collapse All). Если сделали изменение, нажимайте Refresh Analitics что переоценить ситуацию.

При нажатии на вкладку Resources, вы увидите какие включение используются страницей, какие из них в кеше (Status), тип, размер и сколько трафика он сожрал.

Ну и экспортировать результат в JSON формате, который потом можно разбить и использовать по своему усмотрению.

Как понять оценку производительности плагина PageSpeed.

Для каждого правила PageSpeed использует цветовую и цифровую оценку. Цветовая состоит из трех цветов - зеленая, желтая, красная, а цифровая градуируется по 100 бальной шкале.

Чтоб увидеть цифровую оценку наведите на значке слева от правила и увидите подсказку типа "70 из 100". Эта оценка предварительная и показывает на сколько выполняется правило относительно максимальной оптимизации по мнению экспертов Google.

Цветовая подсказка более важна. Сейчас расскажу почему - например вы можете увидеть красную подсказку а по баллом будет 90 из 100, и наоборот желтую подсказку с оценкой 10 из 100. Абсурд? Отнюдь - цветовая подсказка служит индикатором важности правила для ускорения сайта. т.е. прежде всего надо привести в положение хотя бы 70(90) из 100 красных правил, чтоб они пожелтели, а тогда можете в свободное время отлаживать зеленые правила.

Кроме этого у плагина PageSpeed есть и структурированная иерархия

Сначала в списке идут задания с высоким приоритетом. Эти пункты представляют наибольший потенциал для роста производительности. Вы должны решить эти пункты в первую очередь.

Средний приоритет. Эти предложения могут добавить незначительный выигрыш к производитеьности.

Далее низко приоритетные. Эти пункты обычно идут со знаком + и даю небольшие выигрыши в скорости по сравнению с предыдущими пунктами. Гугл советует заниматься ими после разбора с предыдущими правилами.

Информационные сообщения - их суть я так и не понял, и не особо стремился понять, так как на первый взгляд несут чисто информационный характер (каламбур вышел ).

Вот что заметил - если возникает много значков информационного характера, то вполне возможно что страница еще просто не прогрузилась до конца или зависла. Попробуйте в таком случае обновить статистику.

PageSpeed ​​также выдает результурующий числовой и цветовой код состояния сайта Page Speed Score: 80/100.





Числовая оценка рассчитывается как сумма числовых оценок страницы, деленное на общий вес всех правил (без учета правил, который выводятся "синими" - единственный результат, которые не является результирующим при ускорении сайта). Цветовой код-оценка рассчитывается на основе эвристических анализа количества зеленого, желтого и красного результатов работы правил на странице.

Из дополнительных функций плагина хочу отметить такие возможности как Автоматический запуск и оценка. Для этого возле вкладки PagesSpeed нажмите серый треуголник и выберите Automatically run at onload.





Эта функция будет запускать автоматически Firebug, ждать загрузкии страницы и вывод результатов анализа.

Как правило никто не использует эту функцию каждый день поэтому стоит включать на момент отладки страницы.

Вторая возможность - отладка Javascipts выполняемых на странице. Включается там же где и автоматическая загрузка:

В окне Firebug, выберите вкладку PageSpeed​​, и нажмите на стрелку вниз для отображения опций во всплывающем меню и из всплывающего меню выберите Profile Deferrable JavaScript. Перейдите на веб-страницу, которую нужно проанализировать. Когда страница полностью прогрузится, нажмите кнопку Analyze Performance.

Надо заметить что включение этой функции ОЧЕНЬ затормаживает работу самого браузера и может даже его подвесить, поэтому если собираетесь запускать ее - завершите все вкладки с сохранениями -береженого Бог бережет

Ну и последняя функция о которой я хочу рассказать - сохранение ОПТИМИЗИРОВАННОГО сайта. Да-да, этот аддон может оптимизировать страницу (яваскрипты, картинки) и сохранить куда вы скажете. По умолчанию это все идет в временную папку браузера, вы можете направить ее например на рабочий стол. делается это все в той же вкладке PageSpeed, при нажатии на серый треугольник.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 13.03.2013, 23:58
  #2
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Комментариев почему-то не особо много, видимо тема не заинтересовала. Я же продолжил ускорения своего сайта и получилось довольно неплохо с помощью такого шага как "Кеш на стороне клиента". Для этого в .htaccess я добавил строчки

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>

<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE
<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>
Текст конечно не уникален и уже давно наработан Но результат есть!. И именно он подразумевается аддоном в "кешировании браузером"
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 14.03.2013, 00:29
  #3
Bilrel
 
Регистрация: 10.05.2011
Сообщений: 317

статья интересная, продолжай придерживаться этого направления в написании
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 14.03.2013, 00:29
  #4
daemon
 
Регистрация: 21.04.2011
Сообщений: 1,143

Матрос, это будет работать на Кемеле? Я как-то пытался заморочиться, но не получив результата, отбросил назад в очередь улучшений сайта
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 14.03.2013, 11:43
  #5
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Bilrel, Спасибо

daemon, Надо узнать установлен ли mod_expires mod_setenvif mod_headers у кемела. Если нет - попросить установить и будет работать.

Я бы советовал еще использовать простое gzip сжатие

# gzip сжатие.
<IfModule mod_deflate.c>

# html, txt, css, js, json, xml, htc:
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component

# веб-шрифты и svg:
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Но тут есть проблема - не все пользователи могут получить эффект кеширования - Tony Gentilcore в книге «Even Faster Web Sites» озучивает цифру 15%. Виной тому - прокси сервера и фаерволлы, которые искажают HTTP заголовки.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Метки
pagespeed, мануал, оптимизация, скорость сайта


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 21:40. Часовой пояс GMT +3.