Эффективный способ ускорить свой сайт с помощью page speed

Привет читателям блога jonyit.ru. В сети практически на каждом блоге есть статья “Как ускорить свой сайт”, но по делу в этих коротеньких статьях я так ничего не нашёл. И затем я пришёл к выводу, что мне стоит написать для своего блога тоже самое, но только всё подробно разложить по полочка, для того чтобы читатель понял с чего ему начинать ускорять своё сайт. Статью я назвал Хит-парад методов по ускорению своего сайта, но потом когда углубился в массу информации по ускорению сайтов я наткнулся на page speed и не смог устоять перед ним;) Как вы наверно уже заметили, что сначала я как всегда даю теорию, а потом перехожу к практике.
 
Хочу отметить, что скорость загрузки сайта влияет на продвижение в поисковых система, да это правда и если кто-то считает что у него и так всё не плохо, то не стоит зарекаться так как кто то сейчас оптимизирует свой сайт после прочтения данной статьи и обгонит вас в топах. Но не стоит торопиться ускорять своё сайт, так как перед тем как это сделать нужно решить насущные проблемы и подписаться на мой Rss канал:

-Сделать тонкую настройку Seo сайта (блога)
Защитить свой сайт от взлома хакеров
Выбрать необходимые плагины
Оптимизировать базу данных
Настроить файл wp-config
-Добавить сайт в авторитетные каталоги dmoz, як, mail.ru
– Прогнать сайт по трастовой базе
-Выбрать стратегию раскрутки

И вот после того как вы всё это сделаете, возвращайтесь к этой статье и читайте её дальше;)

как ускорить сайта

Ускорение сайта, важно ли это?


Ускорить сайт вам нужно, для того чтобы:
1.Увеличить конверсию
2.Привлечь новых клиентов
3.Увеличить среднее время пребывания и глубину просмотра сайта
4.Повысить лояльность клиентов
5.Снизить нагрузку на сервер

Конверсия– это отношение посетителя блога совершившего какое-то целенаправленное действие к общему количеству привлечённых посетителей.

Целенаправленным действием для нас считаеться подписка пользователя на RSS, оставления комментария, предложения обмена постовыми и др. Конверсию можно увеличивать не только за счёт ускорения сайта, но за юабилити, дизайна, качеста страницы, ключевые слова.

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

kak-uskorut-sait

Как ускорить сайт

Как вы можете заметить у меня 5.5 секунд.
Далее на нужно узнать, что же оптимизировать для ускорения сайта, а узнавать мы это будем с помощью интересного инструмента PS для Google Chrome и Mozilla.

Установка PS для Google Chrome и Mozilla Firefox

PS – это плагин для Google Chrome и Firefox для оценки производительности сайта и предложений по его ускорению.

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

Установка в Google Chrome

На странице плагина мы находим графу его установке для google chrome и проходим по ссылке.

ustanovka-page-speed-dly-google-chrome

ustanovka-page-speed-dly-google-chrome

Далее у нас появляется мануал по установке, но он на английском. Это не проблема, так как я его для вас перевел. Читаем инструкцию ниже:

Внимание:Перед тем как вы будете устанавливать PS, вам необходимо включить API экспериментальных расширений

Установка pagee speed для chrome:
1.В новой вкладке перейдите на флаги chrome://flags/
2. Опустить скролл до API экспериментальных расширений и активируйте его
ustanovka-page-speed-dly-google-chrome-(1)
3.Теперь прокрутите скролл в самый низ и нажмите кнопку перезапустить
4. После перезапуска браузера и включения экспериментальных api пройдите по ссылке установки плагина. (На странице в 4 пункте вы её увидите)

5. PS установлен. Теперь для того чтобы его запустить кликните по ключу в правой верхней части браузера, затем и выпадающего меню выберите

Инструменты->инструменты разработчика. Затем в появившемся окне выберите последнюю вкладку PS

ustanowka-page-speed

На этом установка закончена

Установка в Mozilla Firefox

Для того чтобы установить PS на Mozilla Firefox перейдите на страницу его установки и нажмите на большую кнопку «Install Page Speed».

Затем нажмите на жука в правом нижнем углу FireFox и у вас откроетьяс окно текущего плагина и на посоленей вкладке вы увидите надпись«PS».

