Гугл пейдж спид тест

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

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

Мотивация

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

1.jpg

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

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

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

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

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

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

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

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

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

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

Google также рекомендует сократите объем ресурсов CSS и JavaScript.

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

3.1.jpg

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

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

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

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

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

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

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

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

5.png

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

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

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

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

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

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

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

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

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

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

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

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

Вывод:

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

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

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

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

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

Источник: 

www.seonews.ru

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

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

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

Шаг #1: Оптимизируем изображения

lhyAb0mKmp5aPP8XkyMlLhHHTKbMURRWciyzWOeM

PageSpeed Insights Tool проверит изображения на вашем сайте, и если скорость их загрузки окажется недостаточно высокой, Google предложит их оптимизировать. Вы можете увеличить скорость загрузки изображений, уменьшив их вес и размер. Чтоб решить эту задачу достаточно выполнить два шага:

  • Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG. Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
  • Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.

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

Google предложит сразу загрузить оптимизированные изображения на сайт.

Шаг #2: Максимально сократите CSS и JavaScript код

Jx0tpLCXrENgH1FJ-rGL_t0lA1IzMZ_KATNuSJiw

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

3TaxMR3WaJjlByzESo6hO1FT65ZWD8BUfExWGpH1

может быть сокращен до:

Cf02oz7-5rKEFmSUJB4SrKaDDfhMocAVgKbQoRUZ

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

А для сайтов на WordPress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

_T-5CIADwmap_A8EoAvgUm07z6qXX17q9rcVHn3j

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

CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

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

-QtxReg-QXJ4wGEz_8J1BydkLAMzsPvIy_HBbdqt

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

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

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

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

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

yg-2HcJJmFYRkXmeaDXOHJpdPLH1NDPd75qFiylQ

Удаление кода, блокирующего отображение верхней части страницы — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний. Обратите внимание, что код JavaScript следует всегда размещать в конце файла.

Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

_vBJHGRwaF9MI8M2fxdvbgaexSLSfwXbzO5bSkDR

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

vYDPyti8-3XD9RH89CIyZWLZL5RHMpW8LAND_9Mp

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

Заключение

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

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

  1. Используйте сеть CDN (content delivery network).
  2. Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
  3. Оптимизируйте размер изображений и сожмите их.

Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?

(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)

spark.ru

1. Google PageSpeed Insights

Инструмент Google PageSpeed Insights

Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.

2. Pingdom Tools

Проверка скорости с помощью сервиса Pingdom Tool

Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.

3. WhichLoadFaster

Which Load Faster - Сравнение двух сайтов по скорости

Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.

4. Web Page Performance Test

Подробная статистика по Web Page Performance Test

Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США).

5. GTmetrix

GTmetrix - сводная статистика по скорости и история

Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).

6. Load Impact

Load Impact - легкий ДДОС для теста сайта

Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.

7. Monitis Tools

Monitis Tools - проверка скорости загрузки с разных участков Земли

Анализирует загрузку сайта с разных участков Земли — серверы в США, Европе и Азии. Отображает сводную статистику по каждому тесту.

8. SiteSpeed.me

SiteSpeed.me - с каких географических участков скорость наилучшая или наихудшая

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

9. PR-CY

PR CY - массовая проверка скорости загрузки сайтов

Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.

devaka.ru

Google PageSpeed — инструмент который позволяет проверить скорость работы сайта. Он позволяет оценить скорость загрузка для стационарных ПК и для мобильных устройств и выдает рекомендации, которые могут быть использованы для оптимизации.

 

Ссылка на ресурс:

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

 

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

Проверить скорость работы сайта, google developers pagespeed insights

 

 

После проведения анализа скорости загрузки сайта чаще всего можно получить следующие рекомендации:

 

Optimize images

