Как узнать скорость загрузки страницы
Еще раз возвращаюсь к теме проверки скорости загрузки сайта. Делаю я это по просьбе коллег-блоггеров и заказчиков. В этой статье я, коротко и со скринами, поясню механизм сей операции при помощи вашего браузера Гугл Хром.
Время загрузки сайта – это теперь один из самых важных факторов в продвижении блога или сайта. Хорошо, если время загрузки ваших страниц на сайте находится в диапазоне 325 – 600 миллисекунд. Поисковики не выставляют на первые страницы в поиске ресурсы, время загрузки которых велико. Это обусловлено заботой о пользователе, имеющем лимитный интернет или заходящем с мобильных устройств. А доля мобильного трафика не просто растет, она стала доминирующей.
Точно определить скорость загрузки вашего сайта можно сервисом, «живущем» в браузере Гугл Хром. С его помощью можно не только узнать время, требующееся на загрузку всего документа, но и определить какой элемент, код, скрипт, плагин и все остальное сколько времени грузится.
Как не следует измерять скорость загрузки сайта
Не
следует проверять эту самую скорость различными сервисами проверки скорости загрузки. Все они показывают различное время. Ориентироваться на эти сомнительные результаты не стоит.
Достаточно сказать, что один из этих ресурсов показал 12 минут загрузки главной станицы моего сайта, что привело меня в полное уныние. Это объясняется местоположением анализаторского сервера, скоростью интернета в определенной географической точке, но никак не реальными показателями.
Сотрудники хоста Спринтхост мне подсказали, каким способом пользуются они сами и оказалось, что это удобно, быстро и надежно.
Измерение скорости загрузки сайта в браузере Гугл Хром
- Правой кнопкой мыши щелкаем в браузере Google Hrom на главной странице проверяемого сайта и выбираем строчку Просмотр кода элемента .
Открывается вот такое окно.
- В нем выбираем вкладку network
- Перезагружаем страницу с сайтом
Иногда бывает, что окно анализа уходит за вкладку страницы сайта, тоесь открыется в новом окне браузера. В этом случае, откройте его заново из панели быстрого запуска или сверните вкладку браузера со страницей сайта. Увидите окно готового анализа скорости загрузки сайта.
Если пройтись по всей вкладке – можно увидеть скорость загрузки каждого файла, изображения, плагина. И, в зависимости от выявленных проблем, нужно принимать решение.
Тут возможны варианты действий:
- Освобождаемся от лишних плагинов. (Наверняка, есть такие, без которых можно обойтись – проведите ревизию.)
- Заменяем плагины скриптом. К примеру, плагины кнопок соцсетей забирают до минуты времени загрузки сайта. Кнопки поставленные скриптом – нисколько не утяжеляют сайт.
- Оптимизируем изображения (уменьшаем вес каринок, убираем неиспользуемые, те, что когда-то были вами загружены, удалены из редактора изображений, но не удалены из библиотеки медиафайлов и с хоста). Это отдельный разговор и он нам еще предстоит.
- И, наконец, ставим плагин WP Super Cachе(об этом плагине и его настройках подробно )
Несмотря на то что, я — противник лишних плагинов, этот плагин считаю необходимым. Полезен он тем, что сохраняя кэши (снимки) ваших страниц, сокращает число запросов к серверу.
Следовательно, время загрузки вашего сайта, вместе со всеми картинками, шапками, баннерами и прочими красивостями, значительно сокращается.
Если у вас есть претензии к своему хосту – перетаскивайте свои сайты на Спринтхост. Рекомендую.
От вас потребуется только написать письмо в техподдержку хоста с просьбой о переносе сайта. Все остальное, в лучшем виде, сделают ребята на хосте. Перенесут, как хрустальную вазу. Ваше участие будет минимальным. Многие мои коллеги уже перенесли свои сайты на Спринхост, потому что в трудную минуту их прежний хостер или сильно задерживался с ответом, или отправлял искать специалиста на фрилансе.
Техподдержка круглосуточная: хошь – по бесплатному круглосуточному телефону, хошь – письмом в техподдержку, — прям как в сказке.
Отвечают быстро, помогают очень скоро, и, немаловажно! внимательны к самым глупым вопросам и проблемам. Ни разу не слышала, что это не в их компетенции. А я такие вопросы поначалу задавала, что самой сейчас стыдно.
Измерьте скорость загрузки своего сайта и если проблемы с этим нет – я за вас рада. Если есть, это серьезный повод насторожиться. Принимайте меры. Оптимально, если страница грузиться меньше минуты.
Увеличивающееся количество веб-ресурсов, заставляют поисковики обращать внимание на скорость загрузки сайтов и мотивировать веб-мастеров к оптимизации скорости загрузки. Для качественной и количественной оценки скорости загрузки веб-ресурса есть специальные сервисы тестирования, на которых делается точная проверка времени загрузки сайта. О 9+ инструментах тестирования в этой статье.
Базовые инструменты
Яндекс.Метрика
Для использования инструмента на сайте нужно установить счетчик Яндекс.Метрика. Инструмент анализа времени загрузки страниц, находится на вкладке: Яндекс.Метрика>>>Отчеты>>>Стандартные отчеты>>>Мониторинг>>>Время загрузки страниц .
Данный инструмент показывает разложенное на время до отрисовки сайта и время до загрузки DOM. Анализ проводится по собранным данным слежения за выбранный период. Много полезных фильтров для анализа, есть графики и диаграммы.
Проверка скорости загрузки сайта Яндекс.Метрика
Google Analytics
Для использования этого инструмента на сайте необходимо установить код слежение Google Analytics. Сам инструмент находится на вкладке: Google Analytics>>>Поведение>>>Скорость загрузки сайта.
Инструмент дает расширенный анализ скорости загрузки сайта по различным параметрам, включая анализ скорости по браузерам, странам, страницам сайта. Очень разнообразные аналитические данные.
проверка скорости загрузки сайта Google Analytics Качественная проверка скорости загрузки сайта
Инструменты качественной оценки скорости загрузки сайта, не дают абсолютных величин времени загрузки в секундах. В этих инструментах есть некая условная шкала, где сайт, удовлетворяющий всем параметрам быстрой загрузки, имеет 100% соответствия. Зона удовлетворительного соответствия лежит в пределах 70-90%. Ниже 70% красная зона плохой оптимизации сайта по скорости загрузки.
Ведущий инструмент качественной оценки оптимизации сайта для быстрой загрузки, это инструмент Google PegeSpeed Insights (//developers.google.com/speed/pagespeed/insights/ ).
Google PegeSpeed Insights Отличается этот сервис простой визуализацией результатов и почти понятными советами. По сути, все советы можно свести к четырем правилам:
- Файлы CSS должны быть в ;
- Все скрипты должны быть в конце ;
- Фото сайта должны быть максимально сжаты;
- Коды HTML и CSS сайта должны быть валидными.
Обратите внимание. После всех рекомендаций Google, появилась строка «Скачать оптимизированные изображения, файлы JS и CSS для этой страницы». Это значит, что сервис сам сжал (оптимизировал) все файлы, указанные в рекомендациях. Далее, просто скачиваете архив сжатых файлов по ссылке и заливаете их на сайт по нужным адресам. Адреса смотрим в рекомендациях.
Серсис Pr-cy.ru
http://pr-cy.ru/speed_test/
Еще один инструмент качественной оценки скорости сайта от известного сервиса инструментов для вебмастера pr-cy.ru. Анализ проводится по основным параметрам, влияющим на скорость сайта. По каждому пункту проверок, сервис дает расширенные советы по оптимизации скорости.
Проверка скорости загрузки сайта Pr-cy.ru Сервис Seogadget.ru
http://www.seogadget.ru/sitespeed
Анализ скорости загрузки главной страницы из дата центра в Москве. Этот инструмент, не дает расширенного анализа времени загрузки, только качественные, но точные значения четырех основных параметров: ответ сервера (сек), размер ответа (кБ), соединение с сервером (сек), скорость отдачи.
проверка скорости загрузки сайта seogadget Инструменты для тонкой оценки
Тонкая оценка времени загрузки сайта, это серьезные инструменты, дающие полную раскладку времени открытия сайта по всем его файлам. Результат оценки выводится большими таблицами, по которым можно детально оценить параметры загрузки лбого файла сайта, определить какие файлы тормозят сайт, на что обратить внимание для улучшения скорости и т.д. Как правило, каждая строка отчета имеет рекомендации по исправлению.
Итоговые результаты оценки этих сервисов, показывают абсолютные значения в секундах и оценку сайта по качественной шкале.
Используя эти сервисы важно понимать, что каждый из них, тестирует сайт от своих дата центров, чаще расположенных в Америке или Европе. Это нужно учитывать.
Pindom.com
https://tools.pingdom.com/
Отличный инструмент (язык английский) для анализа скорости загрузки сайта. Тестирование идет от пяти дата центров: 3 в США, 1 в Австралии, 1 в Швеции (Стокгольм).
Результаты тестов показывают раскрытой таблицей с пояснениями для каждого файла. Анализируется, каждый файл сайта, скрипты сайта, с советами по оптимизации.
Кроме точной оценки, сервис показывает качественные результаты проверки сайта в сравнении с другими сайтами, проходящими проверку на этом сервисе.
Webpagetest.org
http://www.webpagetest.org/
Этот англоязычный сервис не так популярен, как pindom, но имеет больший функционал. Результаты анализа представлены в четырех таблицах, каждая из которых очень подробна для анализа. Кроме этого, сервер для упрощения, дает качественные показатели оценки (на фото вверху справа квадраты с буквами).
Отличается данный сервис, количеством точек проверки. Их 50 точек по всему миру, России нет.
Выполнить бесплатный тест скорости сайта можно из 50 мест по всему миру с помощью реальных браузеров (IE и Chrome) и на скорости реального присоединения потребителя. Вы можете запускать простые тесты или выполнять предварительное испытание, включая многоэтапных операций, захват видео, блокирование контента и многое другое. Ваши результаты дадут богатую диагностическую информацию, включая загрузку ресурсов в виде диаграмм Page Speed с проверками оптимизации и предложений по улучшению.
Webpagetest.org 
https://gtmetrix.com/
Этот сервис (английский язык) позволяет оценить скорость загрузки из дата-центров: Vancouver, Canada, используя для анализа браузер Firefox.
Результаты показываются в виде диаграммных таблиц с расшифровкой данных и советами по оптимизации.
сервис Gtmetrix.com отчет теста Примечание: Для WordPress есть плагин «GTmetrix for WordPress» (https://ru.wordpress.org/plugins/gtmetrix-for-wordpress/ ), который позволяет анализировать скорость сайта из административной панели.
Webo.in (Россия)
https://webo.in/
Данный инструмент оценки скорости не является основным на сайте. Это скорее приложение сайта, дающее возможность пользователю оценить время загрузки сайта для дальнейшей платной оптимизации с использованием облачных технологий.
Однако, это единственный сервис, данного обзора, который анализирует скорость загрузки сайта по основным регионам России (Москва, Урал, Дальний Восток), а также, Европе и Украины.
Результаты анализа отдает качественной оценкой (как на фото) и расширенной таблицей с результатами по всем файлам сайта.
Webo.in (Россия) Проверка скорости ответов серверов (доступность сайта)
Одну из важных составляющих времени загрузки, составляет время ответа сервера. Google считает отличным, ответ сервера менее 200мс. Есть специальные сервисы для оценки ответа сервера.
- https://webopulsar.ru/test/
Отличный сервис, показывающий ответ сервера, разложенный на составляющие. Оценка идет из России, Москвы, С-Петербурга, Европы.
- http://sitespeed.me/ru/
- https://www.host-tracker.com
Эти два сервиса, позволяют проверить доступность сайта и определить на сколько быстро он загружается с разных точек мира.
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу поговорить с вами на такую важную тему, как скорость загрузки сайта. Наверное, вы уже все слышали, что наряду со множеством других факторов, влияющих на продвижение Web проекта, поисковые системы с недавних пор стали учитывать еще и это. Да и посетителей тормоза на сайте сильно раздражают, особенно тех, кто привык .
Но тем не менее для многих вебмастеров скорость загрузки не является той темой, над которой стоит начинать ломать голову немедленно, обычно это откладывают на потом в долгий ящик, а на первый план выходят насущные проблемы, связанные с наполнением ресурса уникальными материалами, улучшением его внутренней оптимизацией, но всю совокупность факторов, влияющих . Как говорится, крепость цепи определяется ее самым слабым звеном...
Онлайн сервисы для измерения скорости загрузки сайта
Во всяком случае именно так я относился до недавних пор к тому, чтобы попытаться ускорить свой ресурс. Но мне пришло в голову, что лучше не дожидаться неприятных тенденций в (а именно уменьшения трафика с , ибо она более критично относится к скорости загрузки), а исправить очевидный недочет прямо сейчас.
Надо просто осознать, что скорость , с которой загружается ваш сайт, блог или форум, является очень важным показателем . Если у вашего проекта с этим показателем не все в порядке, то это может повлечь за собой довольно неприятные последствия. И самое важное из них то, что посетители могут отказаться от работы с вашим ресурсом, т.к. он очень долго подгружает страницы. Кроме этого поисковики, в особенности Гугл, учитывают ее при общей оценке полезности того или иного ресурса.
Для того, чтобы понять, а как быстро подгружаются страницы вашего ресурса, можно воспользоваться, например, возможностями такого , подробно описанный в статье по приведенной ссылке. А можно воспользоваться услугами сервисов, которые предназначены для этого. Далее я приведу в качестве примера несколько таких.
- Pingdom
— здесь достаточно просто указать адрес страницы, скорость загрузки которой вы хотите измерить (это не обязательно должна быть главная страница, ибо скорость загрузки внутренних страниц не менее, а зачастую даже более важна).
В результате будет представлена диаграмма времени закачки отдельных объектов вебстраницы, а также их Урл и вес. Чем меньше объектов будет загружаться и чем легче будет весить каждый из них , тем лучше. Например, я для этой цели:
- объединил некоторые картинки из темы оформления сайта в
- а также по возможности уменьшил путем
- кроме этого имеется смысл
Собственно, некоторые проблемы и историю измерения скорости вашего сайта вы сможете отследить на соседних вкладках верхнего меню 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 . Собственно, каким данным доверять и чьим рекомендациям следовать — решать вам.
Про то, я уже довольно подробно писал и поэтому повторяться не буду, чтобы не загромождать и без того уже громоздкую статью (дочитаете до конца — можете считать себя героем).
- Ping Admin
— аналогичный онлайн ресурс для измерения время ответа сервера с разных уголков нашей огромной планеты.
- Host Tracker — практически то же самое, только страны другие.
- ByteCheck — позволяет измерить значение TTFB (Time To First Byte) для вашего сайта, на который часто обращают внимание при оптимизации. Это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером, что есть плохо. Читайте советы по оптимизации загрузки сайтов .
- Load Impact — это не совсем про скорость, но тоже важный сервис. Он позволяет протестировать нагрузочную способность вашего сайта и то, падает ли при этом скорость загрузки страниц. Весьма полезная штука.
- Web Page Speed — онлайн-сервис с дизайном начала девяностых, но вполне себе такой информативный, если приспособитесь к отсутствию юзабилити. Внизу даются общие рекомендации по исправлению ситуации.
Так ли важно отслеживать скорость загрузки страниц?
Но вернемся от измерения скорости к поиску возможностей ее увеличения. , раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.
В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог сайт загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.
Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).
Сразу оговорюсь, что этот инструмент оперирует достаточно сложными и не совсем понятными вещами рядовым вебмастерам, которые в основном связаны с тонкостями и нюансами работы Web сервера. Если вы никогда сервер не администрировали, но будет сложно.
Есть выход — напрячь вашего хостера на тему выполнения действий, которые предписывает Пейдж Спид. Согласится или нет — это уже другой вопрос. я так и не решился, ибо стремно предоставлять доступ к серваку абы кому (вот такой вот я недоверчивый).
На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):
Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать...
Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.
Дело в том, что даже понимая на что ругается этот плагин, я толком не знал что нужно сделать , чтобы все это устранить и хоть как-то ускорить свой блог. В общем, у меня нашлось сразу очень много более важных дел, по сравнению с которыми мышиная возня с настройками Web сервера (тем более, что я в них и не разбираюсь особо) показалась мелкой и несущественной.
Правда, в свое время я тоже отложил в долгий ящик решение проблемы безопасности и в результате поплатился за это потерей всех этих самых денег. Памятуя о случившемся, на днях решил упереться рогом и попробовать сдвинуть с места проблему увеличения скорости загрузки сайта, несмотря на всю непонятность и сложность для меня данного вопроса.
Короче, установил я повторно Пейдж Спид в Мазилу (сейчас этого делать уже не надо), посмотрел на что именно он особо сильно ругается и кое-что мне все же удалось улучшить и, надеюсь, хотя бы немного увеличить скорость.
P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.
Итак, раньше нужно было установить в свой браузер плагин, но сейчас достаточно перейти сюда , ввести Урл адрес страницы, которую вы хотите проанализировать (на разных типах страниц могут возникать разные проблемы со скоростью загрузки, посему в этом инструменте имеет смысл проверять все варианты) и нажать на синюю кнопку «Анализировать».
Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.
Причем, в самом верху окна Page Speed будут расположены замечания и рекомендации, которые вам желательно будет посмотреть и изменить в первую очередь («исправьте обязательно»), ибо это даст наибольший эффект в плане увеличения скорости загрузки и потребует от вас не слишком больших усилий. Приведу пример анализа одного из моих второстепенных проектов, до которых руки особо не доходят:
Т.е. рекомендации и обнаруженные проблемы, помеченные красным прямоугольником с восклицательным знаком и расположенные в самом верху списка, являются наиболее важным и начать оптимизацию желательно именно с них (дешево и сердито, что называется), тем самым добьетесь наибольшего эффекта.
Замечания, помеченные оранжевым цветом, потребуют от вас больших усилий по исправлению, но при этом могут и не привести к очень значительному росту скорости. Увы и ах, пока их можно отложить в долгий ящик и заняться первостепенными задачами, которые помогут существенно ускорить проект.
У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/ , ибо он испльзует АПИ PageSpeed) для https://сайт была такой:
Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера» ), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.
Если нажать на спойлер рядом с этой надписью, то появится список различных файлов, которые не удовлетворяют оптимальным требованиям кэширования статических объектов (скрипты, CSS файлы, файлы изображений используемых на web странице) в браузерах пользователей (т.е. у читателей):
Т.е. PageSpeed Insights советует нам для увеличения скорости загрузки настроить оптимальным образом кэширование различных элементов web страниц в браузерах пользователей для того, чтобы при просмотре других эти статические элементы не подгружались бы заново с сервера. В теории все это звучит довольно запутано, ибо я понятия не имею о механизмах кэширования используемого браузерами (читайте про то, и как его очистить).
К тому же, оптимизацию кэширования статических объектов мы будем проводить за счет механизмов самого сервера вашего хостинга. Довольно запутанно, но я вам предложу уже готовые решения, найденные на просторах рунета, а вы их попробуете в действии и решите, какое именно наилучшим образом будет работать именно на вашем хостинге.
Оптимизация кэширования в браузере и проверка его работы
Правда на моем текущем хостинге это не сработало, ибо у меня сейчас стоит связка Апача с nginx (настраивать надо последний, что за меня сделал хостер не ведомым мне способом). Но если у вас чистый Апач, то предложенный ниже метод может сработать.
В общем, мы попытаемся повлиять на сервер где хостится ваш проект таким образом, чтобы он отдавал браузерам команды направленные на оптимизацию кэширования статических элементов. Делать это будем посредством довольно известного инструмента удаленного управления сервером — файла.htaccess . Знаете о существовании такого?
Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла.htaccess.
С этого момента вы все делаете на свой страх и риск. Посему обязательно скачайте на комп копию этого файла, чтобы в случае чего оперативно откатиться назад.
Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.
После этого переименуйте этот файл в.htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.
Наиболее популярные способы включения данной опции на веб-сервере под управлением Апач — с помщью модулей mod_headers или mod_expires. Расположенный ниже код поможет помочь вам включить кеширование статики в браузере, если онлайн-сервис хотя бы один из этих модулей Апача у вас на серваке установлен.
Сначала приведу код для модуля mod_headers . Обращаю ваше внимание, что в нем используется проверка наличия у вашего хостера данного модуля. Если его найдено не будет, то код выполняться не будет и никаких ошибок это не вызовет. Однако, я еще раз настоятельно рекомендую предварительно скопировать оригинальный (до внесения расположенного ниже кода) файл.htaccess к себе на комп во избежании эксцессов.
Комментарии (их строки начинаются со знака решетки) потом можете удалить, но они по-любому на работу кода влияния оказывать не будут.
Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires , где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:
Комментарии опять же потом можно будет удалить.
Если вдруг не сработало, но вы надеетесь на чудо, то вот еще несколько вариантов того же самого кода, но пробуйте их по очереди, а не все сразу:
ExpiresActive On ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" Header set Cache-control: private Header set Cache-control: public BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.{2}" force-no-vary - FileETag MTime Size
ExpiresActive on ExpiresDefault "access plus 1 month"
Теперь после того, как вы вставили в.htaccess код, позволяющий повысить скорость за счет оптимизации кэширования в браузере на стороне посетителя, и сохранили произведенные изменения, снова проверьте страницу вашего ресурса в PageSpeed Insights и убедитесь что проблема пропала :
Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.
Что и требовалось доказать. Вот так вот играючи мы с вами разобрались с одной из самых существенных и весомых проблем найденных в Page Speed.
Как включить сжатие статических объектов на сервере
Также очень частой проблемой, на которую ругается сервис GTmetrix, бывает отсутствие сжатия файлов на сервере перед их передачей в браузеры пользователей.
Используется при этом , о который я уже писал. Если вы анализируете не напрямую через PageSpeed Insights, а посредством GTmetrix, то в области PageSpeed «Включить сжатие» называется «Enable gzip compression», а в YSlow - «Compress components with gzip».
Для того, чтобы это самое Gzip сжатие включить на хостингах, где используется сервер Апач, достаточно будет добавить в файл.htaccess (он является дистанционным файлом управления сервером) соответствующий фрагмент кода. У Апача есть два модуля для сжатия и какой-нибудь из них будет установлен у вашего хостера (хотя не факт).
Наиболее распространен — с него и начнем. Мы опять же добавляем в код проверку наличия этого модуля, чтобы не получить 500 ошибку для всего сайта.
Чуть менее популярным и для него код включения Gzip сжатия для нужных типов файлов будет выглядеть так:
Собственно, пробуйте и проверяйте страницу в PageSpeed Insights после установки кода. Если проблема ушла, то считайте, что вам повезло. Мне же в силу наличия Апач с nginx все это не помогло (хостер сказал, что за статику отвечает nginx, при таком раскладе и настраивать надо именно его — как он это сделал мне не ведомо).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN
Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер
С каждым годом средние показатели скорости загрузки страниц сайтов растут. Вместе с этим растет и вес самих страниц, которые пополняются всевозможными расширениями и плагинами, замедляющими и утяжеляющими работу сайта. Зачастую их наличие, в совокупности с плохой оптимизацией кода и изображений, значительно превышает этот средний показатель, не говоря уже о том, что есть еще и нижний потолок, который так же не следует упускать из виду.
Влияние скорости загрузки на продвижение сайта
А ведь скорость загрузки сайта – один из тех факторов, которые напрямую влияют на ранжирование сайтов в поисковых системах. Особенно этот показатель ценит Google.
Не стоит забывать и о бедных посетителях, чье интернет-соединение оставляет желать лучшего. А ведь именно они образуют те самые поведенческие факторы , которые на данный момент являются основой для определения качества сайта поисковиками.
Как думаете, если пользователь будет ждать загрузки страницы по 5-10, а то и более секунд, останется ли он на таком сайте? Нет! Он уйдет, а это - показатель «отказов», которые дадут сигнал поисковым системам, что с вашим сайтом что-то не так и его следует понизить в результатах поиска .
Именно поэтому, тем, кто до сих пор не оптимизировал страницы своего сайта, следует выполнить анализ скорости загрузки и сделать соответствующие шаги, направленные на повышение производительности сайта .
Благо, инструментов и онлайн сервисов, позволяющих сделать тест на время загрузки сейчас более чем достаточно. Напишу о том, который, по моему мнению, лучше всего способен сделать качественный анализ скорости сайта .
Google сервис анализа скорости загрузки сайта
PageSpeed Insights – Google инструмент проверки скорости загрузки страниц. Позволяет сделать тест, как для стационарного компьютера, так и для мобильного устройства .
Кроме основной его функции, он выполняет еще ряд других:
- Проверка скорости загрузки для компьютеров и для мобильных устройств;
- Определение удобства пользования;
- Предоставление конкретных рекомендаций по ускорению загрузки и повышению удобства пользования.
Перейти к инструменту проверки скорости загрузки: http://developers.google.com/speed/pagespeed/insights/
После того, как выполните анализ, вам будет доступна оценка Google по 100 бальной шкале.
Анализатор подчеркнул, какие исправления нужно сделать обязательно, а какие «по возможности».
Как правило, самые большие проблемы возникают с оптимизацией изображений и большим количеством JS скриптов, которые располагаются в Header (особенно актуально для WordPress). Чуть ниже расскажу, как бороться с этим.
Как уменьшить время загрузки страниц в WordPress
Кэширование
Плагин Wp Super cache , который можно обозначить пометкой Must Have. Он просто обязательно должен быть установлен на WordPress сайт. Его задача кэширование страниц. При первом заходе пользователя, браузер загружает все JS и CSS файлы. При переходе на следующую страницу, эти файлы уже будут в кэше, а значит это позволит избежать их повторной загрузки. У меня установлен плагин Hyper Cache, он является аналогом Wp Super cache и выполняет все те же функции.
Отключение Post Revision
Вы замечали, что при написании или редактировании записи идут авто сохранения черновиков? Это влияет на скорость работы Базы данных, увеличивая ее размер. Чтобы отключить Post Revision, зайдите в файл wp-config.php и добавьте следующую строчку:
define("WP_POST_REVISIONS", false);
Это предотвратит появление новых копий, однако не удалит старые. Для того чтобы стереть из БД старые копии, следует войти в PHPMyAdmin и сделать SQL запрос:
DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = "revision"
Так же для очистки базы данных можно использовать WordPress плагин WP-Optimize.
Комплексная оптимизация WP
Autoptimize – отличный плагин, который позволяет произвести ряд улучшений, таких как: сжатие CSS и JS файлов, объединение их в один файл, перемещение JavaScript файлов в Footer.
JavaScript в конце страницы
Если вы не используете плагин из предыдущего пункта, то вам следует, по возможности, поместить JavaScript в конце страницы. Это позволит загружать JS после загрузки основного контента. Об этом нам так же говорит PageSpeed Insights.
Сжатие JS
Опять же, если Autoptimize не установлен, то нужно использовать другой инструмент по сжатию JS кода. Например - http://javascriptcompressor.com .
Объединение файлов в один
Следует объединить файлы CSS в один. То же следует проделать и с JS. Это позволит сократить количество обращений к серверу.
Оптимизация изображений
Оптимизация изображений - одно из тех действий, которое может значительно уменьшить время загрузки веб-ресурса .
Как с этим бороться? Есть множество онлайн сервисов, которые позволяют сжать изображение без потери качества.
Но мне по душе старый добрый Photoshop. В разделе «Файл » - «Save for web » можно сохранить изображение, ориентированное именно на использование его на сайтах. С помощью данного метода размер файла будет уменьшен в несколько раз, при том, что изменение качества самого фото практически не будет заметно. При этом следует правильно выбрать оптимальное расширение.
Хотлинки
Для особо крупных и популярных ресурсов актуальна проблема копипаста контента. Некоторые сайты, копируя материал, используют хотлинки. То есть при загрузке страницы стороннего сайта с хотлинком на ваше изображение будет идти нагрузка именно на ваш сервер.
Для того чтобы предотвратить использование подобного метода, необходимо прописать следующий код в htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$
RewriteRule .*\.(gif|jpg|png|ico)$ -
Можно и самому использовать сторонний хостинг для того, чтобы отдельно хранить свои изображения. Хорошо для этих целей подойдет Яндекс Диск.
Согласно спецификации HTTP/1.1, браузеры могут производить одновременную загрузку не более 2-х компонентов сайта с одного хоста одновременно. Для того чтобы решить эту проблему, достаточно использовать несколько хостов. Например, изображения хранятся на одном хосте, файлы JS на другом. Можно использовать библиотеку Google, а так же переносить файлы на поддомен и делать выгрузку оттуда.
Отказ от плагинов
Каждый плагин создает определенную нагрузку на сервер. Именно поэтому рекомендуется по возможности выполнять те или иные функции без их использования, оставляя лишь самые необходимые.
P.S. Ну и напоследок, обратите пристальное внимание на удобство пользования сайтом на мобильных устройствах. Пусть общий процент посещений с устройств, чье разрешение менее 1280x800 не столь велик, все же пренебрегать ими не стоит. Крайне рекомендуется использовать адаптивный дизайн, или сделать дополнительно мобильную версию сайта.
Почему следует это сделать:
Представьте, если человек зашел с мобильно устройства на сайт, а они не оптимизирован для просмотра на моб. Он сразу его покинет, а это – отказ. Зачем вам рост отказов? Ведь это даст повод поисковикам понизить ваш сайт в результатах поиска.
Но, даже если не брать это во внимание, не стоит забывать, что каждый зашедший пользователь – потенциальный клиент . И отсекать процент пользователей, только потому, что вам лень сделать мобильную версию сайта - крайне не разумно.
А мы рассмотрим довольно важную тему как проверить скорость загрузки сайта в мире. Мы рассмотрим методы и сервисы которые продемонстрируют слабые места вашего проекта в плане скорости. Для начинающих вебмастеров, это окажется особенно полезно, на пути к профессионалу и гуру сайтостроения.
Данную тему можно отнести к ранее рассказанным темам о полезных утилитах сетевого инженера. И так как мы все знаем скорость сайта очень важна и на прямую влияет на его ранжировании в поиске, да и вам же всегда тоже приятно, когда ваши любимые ресурсы загружаются за долю секунды, на любых устройствах, особенно на мобильных, где скорость загрузки сайта особенно ощущается. Пробежимся сегодня по известным мне онлайн сервисам, и рассмотрим плюсы и отличия каждого из них.
Список онлайн сервисов проверки скорости сайта
1. pingdom.com
Pingdom tools это мой самый любимый сервис. Данный ресурс, позволяет, не только проверить как открывается ваш проект по все миру, так еще и покажет что именно открывается долго, на уровне файлов.
и так в поле теста, вводи адрес вашего ресурса и жмем Test now
Сервис сам выберет точку тестирования вашего сайта, в моем случае первый тест был из Далласа США. По результатам теста вы увидите общее число запросов до него, чем меньше тем лучше конечно, далее время загрузки и размер загружаемого контента. Ниже вы можете пофайлово посмотреть скорость загрузки сайта, очень удобно увидеть кто тормозит. Бывают случаи когда во время можно понять, что проблема может быть на сторонних сервисах с которых у вас подгружается информация, например рекламная сеть или соц сеть.
2.
Второй сервис диагностики скорости сайта, это гугловский PageSpeed Insights. Его преимущество, что он показывает скорость и рекомендации по оптимизации, как для мобильной версии так и для десктопной. Вводим в строку анализа название вашего site и жмем анализировать
В результате вы получите подробную выдержку в балах, чем выше тем лучше и полную инструкцию, что делать. В моем примере гугл еще советует сжать некие картинки, но мало того советует, так еще их сам сжимает и предлагает их вам скачать и заметьте без потери качества.
3. webpagetest.org
Третий инструментарий, тоже вас весьма порадует своими возможностями. Нажимаем анализировать и получаем вот, что. Сводная таблица, по загрузке проекта не самая информативная, но ниже есть и плюшки.
Следующим идет пункт Waterfall View, подпробный срез загрузки всех ваших файлов.
И на последок подробная таблица проверки скорости загрузки сайта. Согласитесь очень круто.
4. gtmetrix.com
Достаточно не плохой online ресурс, так же вбиваете сайт и смотрите результат, движок там Mozilla, кто знает, есть такой же плагин с теми же тестами. Загрузка страницы, в канаде аж 5 секунд, до московского цода, так же размер страницы, количество запросов, и система оценки в виде Букв, в моем случае это A, значит все ок. Ниже можете посмотреть рекомендации, для увеличения скорости загрузки сайта в мире.
так же есть вкладка Waterfall со всеми загружаемыми файлами
и фишка данного ресурса оценка скорости загрузки сайта за год, в виде графика.
оценка скорости загрузки сайта на данном ресурсе предоставляется, так же качественная.
5. loadimpact.com
Замыкает пятерку сервис loadimpact, после того как он отработает у вас будут данные в виде, где лежит ваш сайт и от куда по карте на него обращаются, в этот момент производится оценка скорости загрузки сайта
Как открыть документ Word онлайн Программа для редактирования doc файлов
Назначение и удаление форматов в Excel
Что такое SMM-маркетинг и как это работает?