Всё установка закончена.

Анализ сайта с помощью PS


Анализ я буду проводить с помощью браузера Chrome, так как Mozill’у я не очень люблю.
Значит откройте страницу вашего сайта и запустите PS (Инструменты—инструменты разработчика—PS) и нажмите а кнопку анализа “Run PS”. В завершении анализа в увидите целую кучу косяков которые вам предстоит исправить. Конечно же PS даст свои рекомендации по оптимизации сайта но мне их не понять;)

Все замечания будут выведены в порядке критичности, первые замечания нужно будет исправить в первую очередь. Они будут отмечены красным. Давайте рассмотри наглядный пример, мой пример:

На данном примере мы видим что PS нам выдаёт самые критичные места такие как: Keep-alive, Сжатие и кэш браузера.

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

analiz-page-speed

Теория такова что PS советует нам настроить оптимальным образом кэширование web- страницы в браузерах посетителей, для того чтобы при просмотре других страницы вашего блога, эти элементы не загружались заново тем самым мы серьёзно ускорим загрузку нашего блога.

PS- кэширование браузеров пользователей


Наша задача будет заключаться в том что мы будем влиять на наш web-сервер. Делать мы это будем посредством файла .htaccess.
Теперь открываем этот файл и добавляем в него следующий код:

  ExpiresActive On
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
 
    Header set Cache-control: private
 
    Header set Cache-control: public
 
  BrowserMatch "MSIE" force-no-vary
  BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary

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

page-speed-analys

И что мы видим?) Мы видим что критичной рекомендации “Используйте кэш браузеров” больше нети очков у нас уже не 35 а 41. Это весомый показатель ускорения сайта.

На этом я с вами прощаюсь в следующей серии мы будем Включать сжатии Gzip и объединять изображения в спрайты.
И ещё небольшой совет от меня и PS “оптимизация изображений”, который мне помог ускорить сайт на 4 очка, смотрите:

page-speed-analys-(1)

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

P.S.
Первая серия “как ускорить свой сайт” с помощью плагина PS подошла к концу советую подписаться на мой Rss канал, чтобы не пропустить продолжения, ведь ты хочешь, чтоб твой сайт летал;) Если у вас есть какие нибудь вопросы по данной статье, то не стесняйтесь и задавайте их в комментариях.

Seo видео на сегодня: Михаил Shakin рассказывает о правильной настройке robots.txt

Разработка сайта
Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.
Заказать
Продвижение сайта
Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.
Заказать
БЛОГ под КЛЮЧ
Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»
Заказать



Ещё пара мощных статей для твоего ненасытного ума:

Понравилась статья?
Тогда оформи подписку на обновление сейчас
Не забудь подтвердить подписку


