Привет всем! давно я хотел написать статью про сервис google page speed, хотя я итак писал уже про ускорение и оптимизацию сайта и давал советы, которые помогут вам повысить показатель в google page speed. Но речь сегодня о другом, с недавних пор я перестал беспокоиться о своём показатели в сервисе google speed и пытаться его как то повысить. В своё время я увеличил показатель с 2% до 87% впечатляет не правда ли!? Но спустя некоторое время мне пришлось поменять шаблон моего wordpress сайта, после чего показатель упал до 63%, наверное шаблон оказался тяжелее предыдущего.

Так же в дальнейшем при установке одного плагина, который выводит на сайт адаптивную сетку анонсов записей, показатель ещё упал до 30%. То есть я так понял мне нужно было выбирать либо красивый сайт, либо высокий показатель в сервисе google speed. Причём я заметил, что показатель может быть не высоким 50-70% и это никак не влияет на скорость открытия сайта в браузере. При показателе 63% мой сайт работает без проблем, конечно если отказаться практически от всех плагинов и выбрать себе тему для сайта по легче, то можно повысить показатель до 90-100%. Но ради чего это делать? Ради цифры? Ради самомнения?

Google page speed считает каждый килобайт! если изображение на вашем сайте можно оптимизировать, то есть сжать ещё на пару килобайт, то google понизит показатель, до тех пор пока вы не уберёте эти пару килобайт. То есть всего из-за нескольких килобайт показатель может быть понижен, но при этом для сайта это не несёт абсолютно никаких изменений в плане скорости, всё по прежнему! Тогда зачем я буду загоняться из-за этих килобайт, пыхтеть там, время своё тратить? Опять же получается только ради цифр, ради того, что я всех лучше и круче, вот посмотрите какой у меня высокий показатель, это бред!

Просто я хочу огорчить тех, кто якобы думает, что после того как они повысят себе показатель в сервисе google page speed, их сайт тут же чудесным образом станет популярным, посещаемым, их поисковые запросы вырастут и т.д.. Да вы что ребят, очнитесь! хватит часами зависать там, тратить своё время впустую, займитесь лучше своим сайтом, напишите что-нибудь полезное лучше. Я не удивлюсь что есть люди, которые ночами не спят из-за того, что у них низкий показатель в google speed. В общем эта гонка за высоким показателем может довести до абсурда…нет, играть в игры Google я больше не хочу, с меня хватит.

Я знаю как сделать высокий показатель, но мне это больше не интересно, мне интересно писать полезные записи на своём сайте. И менять свой шаблон ради высокого показателя я то же не собираюсь, на данный момент меня всё устраивает. На последок хочу показать скриншот с показателем в google page speed самого популярного и посещаемого сайта в России – Вконтакте, наверное там и не слышали о таком сервисе.

Мои рекомендации: если у вас проблемы с сайтом, он медленно загружается, проблемы с сервером, создаёт большую нагрузку, то возможно сервис google page speed может помочь вам выявить причины и помочь вам их устранить. Если проблем у вас нет с производительностью сайта, то вам не нужно знать об этом сервисе, он не нужен вам, повышение показателя ни чем вам не поможет, только отнимет время и спутает все карты.

Нужно понять, что сам по себе движок wordpress это тяжёлая система, много функций и прибамбасов, на что нужны ресурсы. Проблему с нагрузкой сервера может решить только увеличение лимитов хостинга, то есть переход на более высокий тариф или выделенный сервер. При достижении определённого показателя этот процесс неизбежен и здесь google page speed вам уже не поможет.

На этом у меня всё, жду ваших комментариев, до новых встреч!

Почему я забил на Google page speed Insights обновлено: Январь 7, 2019 автором: Илья Журавлёв

Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.

Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.

Мотивация

При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.

Значит ли это, что результат 100/100 недостижим?

Как заставить страницы загружаться быстрее

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

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

Шаг первый: Оптимизируйте изображения

Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:

· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.

· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.

Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.

Шаг второй: Сократите объем ресурсов CSS и JavaScript

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

Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.

Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.

Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.

Шаг третий: Оптимизируйте время ответа сервера

Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.

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

Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.

Ниже представлена схема функционирования CDN c GTmetrix.

На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.

Шаг четвёртый: Используйте кеш браузера

Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.

Чтобы использовать кеш браузера, нужно создать файл.htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение

Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.

Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.

Шаг шестой: Включите сжатие

Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.

Шаг седьмой: Оптимизируйте мобильную версию

Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.

Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».

Вывод:

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

1. Используйте CDN.

2. Используйте кеш браузера.

3. Удалите блокирующие отображение ресурсы из верхней части страницы.

