Ускоряем свой сайт с помощью Page Speed

Автор Тема: Ускоряем свой сайт с помощью Page Speed  (Прочитано 56613 раз)

Оффлайн [Константин]Автор темы

  • Глобальный модератор
  • Бизнес оценка: (4, 100%)
  • *****
  • СПАСИБО: 2446
  • Сообщений: 3733
  • Карма: 322
  • Пол: Мужской
  • SEO-специалист: аудит, оптимизация, продвижение
  • Награды SEO Профессионал Более одной тысячи спасибо Мастер поисковой оптимизации Почетный гражданин нашего форума За отличный ролик За благотворительность
    • Просмотр профиля

Оффлайн [Константин]Автор темы

  • Глобальный модератор
  • *****
  • Доп. информация
    • Бизнес оценка: (4, 100%)
    • СПАСИБО: 2446
    • Сообщений: 3733
    • Карма: 322
    • Пол: Мужской
    • SEO-специалист: аудит, оптимизация, продвижение
    • Награды SEO Профессионал Более одной тысячи спасибо Мастер поисковой оптимизации Почетный гражданин нашего форума За отличный ролик За благотворительность
      • Просмотр профиля
8
В последнее время все чаще и чаще на просторах Рунета можно услышать фразу "скорость загрузки сайта влияет на выдачу гугла", "разогнать сайт" и так далее. Давайте попробуем разобраться, как это сделать. 8)
При выполнении работы по аудиту сайтов часто сталкивался с проблемами ускорения работы сайта. Решил, что полезно будет создать единую тему с подробными инструкциями по решению таких проблем.

Итак, устанавливаем на свой браузер дополнение PageSpeed от Google.
Я использую Google Chrome, сюда ставится очень легко в 2 клика мышкой, и FireFox. Для лисички наиболее приятной для веб-разработчика будет возможность совместить 2 дополнения - FireBug (установить) и сам PS.

Далее буду рассказывать и показывать на примере FireFox:
 заходим на нужный сайт :D
1) кликаем правой кнопкой мыши и выбираем пункт "Inspect Element with FireBug"
2) в открывшемся окошке снизу выбираем пункт "Page Speed"
3) жмем на кнопку "Analyze Performance"
подробнее на картинке


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

Наиболее часто распространенные ошибки имеют следующие названия.

Используйте кэш браузера
Следующие кэшируемые ресурсы имеют короткий срок действия. В дальнейшем следует указать для следующих ресурсов срок действия не менее недели:
- и далее видим список ссылок на скрипты и картинки, как на картинке:



Теперь устанавливаем для этих объектов срок действия кэша на неделю, как рекомендует Page Speed.
Для этого в файл .htaccess добавляем следующий код:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
где access plus 7 days это и есть срок действия кэша для обьектов - картинок, ксс, скриптов.

Объедините изображения в CSS-спрайты
описывать всё полностью не буду, много букаф получится, да и зачем? Уважаемый Ктонановенького очень классно раскрыл эту тему

Включите сжатие
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).
Например:
(нажмите чтобы показать/скрыть)

Как это сделать? Очень просто. На вашем сервере Apache должен быть активирован мод mod_gzip.
И нужно дописать в .htaccess такой код

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Сократите CSS
Сокращение следующих ресурсов CSS позволит уменьшить их размер на xxКб (на xx%).

Тут всё еще проще - в Page Speed сразу предлагают сохранить оптимизированную версию ксс кода на компьютер, жмем на ссылку "See optimized version". А уж заменить ее на исходный код(который обязательно скопируйте отдельно, для дальнейшего удобного редактирования) сумеет и ребенок :)

Оптимизируйте изображения
Аналогично предыдущему пункту моей инструкции, тоже жмем "See optimized version" - сохраняем картинку на компьютере и перезаливаем на хостинг. Примерно так, как на рисунке

(нажмите чтобы показать/скрыть)

Отложите синтаксический анализ javascript

Как вариант - запустить скрипт через какое-то время после загрузки страницы, т.е сделать что-то вроде паузы, пока браузер обрабатывает остальной контент...
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Пожалуй, это пока всё.
Если есть какие-либо вопросы по другим ошибкам - задавайте их в этой теме, будет разбираться вместе.
Попрошу прикрепить тему в разделе :)
« Последнее редактирование: 22-01-2012, 22:02:50 от dreadful »


Оффлайн Konsul

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 37
  • Сообщений: 263
  • Карма: 6
    • Просмотр профиля

Оффлайн Konsul

  • Старожил
  • ****
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #1 : 23-01-2012, 13:49:19 »
И нужно дописать в .htaccess такой код

Все вроде бы понятно но - май сайт на Ucoz и я не имею доступа к файлу  .htaccess (если такой и есть то он на сервере ucoz) -как тогда ? могу я выше приведенный код засунуть в css или непосредственно в код страниц ?


Оффлайн Alexo

  • Бизнес оценка: (0)
  • Дебютант
  • *
  • СПАСИБО: 1
  • Сообщений: 2
  • Карма: 1
    • Просмотр профиля

Оффлайн Alexo

  • Дебютант
  • *
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #2 : 23-01-2012, 14:00:21 »
Цитировать
На вашем сервере Apache должен быть активирован мод mod_gzip

ИМХО Лучше использовать статическое сжатие (хранить две версии файлов сжатые и без сжатия) и отдавать в зависимости от поддержи сжатия нужную версию файла.