Самая часто встречающаяся рекомендация сервиса связана с оптимальным выбором изображений для сайта. Графический контент очень тяжелый и может сильно замедлять загрузку страниц ресурса. Самые общие рекомендации заключаются в выборе правильного формата (чаще всего имеет смысл использовать PNG), размера и качества изображений. Так слишком большое изображение, используемое в качестве фона может в разы замедлить скорость загрузки сайта. Всегда нужно проверять изображения и максимально уменьшать их размер и качество (размер и качество изображений имеет смысл задавать минимальными приемлемыми для конкретного ресурса).

 

Enable Compression

Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.

 

Leverage browser caching

Определяет передается ли заголовок Cache-Control и кэшируются ли данные в браузере пользователя. Кэширование позволяет значительно сократить количество обращений к серверу, что снижает нагрузку на него и увеличивает скорость отдачи статических данных (которых большинство на любом сайте) клиенту

 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.

Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>

Minify CSS

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

 

Minify HTML

Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.

 

Avoid landing page redirects

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

 

Prioritize visible content

В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.

server-gu.ru

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

page speed loading google

Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?

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

Стартовые показатели подопытного сайта — 87/100.

В итоге, после применения определенных манипуляций, было получено следующие результаты:

100/100 page speed

О том, как удалось достичь таких показателей, читайте далее.

 

Как ускорить загрузку страниц?

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

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

Итак, приступим:

Шаг № 1: Оптимизация изображений

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

Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:

  • Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
  • Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.

Загрузка оптимизированных изображений

Шаг № 2: Минимизация JavaScript, CSS и HTML 

В примере, Google предлагает сократить объемы JavaScript и CSS файлов.

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

сократить размеры java script, css

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.

Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание». 

Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

В случае использования WordPress, рекомендуется устанавливать плагин Autoptimize.

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

Вот результаты, полученные после минимизации JavaScript и CSS:

результаты минимазации javascript и css

Шаг № 3: Использование кэш браузера

Использование кэш браузера

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

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

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

Вот визуализация того, как работает CDN:

CDN

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

После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:

кэширование браузера скриншот

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

Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.

вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics

Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.

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

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

скриншот из Pingdom Tools

Шаг № 4: Удаление блокирующих кодов

Удаление блокирующих кодов

Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта. 

Более детально смотрите по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS 

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force JavaScript» и установите ее на «Inline all CSS».

Шаг № 5: Включение сжатия

включение сжатия

Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-  

Шаг № 6: Оптимизация мобильного формата

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

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите: 

меню (гамбургер) настроек и управления браузером

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

uaweb.ua

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

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

Для анализа сайта перейдите по ссылке — https://developers.google.com/speed/pagespeed/insights/

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

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

Рекомендации обычно у всех стандартные:

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

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

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

  • Сократите CSS

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

  • Сократите JavaScript

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

Скорость загрузки сайта - Google PageSpeed Insights

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

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

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

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

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

  • GTmetrix
  • WhichLoadFaster
  • Pingdom Tools
  • Web Page Performance Test
  • Monitis Tools
  • SiteSpeed.me
  • Load Impact
  • WebPage Analyzer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поделитесь статьей с друзьями

alexbrush.com


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

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

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

 

treadmill-536126_640_mini

 

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

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

 

03-01-2016 13-08-10_mini

 

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

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

 

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

 






info-effect.ru


info-effect.ru

Что такое google pagespeed insights

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

Pagespeed insights – персональный тренер бегуна – то есть, нашего сайта. Он внимательно анализирует динамику загрузки, выделяет проблемные области, и дает советы по исправлению ошибок, приводящих к снижению скорости.

Как пользоваться pagespeed insights

Чтобы воспользоваться инструментом онлайн-измерения скорости загрузки сайта, перейдите на официальную страницу сервиса. Введите URL страницы и нажмите кнопку «Анализировать».

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

Отношение полученных баллов к максимальному стобальному результату выражает степень оптимизации сайта. Значения 50-70% являются средними показателям большинства ресурсов, не задумывающихся об улучшении скорости загрузки. 80-90% означает, что вы основательно подготовили сервер и страницы. Стопроцентный результат является большой редкостью, но иногда встречается.

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