28 комментариев
  1. Статья на отлично, спасибо.
    По поводу htaccess – добавь еще информацию, что конкретно делает каждый блок. И тогда совсем все хорошо будет )))

    Ответить на комментарий →
    • Антон Краморов 21 сентября, 2011 в 03:15

      Постараюсь найти эту информацию.
      Кстати сегодня на твой блог набрёл случайно когда статью эту писал. Хочу отметить что мне понравилось как мысли излагаешь)

      Ответить на комментарий →
      • Видел бы ты первые посты… Страх ))) Сейчас занимаюсь переписыванием и допиливанием.

        Ответить на комментарий →
        • Антон Краморов 21 сентября, 2011 в 04:44

          Постовыми обменяться не хочешь со мной?
          у меня тока с тицом засада, апа жду.

          Ответить на комментарий →
          • Давай уже почтой пообщаемся, тут чтобы не отвлекать народ ))

            Ответить на комментарий →
  2. Ссылка на страницу загрузки page speed не активна, вместо href написано hreh :)
    Я вот все думал, как так, браузер гугла, page speed тоже его, а вместе их никак не использовать, т.к. нет расширения. А теперь вот знаю как это реализовать в хроме, благодарю)

    Ответить на комментарий →
    • Антон Краморов 22 сентября, 2011 в 05:52

      Вам спасибо!
      Косяк исправил)

      Ответить на комментарий →
      • Теперь хоть не нужно специально запускать firefox для анализа, а то на хром уж пол года как переехал. Стати нужно отметить, что данный код кэширования действует лишь на серверах с apache. Если сервер на nginx или связка nginx с apache, то не работает.

        У меня связка nginx с apache и не могу найти способ как задать кэширование на стороне клиента в браузере… и максимальное число при проверке page speed потому составляет 73.

        Ответить на комментарий →
        • Антон Краморов 22 сентября, 2011 в 06:06

          попробуй вот этот код в .htaccess! вдруг поможет!
          и ещё поэксперементируй не все три кода вставь которые я привел в статье, а по отдельности так как многим одного куска хватала

          1
          2
          3
          4
          5
          6
          7
          
          FileETag MTime Size
          <ifmodule mod_expires.c>
          <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
          ExpiresActive on
          ExpiresDefault "access plus 1 month"
          </filesmatch>
          </ifmodule>
          Ответить на комментарий →
          • Попробовал по разному, в page speed все равно две красные строки:
            1) Используйте кэш браузера
            2) Объедините изображения в CSS-спрайты

            Видимо у меня сервер на хостинге все же не поддерживает эти настройки кэширования.

            Еще правда спрайты можно настроить, но дело это муторное, да и при изменении внешнего вида блога опять все придется переделывать.

            Может потом хостера сменю, обязательно использую код, добавлю пост в закладки на будущее)

            Ответить на комментарий →
          • Антон Краморов 22 сентября, 2011 в 06:35

            Я вчера шаблон в спрайты перевел) щас как раз статью пишу про это и gzip сжатие.
            Постовыми кстати не хочешь обменяться?)

            Ответить на комментарий →
          • Будет интересно почитать) А постовые я не размещаю у себя на блоге, может в будущем 😉

            Ответить на комментарий →
  3. может вы знаете почему pagespeed в гугл хроме и pagespeed в mozilla показывают совершенно разные результаты?=) Кому доверять?)

    Ответить на комментарий →
    • Антон Краморов 08 января, 2012 в 01:24

      Смотря на сколько разные. Если скрины предоставите посмотрю кому лучше довериться.

      Ответить на комментарий →
  4. Ограничиваюсь https://developers.google.com/pagespeed/

    Ответить на комментарий →
  5. интересные способы, некоторые у Борисова описаны, будем пользоваться

    Ответить на комментарий →
  6. Кстати на Worpress полно плагинов, которые ускоряют сайт в 2-3 раза) давно ставил) неплохая штука) правда название забыл:( 

    Ответить на комментарий →
  7. Ребят, скажите, а мой сайт грузится быстро или нет?
    IT блог 

    Ответить на комментарий →
  8. Антон Краморов 16 февраля, 2012 в 01:15

    отлично грузиться=)

    Ответить на комментарий →
  9. Оцени мой сайт и подскажи как его сделать ещё быстрее http://serf.codemaster751.ru

    Ответить на комментарий →
  10. Странно, но после добавления в htacces кода, указанного здесь, у меня ни каких изменений не произошло.

    Ответить на комментарий →
  11. Антон Краморов 10 октября, 2012 в 11:51

    Nurlan, статья старенькая обновлять её уже нужно [:-|]

    Ответить на комментарий →
  12. Обновите пожалуйста статью. У меня также как и у Nurlan-a ничего не изменилось по поводу включения кеширования браузеров пользователей. Page Speed слишком много файлов посоветовал кешировать.

    Ответить на комментарий →
  13. Александр Василенко 25 мая, 2013 в 07:56

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

    Ответить на комментарий →
  14. У меня почему то тоже, после добавления в htacces этого кода, ни каких изменений не произошло.

    Ответить на комментарий →
  15. #Используйте кэш браузера:

    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”

    Header set Cache-Control “max-age=2592000, public”

    Header set Cache-Control “max-age=2592000, public”

    Header set Cache-Control “max-age=172800, public, must-revalidate”

    Header set Cache-Control “max-age=172800, private, must-revalidate”

    FileETag MTime Size

    ExpiresActive on
    ExpiresDefault “access plus 1 year”

    Ответить на комментарий →
  16. Здравствуйте Антон!У меня почему то код не работает, еще есть способы ускорения?

    Ответить на комментарий →
    • Антон Краморов 04 декабря, 2014 в 07:55

      Установите плагин кэширования Hyper-cash

      Ответить на комментарий →
Оставь свой первый комментарий и получи:
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]