Оффлайн [Константин]Автор темы

  • Глобальный модератор
  • Бизнес оценка: (4, 100%)
  • *****
  • СПАСИБО: 2446
  • Сообщений: 3733
  • Карма: 322
  • Пол: Мужской
  • SEO-специалист: аудит, оптимизация, продвижение
  • Награды SEO Профессионал Более одной тысячи спасибо Мастер поисковой оптимизации Почетный гражданин нашего форума За отличный ролик За благотворительность
    • Просмотр профиля

Оффлайн [Константин]Автор темы

  • Глобальный модератор
  • *****
  • Доп. информация
    • Бизнес оценка: (4, 100%)
    • СПАСИБО: 2446
    • Сообщений: 3733
    • Карма: 322
    • Пол: Мужской
    • SEO-специалист: аудит, оптимизация, продвижение
    • Награды SEO Профессионал Более одной тысячи спасибо Мастер поисковой оптимизации Почетный гражданин нашего форума За отличный ролик За благотворительность
      • Просмотр профиля
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #3 : 23-01-2012, 14:15:20 »
Alexo, а можно подробнее, пожалуйста?

Добавлено: 23-01-2012, 14:16:34

dar333, к сожалению uCoz не поддерживает .htaccess - поэтому разогнать его этим путем вряд ли получится.

Оффлайн alexsanris

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 4
  • Сообщений: 20
  • Карма: 1
  • Пол: Мужской
    • Просмотр профиля
    • Программы для сайта

Оффлайн alexsanris

  • Рекрут
  • *
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #4 : 23-01-2012, 14:50:12 »
Для полного счастья- ExpiresByType image/ico"access plus 7 days"


Оффлайн darmoid

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 20
  • Сообщений: 59
  • Карма: 2
  • Пол: Мужской
    • Просмотр профиля
    • Блог вебмастера

Оффлайн darmoid

  • Пользователь
  • **
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #5 : 23-01-2012, 15:38:17 »
Хм.. не могу убрать ошибку "Используйте кэш браузера". Делаю все как здесь написано. Блог на вордпресс. После добавление кода в хтацесс ничего не меняется. Плагин кеширования выключал и папку кеша чистил.

Оффлайн Darius

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 159
  • Сообщений: 525
  • Карма: 10
  • Пол: Мужской
  • В поисках новой идеи для сайта.
    • Просмотр профиля
    • Пицца на заказ, Камышин пиццерия"Сан-Ремо"

Оффлайн Darius

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 159
    • Сообщений: 525
    • Карма: 10
    • Пол: Мужской
    • В поисках новой идеи для сайта.
      • Просмотр профиля
      • Пицца на заказ, Камышин пиццерия"Сан-Ремо"
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #6 : 23-01-2012, 16:05:33 »
Я везде пробежал в плагине, но то что описано во втором шаге скриншота не нашел.
Версия лисы 9,0,1
Пицца на заказ в Камышине, бесплатная доставка. Пиццерия Сан-Ремо ул. Юбилейная 4.
Тел заказов: 8-909-39-039-39. И шикарная итальянка уже в Вашей компании!

Оффлайн alexsanris

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 4
  • Сообщений: 20
  • Карма: 1
  • Пол: Мужской
    • Просмотр профиля
    • Программы для сайта

Оффлайн alexsanris

  • Рекрут
  • *
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #7 : 23-01-2012, 17:16:58 »
Хм.. не могу убрать ошибку "Используйте кэш браузера". Делаю все как здесь написано. Блог на вордпресс. После добавление кода в хтацесс ничего не меняется. Плагин кеширования выключал и папку кеша чистил.

Я использую так- </IfModule>
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
и плагин Quick Cashe  и с помощью сервиса http://gtmetrix.com ОН КОНКРЕТНО ПОД WORDPRESS с рекомендациями

gr

  • Гость
  • Бизнес оценка: (0)

gr

  • Гость
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #8 : 23-01-2012, 18:05:43 »
Цитата: dreadful link=topic=10410.msg120657#msg120657 date=1327258378[i
Включите сжатие[/i]
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).
Скажите, пожалуйста, а есть ли где-то четкое утверждение, что сжатие всегда дает быстродействие, даже на слабых серверах?

Еще вопрос про css: чем отличаются оптимизированные файлы от неоптимизированных; насколько реальное быстродействие увеличится? Нет ли тут подводных камней, уж не знаю - проблем с разными браузерами, css-агрегаторами и т.д.? Абсолютно безопасная операция?

(Быстродействие очень волнует, но многие советы из сети у меня в прошлом не срабатывали, уж не знаю почему, наверное не было понимания тонкостей).


Оффлайн Alexo

  • Бизнес оценка: (0)
  • Дебютант
  • *
  • СПАСИБО: 1
  • Сообщений: 2
  • Карма: 1
    • Просмотр профиля

Оффлайн Alexo

  • Дебютант
  • *
Re: Ускоряем свой сайт с помощью Page Speed
« Ответ #9 : 23-01-2012, 20:00:12 »
Alexo, а можно подробнее, пожалуйста?

Создаем две версии файла один style.css.gz другой style.css   

RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !X #Тут вот вместо X браузер не поддерживающий gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]


 

Похожие темы

  Тема / Автор Ответов Последний ответ
15 Ответов
6297 Просмотров
Последний ответ 07-12-2013, 07:36:44
от br2
4 Ответов
1545 Просмотров
Последний ответ 29-08-2011, 10:56:21
от Acid
21 Ответов
5951 Просмотров
Последний ответ 12-03-2013, 10:50:37
от Bright
3 Ответов
1613 Просмотров
Последний ответ 13-04-2013, 20:47:08
от Нол
6 Ответов
1569 Просмотров
Последний ответ 23-01-2015, 12:03:29
от borro