Советы по улучшению скорости загрузки сайта

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

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

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

  • Попробуйте сохранять все внутренние картинки в формате .jpg и качеством 0.5-0.7
  • Используйте специальные инструменты сжатия: TinyPNG или compressor.io
  • Установите специальные скрипты для предварительной загрузки заготовленных обрезанных изображений

Максимально используйте кэш браузера

Вы должны вручную указывать браузерам клиентов на то, чтобы те хранили статистику как можно дольше. Сделать это можно, с помощью механизмов конфигурации .htaccess в веб-сервере Apache

“<ifModule mod_headers.c>

<FilesMatch «.(htm|html)$»>

Header set Cache-Control «max-age=40200»

</FilesMatch>

<FilesMatch «.(css|js|txt|woff|woff2|ttf|eot)$»>

Header set Cache-Control «max-age=624800»

</FilesMatch>

<FilesMatch «.(swf|flv|ico|gif|jpg|jpeg|png)$»>

Header set Cache-Control «max-age=2552000»

</FilesMatch>

<FilesMatch «.(pl|php|cgi|spl|scgi|fcgi)$»>

Header unset Cache-Control

</FilesMatch>

</IfModule>”

Подключите сжатие

Если вы когда-то не включили сжатие на стороне сервера, нужно это сделать прямо сейчас. Есть два варианта сжатия. При установленной CMS подключите сжатие в панели управления, если CMS нет, перейдите в конфигурацию Apache и включите Gzip-сжатие там.

Чтобы проверить, работает ли сжатие, обновите сайт и рассмотрите присланные браузеру заголовки. Если там присутствует строка Content-Encoding: gzip, все прошло отлично.

Минимизируйте объем CSS и JavaScript

Все .js файлы должны быть минифицированы. Для популярных библиотек есть специальные издания в формате .min.js. Если вы не нашли такую редакцию или имеете собственный код, к вашим услугам предоставляются онлайн-минификаторы, например Closure Compiler.

С CSS кодом помогут разобраться такие же минификаторы, например cssminifier.

Оптимизируйте загрузку видимого контента

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

Загрузите блокирующего кода в конце страницы

Одной из самых старых особенностей HTML-сайтов является синхронная обработка контента. Если в head-блоке выполняется загрузка внешних скриптов и стилей, то браузер не показывает содержимого сайта до полной обработки всех полученных данных.

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

Существует три важных совета по исправлению этого пункта.

  • Располагайте основные дизайн-стили вверху документа, а необязательные .css стили догружайте в footer-блоке

“function addCss(fcss) {
xh = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject(«Microsoft.XMLHTTP»);
xh.open(«GET», fcss, !1);
xh.send();
var at = document.createElement(«style»);
at.innerHTML = xh.responseText;
document.head.appendChild(at);
}
addCss(‘default.css’);”

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

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

Постарайтесь подобрать оптимальную конфигурацию веб-сервера для быстрой отдачи контента. Первым шагом будет установка связки Nginx+Apache для мгновенной отдачи статики кэширующим прокси.

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

Проанализируйте время работы PHP. Не делайте множественных обращений к базе данных, выполняйте операции одним запросом, старайтесь не блокировать файлы на запись без необходимости. Используйте кэширующие расширения, такие как memcached

Кроме скриптовой оптимизации, постарайтесь перейти на удобный хостинг. Хорошим выбором будет VPS на SSD-дисках или физический выделенный сервер с большой мощностью

На что влияет скорость загрузки страницы

Возникает закономерный вопрос: для чего мы улучшаем эти параметры, и как они сказываются на продвижении сайта?

Статистика говорит, что если пользователь ждёт загрузку больше трех секунд, в 40% случаев он просто покидает страницу. Что ещё хуже, 80% посетителей отказываются от повторного визита на медленный сайт.

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

semantica.in

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.