4. Оптимизируйте размер изображений и сожмите их.

Наверняка вы уже знаете, что медленным сайтам топа НЕ видать! нужно добиться скорости выше 75.

Условия работ:

1. Зелёной зоны не обещаю, но сделаю максимум возможного, чтобы вывести в зелёную

4. Убираю только жалобы на скрипты, файлы стилей и изображения.

Оптимизирую Скорость Загрузки Вашего Сайта и Увеличиваю количество баллов в Гугл Пейдж Спид

https://developers.google.com/speed/pagespeed/insights/

Наверняка вы уже знаете, что медленным сайтам топа НЕ видать! Даже в Google AdSence сейчас не пускают сайты со скоростью ниже 75. Поэтому, нужно добиться скорости выше 75.

Условия работ:

1. Зелёной зоны не обещаю, но сделаю максимум возможного, чтобы вывести в зелёную. В 96% случаев выводил сайты в зелёную зону. Пока не сдам заказ на сайт ничего не добавлять!

2. Оптимизирую изображения для одной страницы сайта, а скрипты и файлы стилей для всего сайта.

3. Для сайта на Вордпресс (иногда Opencart) подключаю кеширование.

4. Убираю только жалобы на скрипты, файлы стилей и изображения.

5. Анализ, работа и сдача работы производится по главной (или 1 другой) странице 1 сайта.

6. После завершения работ, вы получите отчёт "до/после" страницы Google PageSpeed Insights.

7. Улучшаю скорость для десктоп версии сайта.

8. Не беру в работу сайты на конструкторах (Ucoz, Ukit и др.).

Примеры:

https://cloud.mail.ru/public/MxY8/oSVcA3B4X Скриншоты

https://cloud.mail.ru/public/CUaE/dQcFCbhcz Видео

Все мои кворки: https://сайт/user/chaykin_dxz

Файлы

Скорость загрузки страницы - это один из важнейших показателей сайта и весомый сигнал для поисковых систем. Как ни старайтесь оптимизировать сайт, но если он долго загружается - не видать ему ТОП поисковой выдачи.

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

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

Google PageSpeed Insights - проверка скорости загрузки страницы сайта

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

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

Google PageSpeed очень полезен тем, что помимо собственно анализа в нем приводятся рекомендации по увеличению скорости загрузки сайта.

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

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Используйте кеш браузера

Сократите CSS

Оптимизируйте изображения - это обычно сильно повышает показатель по PageSpeed Insights

Сократите JavaScript

Включите сжатие

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

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

Помимо сервиса от Google для анализа скорости загрузки страниц, есть еще некоторые сервисы, но они уже скорее на любителя. Часть из них являются производной от первого и работают на основе его api.

Сервисы для анализа скорости загрузки сайта

Данный список является дополнительным и я рекомендую использовать именно инструмент от Google т.к. его показатели будут максимально близкими к реальной картине, не и рекомендации правильные.

Каждый сервис по своему интересен, и показывают они различных показатели. Большинство показывают именно сколько загрузки страницы в секундах и размер документа в килобайтах. Только сервисы PageSpeed Insights и GTMetrix показывают усредненное процентное соотношение, что очень удобно.

Как улучшить скорость загрузки страниц сайта

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

Оптимизация изображений

Проверьте, а не весят ли картинки сайта на слайдере главной страницы или в других блоках по несколько мегабайт - и такое бывает!

Я на практике сталкивался с таким - разработчики или владельцы сайта в последующем, загружали на сайт картинки прямо с фотоаппарата и представляете сколько они весят?!

Если Вам нужно пакетно сжать много изображений - для этого есть множество различных сервисов или утилит. Мне на практике чаще всего надо сжать несколько фото и я это делаю просто в фотошопе.

Во-первых подгоняю размер изображения под нужный мне на сайте. Нет смысла в картинке 2000 пикселей по ширине, если она будет сжата на сайте до 800 пикселей.

Также обратите внимание на разрешение изображения. Если фото напрямую с фотоаппарата, то этот показатель скорее всего 300 dpi и можно смело его уменьшать до 72 dpi - этого более чем достаточно для сайта.

В фотошопе я сохраняю картинку в режиме "Сохранить для Web" - это также плюс оптимизации изображения.

Сокращение время ответа сервера

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

Даже если Вы смотрите в сторону смены хостинга, выбирайте тот, что хотя бы работает на SSD дисках - это уже большой плюс к скорости будет. Я сначала для клиента, а затем и сам перебрался на fornex.com

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

