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

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

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

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

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

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

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

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

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

Как вы можете заметить у меня 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

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

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

Установка pagee speed для chrome:
1.В новой вкладке перейдите на флаги chrome://flags/
2. Опустить скролл до API экспериментальных расширений и активируйте его

3.Теперь прокрутите скролл в самый низ и нажмите кнопку перезапустить
4. После перезапуска браузера и включения экспериментальных api пройдите по ссылке установки плагина. (На странице в 4 пункте вы её увидите)

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

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

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

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

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

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

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

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

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

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

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

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

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

  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 очка, смотрите:

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

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

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