Привет всем, давно я хотел написать статью про сервис 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 вам уже не поможет.
На этом у меня всё, жду ваших комментариев, до новых встреч !
info-effect.ru
«>SEO оптимизация скорости загрузки сайта
Выпить чашечку кофе, принять ванну, заняться физическими упражнениями … Все это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится длительнее 3 сек.
«>Улитка, черепаха, «тормоз» … Это невинные слова, которые пользователи могут сказать о медленном сайте — и эти слова никто не хотел бы услышать. Воспитанные пользователи могут ничего не сказать, но все равно пойдут с Вашего сайта к конкурентам.
Неудобный для пользователей, не достоин выдачи выше, чем на сотую странице … Эти сложные эпитеты принадлежат «искусственному интеллекту» — то есть, вот что Google думает о сайте с плохой скоростью.
Не очень приятно представлять, что все это может касаться вашего сайта? Давайте проверим, что показывает ваш «спидометр»: ваш сайт готов к гонкам за успех или только к соревнованиям среди черепах? В любом случае, сохраняйте спокойствие. Все можно исправить! Есть много инструментов для тестирования и оптимизации скорости сайта, которые позволят вам исследовать, определить проблемные места и исправить, чтобы ваш сайт «летал»! Итак, запускаем двигатели!
Лучшие инструменты для тестирования и оптимизации скорости загрузки сайта
1. Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/
«>
«>
Можете не верить, но Google — вовсе не бездушная машина. Он может быть строгим в своих «предпочтениях» по поисковой выдачи, но предлагает инструменты для улучшения производительности сайта (которая считается одним из важных факторов поисковой оптимизации). Google Page Speed Insights сканирует ваш сайт, сообщает вам время его загрузки, находит слабые места, тормозящие его работу, и предлагает возможности для решения этих проблем. Менее чем через минуту вы получаете полезные советы, как повысить скорость сайта. Эти советы классифицированы по важности.
Еще один сервис, работающий по технологии Google pagespeed Insights
https://testmysite.withgoogle.com/intl/ru-ru/
«>
2. YAHOO’S YSLOW
http://yslow.org/
«>
Yahoooo! Поехали! Ваш сайт может работать быстрее, если вы воспользуетесь советами еще одного поискового гиганта. YAHOO’S YSLOW оценивает продуктивность и стремительность загрузки собственного сайта на основе перечня критериев Yahoo, влияют на то, насколько медленным или быстрым сайт является для посетителей. Этот простой в использовании инструмент выставляет оценки на основе этих критериев и дает советы по улучшению. Чтобы у вас была лучшая картина, информация предоставляется в виде графиков и диаграмм, а также классифицируется по важности.
3. Page Scoring
http://www.pagescoring.com/website-speed-test/
«>
Избавьтесь вещей, которые замедляют ваш сайт! Вот один из самых простых онлайн-инструментов для определения скорости сайта — Page Scoring. Он сканирует ваш сайт и сообщает вам, как быстро он загружается со всеми HTML, CSS и Js-файлами, связанные с запросом пользователя. Он также дает вам ссылки на эти файлы и показывает в точности, сколько времени «выдается» на загрузку конкретных файлов и контента. Это дает вам прекрасную возможность узнать в общем о возможности производительности вашего сайта — от времени ответа веб-сервера в список файлов элементов страниц, «воруют» скорость загрузки.
4. Pingdom
https://tools.pingdom.com/
«>
Этот инструмент на такой легкий в использовании, но очень информативный и богатый функционал. Он исследует общее количество запросов на сайте, время загрузки всех файлов, а также показывает важную информацию, связанную с этими файлами. Он оценивает общую производительность вашего сайта, показывает найдены проблемы и предлагает практические варианты их решения. И проблемы и рекомендации сортируются по важности. Для удобства информация подается в графиках.
5. GTmetrix
https://gtmetrix.com/
«>
GTmetrix предлагает удобную систему оценок. Кроме оценок PageSpeed и YSlow, этот онлайн-сервис также дает подробные оценки по каждому пункту по производительности сайта. Собирая необходимые данные по запросу сервера, он выдает рекомендации по решению проблем и повышения скорости вместе с URL-ами, что очень удобно. В нем также есть возможность записывать видео с результатами тестирования и сохранять историю предыдущих проверок.
6. Web Page Test
https://www.webpagetest.org/
«>
Если вы используете Web Page Test, много важных деталей относительно загрузки каждого элемента вашего сайта могут быть представлены в каскадных диаграммах и с удобными скриншотами. Вы получите оценки производительности сайта и список рекомендации по оптимизации в порядке важности. Одна из классных особенностей Web Page Test — то, что вы можете выбрать страны, по которым вы хотите провести проверку производительности сайта.
7. Monitis
http://www.monitis.com/pageload/
«>
Попробуйте простой, но эффективный инструмент для определения производительности сайта. В течение минуты он сканирует все элементы сайта, связанные с ответами на запросы, и покажет время ответа каждого элемента. Важное преимущество Monitis — это то, что он проверяет скорость вашего сайта с 3 разных регионов одновременно, поэтому вы получите информацию о средней скорости загрузки по всему миру.
8. PR-CY.ru
http://pr-cy.ru/speed_test/
«>
Данный сервис оценивает быстроту загрузки сайта, а также дает рекомендации по её улучшению
Надеюсь, эти инструменты будут полезны для вашего сайта.
Как увеличить скорость загрузки сайта?
В сегодняшний век высоких скоростей, многие пользователи ожидают быстрой загрузки интернет-страниц. Именно это является одним из важнейших показателей при создании сайтов. Ведь обычно люди желают быстро отыскать нужную информацию, и при открытии страницы сначала просматривают информацию. Но в случае медленной загрузки сайта, такие страницы остаются без внимания. А для владельцев сайтов, рекламирующих свои услуги или товары, это означает потерю потенциальных клиентов, а также снижению индексации сайта поисковыми роботами, что приводит к понижению позиций в поиске.
Определение причины медленной загрузки сайта – первый шаг решения проблемы
Для решения этого вопроса нужно определить причины уменьшения скорости загрузки страниц, которые могут зависеть от разных факторов. Это и низкая скорость соединения и некачественный хостинг. Также проблемы могут быть связаны с ошибками в самом коде сайта или его структуре, из-за чего страницы или слишком большие, или имеют слишком много загружаемых элементов.
Для оценки скорости сайта и получения рекомендаций по ее увеличению лучше всего использовать дополнения для Фаерфокса или Хрома Page Speed. Также для этой цели можно использовать онлайн-сервисы оптимизации скорости описанные выше.
Методы ускорения загрузки сайта
В зависимости от выявленной причины недостаточной скорости сайта используются различные методы оптимизации. Логичным будет начать с решения тех проблем, которые будут отображены в окне Page Speed .
Один из них – это оптимизация модулей и компонентов сайта.
Этот метод окажется эффективным в случае наличия одновременно нескольких программных модулей и компонентов. В таком случае необходимо определить возможность удаления тех из них, которые не повлияют на функциональность сайта. Или же заменить их на более быстродействующие.
Объединить CSS и JS
Еще один эффективный способ – объединить внешние файлы CSS или скрипты JS. Благодаря этому уменьшается общее число загружаемых объектов и количество запросов к серверу. Еще эти же файлы можно сжать с помощью Gzip.
Ускорение сайта методом оптимизации изображений
Большой размер изображений может увеличивать общий объем сайта и негативно влиять на скорость загрузки. Оптимизация изображений – довольно сложная задача, и есть много способов решения. Например, изменение форматов файлов, применение разных инструментов для оптимизации изображений, а также оптимизация кода и стилей.
Вот один из инструментов, который поможет вам оптимизировать изображения:
Сервис оптимизации изображений — с помощью данного сервиса можно быстро уменьшить размер, не потеряв качества
«>Это далеко не все распространенные применяемые сегодня методы. Если провести анализ сайта, выявить проблемные места и последовательно использовать различные методы и инструменты для оптимизации, то можно добиться более высокой скорости загрузки.
Лично я оптимизировал сайт seovedenie.ru с помощью сервиса Google Page Speed Insights. После некоторых манипуляций я достиг заветных 100 баллов из 100 возможных. В результате оптимизации скорость сайта увеличилась на порядок во всех сервисах описанных выше.
Набирайте скорость, держитесь крепче … и хорошего полета!
seovedenie.ru
1. Google PageSpeed Insights
Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
2. Pingdom Tools
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
3. WhichLoadFaster
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
4. Web Page Performance Test
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США).
5. GTmetrix
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
6. Load Impact
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
7. Monitis Tools
Анализирует загрузку сайта с разных участков Земли — серверы в США, Европе и Азии. Отображает сводную статистику по каждому тесту.
8. SiteSpeed.me
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
9. PR-CY
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
devaka.ru
Правда о важности оценки Google PageSpeed
Скорость страницы определяет общее время, необходимое для полной загрузки веб-сайта. При анализе сайта скорость загрузки может иметь решающее значение для SEO. Пользователи быстро покидают страницу, когда загрузка занимает слишком много времени, а поисковые системы игнорируют страницы с низкой производительностью.
Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.
Исследования Google
Давайте рассмотрим некоторые недавние исследования: согласно Google среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.
Исходя из данных, представленных выше, мы видим, что вероятность ухода со страницы во многой степени зависит от времени ее загрузки:
- При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
- От 1 до 5 секунд до 90%
- От 1 до 10 секунд вероятность отказа уже 123%
- Не трудно догадаться, какое количество посетителей мы теряем.
Скорость страниц будет важным фактором для ранжирования
Еще в 2010 году Google заявил, что скорость страниц будет ранжирующим фактором, но это было ориентировано только для десктопной версии сайтов.
А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.
По заверению компании санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.
Несколько советов по увеличению скорости загрузки
- 1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- 2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- 3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
- 4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- 5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете заполнить заявку на бесплатный анализ и оценку стоимости работ.
В одной из следующих статей мы поговорим о том, что такое блокирующие скрипты и почему не всегда от них можно избавиться.
page-speed.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
Какие вообще средства оптимизации для ускорения сайтов предлагает Google?
В принципе для каждого из своих проектов я достаточно много времени уделяю мероприятиям по оптимизации страниц, которые способствуют их быстрой загрузке. По-настоящему не доходили руки лишь до блога Goldbusinessnet.com, который является по сути наглядным пособием для начинающих вебмастеров, не лишенных здоровых амбиций и заряженных на достижение цели.
Но, поскольку по натуре я перфекционист, не мог допустить, чтобы информационный веб-ресурс, несущий, так сказать, знания в массы, был бы в каком-то аспекте среди отстающих. Посему было решено приложить максимум усилий по его оптимизации, включая рекомендации Пейдж Спид.
Поэтому незамедлительно перехожу к описанию данного инструмента, чтобы вы могли оценить его функционал и применить на практике во благо своим веб-ресурсам.
Ранее Page Speed Insights можно было использовать в виде расширений для браузеров Google Chrome и Mozilla Firefox, ссылки на скачивание присутствовали на специальной странице Гугла. Причем для того, чтобы применять его в Мазиле, сначала необходимо было скачать и установить небезызвестный плагин Файрбуг, где Пейдж Спид присутствовал в качестве его дополнения:
«>
Сейчас уже нет возможности применять расширения для браузеров именно от Google, хотя такие же плагины, но в несколько другой интерпретации, доступны на официальных вебстраницах Хрома и Мазилы (тут и тут). Кроме того есть, вполне функциональный одноименный онлайн сервис Гугла с точно таким же функционалом и не меньшими возможностями. Если перейдете в раздел Developers, то увидите там ссылку на инструмент Page Speed:
К слову, на этой же странице «PageSpeed Tools» расположены все предложения Google по ускорению сайтов. Похоже, разработчики «империи добра» всерьез взялись за оптимизацию и ускорение всего интернет пространства, поскольку в Девелоперс вы найдете линк на Библиотеку Оптимизации (Integrate the PageSpeed Optimization Library) с открытым исходным кодом.
Наличие открытого кода программного обеспечения данного проекта, работающего на основе модуля «mod_pagespeed», который устанавливается на сервера Апач (коих, кстати, подавляющее большинство), означает, что его может усовершенствовать или обновить любой желающий.
То есть, таким способом вполне реально за счет интернет сообщества создать близкий к совершенному инструмент ускорения. Как все это будет выглядеть на практике, покажет время. Естественно, для того, чтобы внести полновесный вклад и достигнуть успеха в этом благом деле, необходимо быть достаточно квалифицированным программистом.
Ежели взгляните на верхний скриншот (информация обведена зеленой рамкой), то увидите там ссылку на установку последней версии уже готового модуля. Это вполне может быть интересно для владельцев хостинга, которые могут установить его на своих серверах, обеспечив автоматическое ускорение расположенных там сайтов.
Причем, существуют две модификации модуля Пейдж Спид: непосредственно для серверов Apache и для связки Apache + Nginx, где второй играет роль прокси-сервера:
«>
Кстати, вариант совместного использования Апача и Ngnix в современных условиях наиболее востребован и используется большинством продвинутых хостеров (включая, например, Спринтхост), поскольку обеспечивает эффективное использование ресурсов. Так что, если вы заинтересовались таким методом автоматического ускорения сайтов, можете приложить к этому руку самостоятельно либо напрячь своего хостера.
goldbusinessnet.com
Онлайн сервисы для измерения скорости загрузки сайта
Во всяком случае именно так я относился до недавних пор к тому, чтобы попытаться ускорить свой ресурс. Но мне пришло в голову, что лучше не дожидаться неприятных тенденций в статистике посещаемости своего сайта (а именно уменьшения трафика с поисковой системы Google.ru, ибо она более критично относится к скорости загрузки), а исправить очевидный недочет прямо сейчас.
Надо просто осознать, что скорость, с которой загружается ваш сайт, блог или форум, является очень важным показателем. Если у вашего проекта с этим показателем не все в порядке, то это может повлечь за собой довольно неприятные последствия. И самое важное из них то, что посетители могут отказаться от работы с вашим ресурсом, т.к. он очень долго подгружает страницы. Кроме этого поисковики, в особенности Гугл, учитывают ее при общей оценке полезности того или иного ресурса.
Для того, чтобы понять, а как быстро подгружаются страницы вашего ресурса, можно воспользоваться, например, возможностями такого расширения для браузера FireFox, как FireBug, подробно описанный в статье по приведенной ссылке. А можно воспользоваться услугами сервисов, которые предназначены для этого. Далее я приведу в качестве примера несколько таких.
- Pingdom — здесь достаточно просто указать адрес страницы, скорость загрузки которой вы хотите измерить (это не обязательно должна быть главная страница, ибо скорость загрузки внутренних страниц не менее, а зачастую даже более важна).
В результате будет представлена диаграмма времени закачки отдельных объектов вебстраницы, а также их Урл и вес. Чем меньше объектов будет загружаться и чем легче будет весить каждый из них, тем лучше. Например, я для этой цели:
- объединил некоторые картинки из темы оформления сайта в так называемые спрайты
- а также по возможности уменьшил путем объединения число подгружаемых файлов стилей (CSS) и скриптов
- кроме этого имеется смысл включить Gzip сжатие статики на сервере
- и оптимизировать все используемые на сайте картинки
Собственно, некоторые проблемы и историю измерения скорости вашего сайта вы сможете отследить на соседних вкладках верхнего меню Pingdom.
Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на мониторинг сайта на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.
Для измерения пинга для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».
- WebPageTest — как обычно, вводите Урл проверяемой страницы (не обязательно главной). Сервис некоторое время обсчитывает скорость загрузки всех элементов сайта, после чего выдает очень наглядную диаграмму (точнее даже две — за первый проход и за второй, когда уже часть элементов сайта загружаются из кеша браузера):
На первой диаграмме уделяете внимание положению фиолетовой вертикальной линии — это будет время окончания отрисовки сайта. Вторая вертикальная линия (синяя) будет означать время полной загрузки. Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая — раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд — то нужно озабачиваться исправлением этой ситуации.
- Google PageSpeed Insights — это инструмент для разработчиков от самого Гугла. Он дает оценку скорости загрузки вашего сайта (а точнее оптимизации этой скорости) по стобальной шкале. 100 — это идеал, который недостижим, а вот 80-90 получить вполне реально, тем более, что сервис дает очень подробные рекомендации по исправлению выявленных недочетов.
Как видно из приведенного скриншота, Google PageSpeed Insights дает комплексную оценку — для компьютерного браузера и для мобильного. Кроме этого, внизу будет приведена оценка удобства пользования вашим ресурсом на различных гаджетах. Если оптимизацией сайта под мобильные устройства вы еще не озаботились, то оценка там будет очень низкая (да и на приведенном справа скрине вашего сайта в окне смартфона все будет наглядно видно).
Но самое главное то, что Google PageSpeed Insights дает рекомендации, как увеличить оценку вашего сайта, т.е. как его ускорить. Начинать нужно, естественно, с самого верха, ибо эти исправления внесут наибольший вклад в ускорение.
У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:
Пришлось покопаться в инструкции к этому онлайн сервису и вычитать там, что минимум нужно ставить 1 день хранения статики в кеше. Я попросил техподдержку хостинга поставить с запасом 1 неделю, что они и сделали. Теперича оценка чуток повысилась и шибко важных претензий к моему ресурсу у Гугла в плане скорости загрузки не имеется, что есть хорошо.
- Test my Site — новый сервис опять же от Гугла. В основном он делает акцент на оценку мобильной версии вашего сайта в том числе и по критерию его скорости загрузки:
Простенько и со вкусом, что называется. Можно подписаться на рассылку изменений.
- GTmetrix — опять таки «не мудрствуя лукаво» вводите Урл нужной страницы и чуток ждете окончания анализа. В результате вы получите отчет, сформированный на основе данных двух плагинов для браузеров — Page Speed (читайте о работе с ним ниже) и YSlow. Собственно, каким данным доверять и чьим рекомендациям следовать — решать вам.
Про то, что еще хорошего есть в GTmetrix и как его использовать я уже довольно подробно писал и поэтому повторяться не буду, чтобы не загромождать и без того уже громоздкую статью (дочитаете до конца — можете считать себя героем).
- Ping Admin — аналогичный онлайн ресурс для измерения время ответа сервера с разных уголков нашей огромной планеты.
- Host Tracker — практически то же самое, только страны другие.
- ByteCheck — позволяет измерить значение TTFB (Time To First Byte) для вашего сайта, на который часто обращают внимание при оптимизации. Это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером, что есть плохо. Читайте советы по оптимизации загрузки сайтов.
- Load Impact — это не совсем про скорость, но тоже важный сервис. Он позволяет протестировать нагрузочную способность вашего сайта и то, падает ли при этом скорость загрузки страниц. Весьма полезная штука.
- Web Page Speed — онлайн-сервис с дизайном начала девяностых, но вполне себе такой информативный, если приспособитесь к отсутствию юзабилити. Внизу даются общие рекомендации по исправлению ситуации.
Так ли важно отслеживать скорость загрузки страниц?
Но вернемся от измерения скорости к поиску возможностей ее увеличения. В Гугл Вебмастере, о котором я писал тут, раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.
В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог KtoNaNovenkogo.ru загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.
Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).
Сразу оговорюсь, что этот инструмент оперирует достаточно сложными и не совсем понятными вещами рядовым вебмастерам, которые в основном связаны с тонкостями и нюансами работы Web сервера. Если вы никогда сервер не администрировали, но будет сложно.
Есть выход — напрячь вашего хостера на тему выполнения действий, которые предписывает Пейдж Спид. Согласится или нет — это уже другой вопрос. Нанимать для этой цели фрилансера я так и не решился, ибо стремно предоставлять доступ к серваку абы кому (вот такой вот я недоверчивый).
На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):
Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать…
Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.
Дело в том, что даже понимая на что ругается этот плагин, я толком не знал что нужно сделать, чтобы все это устранить и хоть как-то ускорить свой блог. В общем, у меня нашлось сразу очень много более важных дел, по сравнению с которыми мышиная возня с настройками Web сервера (тем более, что я в них и не разбираюсь особо) показалась мелкой и несущественной.
Правда, в свое время я тоже отложил в долгий ящик решение проблемы безопасности при работе с электронными деньгами Webmoney и в результате поплатился за это потерей всех этих самых денег. Памятуя о случившемся, на днях решил упереться рогом и попробовать сдвинуть с места проблему увеличения скорости загрузки сайта, несмотря на всю непонятность и сложность для меня данного вопроса.
Короче, установил я повторно Пейдж Спид в Мазилу (сейчас этого делать уже не надо), посмотрел на что именно он особо сильно ругается и кое-что мне все же удалось улучшить и, надеюсь, хотя бы немного увеличить скорость.
Конечно же, я решил не все те проблемы, на которые обращал мое внимание этот плагин, но кое-что все же удалось сдвинуть с мертвой точки. Пока все не забыл, спешу поделиться с вами, мои уважаемые читатели, тем, что удалось нарыть и сделать. Возможно, что вам это пригодится и скорость сайта не будет для вас узким местом, существенно затрудняющим продвижение.
Page Speed — анализ скорости и советы по ее увеличению
P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.
Итак, раньше нужно было установить в свой браузер плагин, но сейчас достаточно перейти сюда, ввести Урл адрес страницы, которую вы хотите проанализировать (на разных типах страниц могут возникать разные проблемы со скоростью загрузки, посему в этом инструменте имеет смысл проверять все варианты) и нажать на синюю кнопку «Анализировать».
Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.
Причем, в самом верху окна Page Speed будут расположены замечания и рекомендации, которые вам желательно будет посмотреть и изменить в первую очередь («исправьте обязательно»), ибо это даст наибольший эффект в плане увеличения скорости загрузки и потребует от вас не слишком больших усилий. Приведу пример анализа одного из моих второстепенных проектов, до которых руки особо не доходят:
Т.е. рекомендации и обнаруженные проблемы, помеченные красным прямоугольником с восклицательным знаком и расположенные в самом верху списка, являются наиболее важным и начать оптимизацию желательно именно с них (дешево и сердито, что называется), тем самым добьетесь наибольшего эффекта.
Замечания, помеченные оранжевым цветом, потребуют от вас больших усилий по исправлению, но при этом могут и не привести к очень значительному росту скорости. Увы и ах, пока их можно отложить в долгий ящик и заняться первостепенными задачами, которые помогут существенно ускорить проект.
У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/, ибо он испльзует АПИ PageSpeed) для https://ktonanovenkogo.ru была такой:
Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера»), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.
Если нажать на спойлер рядом с этой надписью, то появится список различных файлов, которые не удовлетворяют оптимальным требованиям кэширования статических объектов (скрипты, CSS файлы, файлы изображений используемых на web странице) в браузерах пользователей (т.е. у читателей):
Т.е. PageSpeed Insights советует нам для увеличения скорости загрузки настроить оптимальным образом кэширование различных элементов web страниц в браузерах пользователей для того, чтобы при просмотре других эти статические элементы не подгружались бы заново с сервера. В теории все это звучит довольно запутано, ибо я понятия не имею о механизмах кэширования используемого браузерами (читайте про то, что такое кэш браузера и как его очистить).
К тому же, оптимизацию кэширования статических объектов мы будем проводить за счет механизмов самого сервера вашего хостинга. Довольно запутанно, но я вам предложу уже готовые решения, найденные на просторах рунета, а вы их попробуете в действии и решите, какое именно наилучшим образом будет работать именно на вашем хостинге.
Оптимизация кэширования в браузере и проверка его работы
Правда на моем текущем хостинге это не сработало, ибо у меня сейчас стоит связка Апача с nginx (настраивать надо последний, что за меня сделал хостер не ведомым мне способом). Но если у вас чистый Апач, то предложенный ниже метод может сработать.
В общем, мы попытаемся повлиять на сервер где хостится ваш проект таким образом, чтобы он отдавал браузерам команды направленные на оптимизацию кэширования статических элементов. Делать это будем посредством довольно известного инструмента удаленного управления сервером — файла .htaccess. Знаете о существовании такого?
Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (FTP клиент FileZilla был описан мною тут), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла .htaccess.
С этого момента вы все делаете на свой страх и риск. Посему обязательно скачайте на комп копию этого файла, чтобы в случае чего оперативно откатиться назад.
Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.
После этого переименуйте этот файл в .htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.
Наиболее популярные способы включения данной опции на веб-сервере под управлением Апач — с помщью модулей mod_headers или mod_expires. Расположенный ниже код поможет помочь вам включить кеширование статики в браузере, если онлайн-сервис хотя бы один из этих модулей Апача у вас на серваке установлен.
Сначала приведу код для модуля mod_headers. Обращаю ваше внимание, что в нем используется проверка
<ifModule mod_headers.c> #кэшировать html и htm файлы на один день <FilesMatch ".(html|htm)$"> Header set Cache-Control "max-age=43200" </FilesMatch> #кэшировать css, javascript и текстовые файлы на одну неделю <FilesMatch ".(js|css|txt)$"> Header set Cache-Control "max-age=604800" </FilesMatch> #кэшировать флэш и изображения на месяц <FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> #отключить кэширование <FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$"> Header unset Cache-Control </FilesMatch> </IfModule>
Комментарии (их строки начинаются со знака решетки) потом можете удалить, но они по-любому на работу кода влияния оказывать не будут.
Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires, где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:
<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 5 секунд ExpiresDefault "access plus 5 seconds" #кэшировать флэш и изображения на месяц ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" #кэшировать css, javascript и текстовые файлы на одну неделю ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" #кэшировать html и htm файлы на один день ExpiresByType text/html "access plus 43200 seconds" #кэшировать xml файлы на десять минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>
Комментарии опять же потом можно будет удалить.
Если вдруг не сработало, но вы надеетесь на чудо, то вот еще несколько вариантов того же самого кода, но пробуйте их по очереди, а не все сразу:
-
<IfModule mod_expires.c> 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" </IfModule>
-
<IfModule mod_headers.c> <FilesMatch .*.(js|css)$> Header set Cache-control: private </FilesMatch> <FilesMatch .*.(gif|jpg|png)$> Header set Cache-control: public </FilesMatch> </IfModule>
-
<IfModule mod_setenvif.c> BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary </IfModule> -
FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </filesmatch> </ifmodule>
Теперь после того, как вы вставили в .htaccess код, позволяющий повысить скорость за счет оптимизации кэширования в браузере на стороне посетителя, и сохранили произведенные изменения, снова проверьте страницу вашего ресурса в PageSpeed Insights и убедитесь что проблема пропала:
Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.
Что и требовалось доказать. Вот так вот играючи мы с вами разобрались с одной из самых существенных и весомых проблем найденных в Page Speed.
ktonanovenkogo.ru