Если смена хостинга для Вас пока что не вариант, посмотрите в сторону оптимизации базы данных. Часто популярные движки делают и оставляют в базе много мусора, вроде временных сохранений или ревизий статей. Это все так или иначе тормозит взаимодействие между сервером и сайтом.

Используйте кэширования страниц сайта

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

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

Если Ваш сайт сделан на wordpress, то наилучшим решением будет плагин WP Fastest Cache , но будьте осторожны - плагин может конфликтовать с некоторыми скриптами. Например, недавно начал сильно тупить слайдер на сайте клиента, оказалось что именно данный плагин перестарался с кэшированием. Но в целом такие случаи единицы и можете попробовать на своем проекте.

На этом пожалуй все. Быстрых сайтов всем моим читателям!

15 лайков

Последнее время, компания Google серьезно взялась за «ускорение» интернета. Сегодня корпорация связана с практически всеми разработками направленными на оптимизацию веб-ресурсов, если вы забыли, я напомню: создание CDN, манифесты CSS, разработка платформы javascript, Public DNS и многое другое. Сегодня же речь пойдет о новом сервисе Google PageSpeed, который позволяет оптимизировать данные и загружать их намного быстрее.

Что представляет собой служба PageSpeed?

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

Требования PageSpeed?

Есть несколько вещей, которые вы должны знать, перед тем как начать пользоваться новой службой PageSpeed .

1. В настоящее время сервис не поддерживает работу с «голыми» доменами, префикс www должен обязательно присутствовать в домене сайта. То есть http://example.com работать с новым сервисом не будет, а вот http://www.example.com запустится без проблем. Возможно, в ближайшем будущем этот недочет исправят.

2. У вас должен быть полный доступ к панели управления доменным именем. Для того чтобы начать работу PageSpeed, вам придется изменить запись CNAME. Если вы регистрировали домен у хостера, то придется обращаться к нему, чтобы техподдержка за вас изменила записи CNAME.

Настройка сайта для работы с PageSpeed

1. Для начала перейдите и нажмите кнопку зарегистрироваться.

Так как в настоящий момент PageSpeed проходит «обкатку», то попасть в число тестеров можно только по приглашению. После того как вы зарегистрируетесь, вам придется подождать некоторое время, пока специалисты Google обработают вашу заявку. В зависимости от времени суток и качества вашего сайта, ожидание может продлиться от часа и больше.

2. После того как вам прислали приглашение, перейдите и нажмите на выделенную кнопку в боковой панели - Page Speed Service .

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

После добавления сайта в раздел для вебмастеров, вы должны изменить записи к домену, а именно выставить правильный адрес CNAME, по которому сервис будет вас верифицировать и создавать страницы КЭШа.

4. Изменение в значение CNAME, вносятся через панель домена у регистратора. Для того чтобы добраться до настроек у регистратора NameCheap, вам нужно перейти к All Hosts Record, а далее проследовать по пути Host Management. У международного регистратора GoDaddy значение CNAME хранится в диспетчере DNS. По большому счету, панели управления доменами у всех регистраторов одного принципа, а потому ориентируясь на пример ниже, вы сможете разобраться.

Практически всегда, запись IP адреса и запись почтового алиаса идентичны.

Зайдя в панель управления записями CNAME, вы увидите похожую форму:

Что нужно изменить?

Запись с почтой «@» мы оставляем без изменений, а вот в строке IP-адрес, меняем численное значение на pagespeed.googlehosted.com. В отдельных случаях, вам придется добавить в конце доменного имени точку (без кавычек): «pagespeed.googlehosted.com.».

Также в поле Record Type, вам нужно выбрать значение CNAME Alias. После внесения корректировок, сохраните форму, нажав на соответствующую кнопку.

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

Так как в настоящее время, Page Speed не поддерживает работу с голыми доменами типа (http://example.com), для функционирования вам придется сделать переадресацию на домен с префиксом, то есть на http://www.example.com. На серверах Apache это сделать очень просто. Достаточно добавить в главный файл (в корневой папке сайта) .htaccess следующую запись:

RewriteEngine On RewriteCond %{HTTP_HOST} ^example.com RewriteRule (.*) http://www.example.com/$1

Не забудьте изменить надпись "example.com", на доменное имя вашего сайта.

Преимущества, которые дает использование Page Speed

Проверить, прирост скорости загрузки страницы, можно с помощью стандартных возможностей Google API. После того как все настройки сделаны, а DNS обновились, нажмите кнопку "Run Speed Test".

Система автоматически вас направит на страницу, где приложение покажет вам результаты. В среднем скорость загрузки повышается на 24%, а скорость индексации контента на 40 %. К слову, время потраченное на загрузки можно еще немного уменьшить, если настроить кэширование изображений.