Слушайте выпуск подкаста про обновленный Google PageSpeed Insights! 🎧
После недавнего обновления компанией Google своего сервиса по оптимизации загрузки веб-страниц произошел настоящий переполох. Результаты измерений скорости большинства популярных ресурсов оказались в три раза ниже, чем были накануне запуска новых настроек в PageSpeed Insights . И если скорость загрузки сайта с лета 2018 года включена в число самых значимых факторов ранжирования поисковой системы Google, то как тут не впасть в панику? И что же это за сервис такой, который за одну ночь лишил покоя специалистов в области SEO-оптимизации по всему миру?
Этот бесплатный сервис не просто позволяет оценить, насколько быстро загружаются веб-страницы, но и помогает активно улучшать этот показатель. Инструмент создан для диагностики и оптимизации скорости ресурса и давно занял место в копилке каждого уважающего себя сеошника. Он как куратор «по беглости» для сайтов: наблюдает за их работой, анализирует, выявляет слабые места и подсказывает, какие ошибки нужно исправить. При этом сервис PageSpeed Insights не просто советует вам, над чем нужно поработать, но и показывает, сколько времени определенное действие по оптимизации скорости сэкономит при дальнейших загрузках.
Это очень удобный и простой в использовании сервис, в котором без труда разберется даже новичок. Притом он многофункционален и по этому параметру опережает большинство своих конкурентов. ПэйджСпид - один из немногих адаптивных сервисов, приспособленных для работы на мобильных устройствах. Большую роль играет и то, что этот инструмент для проверки скорости загрузки сайта тесно связан с одной из крупнейших поисковых систем в мире и заточен под нее. Чтобы начать работу, нужно лишь ввести URL-адрес сайта. Результаты предлагаются в двух вариантах: для загрузки страниц на компьютере и на мобильном устройстве. Оценка происходит по стобалльной шкале. Те, кто говорит, что 100 баллов - недостижимая планка, обманывают. Не верьте.
Мы не призываем выбирать те или иные инструменты, оптимизация - дело добровольное. Но если хотите, чтобы сайт хорошо ранжировался в Гугл, то PageSpeed Insights - действительно важный инструмент. Однако не забывайте, что балл - это лишь субъективная оценка сервиса, а не непреложный факт. Тем не менее, реальную скорость ресурса он показывает, раскладывая все по полочкам.
Есть и другие сервисы для измерения и оптимизации скорости, но не стоит выбирать себе «идола» и слепо поклоняться ему. Ни один из них, включая PageSpeed, не является эталоном. Эти инструменты созданы не для того, чтобы стремиться получить в них высший балл, как на экзамене, а для того, чтобы найти идеальную точку пересечения функциональности, юзабилити и скорости ресурса. А значит разумнее оптимизировать только то, что можно улучшить без ущерба другим характеристикам сайта, и не пытаться «подогнать под 100» все рекомендованные пункты. Не забывайте, что конечная цель - обеспечить максимально положительный опыт пользователю.
В июле Гугл запустил новый алгоритм - Speed Update, благодаря чему скорость загрузки стала фактором ранжирования поисковика. Ноябрьские обновления PSI (PageSpeed Insights) кардинально изменили сервис. Теперь он работает на базе аналитики Lighthouse , встроенного в браузер Google Chrome. Это инструмент с открытым исходным кодом, созданный для улучшения и контроля качества веб-страниц. Если раньше PSI оценивал ресурс по соблюдению определенных условий и выполнению задач, то теперь для получения высокого балла принимается во внимание только скорость. Важно, за какое время на странице появляется первый контент и его основная часть, сколько секунд нужно для полноценного взаимодействия пользователя с ресурсом, общий индекс скорости и другие характеристики.
В PageSpeed Insights добавлена функция раскадровки, состоящая из десяти слайдов, на которых вы можете увидеть очередность появления контента страницы. Кроме того, теперь сервис дает советы по использованию на ресурсе новых форматов картинок, - JPEG 2000, WebP и JPEG XR - которые весят меньше своих предшественников. Это важный параметр, особенно сильно он отражается на скорости загрузки сайтов, где значительную часть контента занимают различные изображения.
Ближайшие недели разработчики будут тестировать обновленный сервис на баги, которые уже успели обнаружиться, и устранять их. Сейчас при проверке скорости загрузки одного и того же сайта сервис может показать разные результаты, а то и вовсе объявить, что страница недоступна. В первом случае нужно делать 5-6 замеров подряд и ориентироваться на средний показатель, потому что сайты не статичны и их скорость тоже. Второй вариант - критичный, если такое происходит, нужно срочно ставить сайт на мониторинг доступности. В то же время не забывайте, что для наладки бесперебойного функционирования PSI нужен определенный срок, и чтобы сайт потерял высокую позицию в поисковой выдаче - тоже. За один день такие вещи не случаются. Поэтому паниковать не нужно, как и предпринимать необдуманные шаги - возможно, через пару недель придется их исправлять.
А вот что сделать следует:
сфокусируйтесь на мобильной версии - к ней Гугл предъявляет более серьезные требования и ставит ее в приоритет.
Отключите ненужные библиотеки и плагины, они сильно замедляют скорость загрузки сайта, но при этом даже не задействованы в отображении его контента. Тут есть тонкий момент: это работа только для опытных специалистов, иначе можно вовсе «сломать» сайт.
Сосредоточьтесь на достижении моментальной загрузки первого экрана: по новым условиям поисковой системы он должен быть готов к работе и взаимодействию с пользователем максимально быстро.
Переместите в футер (нижняя часть страницы) js, которые не участвуют в отображении страницы или, по крайней мере, первого экрана. Некоторые советуют и css перенести туда же, но делать так нельзя ни в коем случае. Это еще больше будет замедлять подготовку страницы к взаимодействию.
И не старайтесь достичь идеального показателя. Не зная нужных тонкостей, можно вместо улучшения качества ресурса нанести ему значительный урон. Идеальный вариант - попросить помощи у того, кто в этом отлично разбирается. После диагностики будет видно, все ли в порядке или что-то действительно нужно менять.
Далеко не все рекомендации сервиса способен выполнить среднестатистический владелец сайта и даже специалист по SEO-оптимизации. Иногда такие действия в неумелых руках приносят прямо противоположный результат, и в итоге ресурс начинает терять свои позиции в выдаче. Например, рекомендуемый сервисом PSI перенос JavaScript и css из хедера (верхней части страницы) в футер должен делать опытный программист, который знает, как правильно разместить эти элементы. Иначе блоки ресурса может «перекосить», а скорость упадет вместо того, чтобы улучшиться.
Поэтому, как уже говорилось выше, стремиться к результату 100/100 в PageSpeed Insights не всегда разумно, а если вы твердо решили достичь совершенства, делайте это с осторожностью. Помните, что пользователь важнее оценки PSI и он не должен видеть на вашем сайте куски верстки или съехавший дизайн страницы.
Несмотря на все подводные камни в работе с этим инструментом, он все же пользуется огромной популярностью и не просто так. Многие подсказки, касающиеся уменьшения размера скриптов, изображений и других элементов действительно полезны для повышения скорости загрузки сайта. Использование кэша браузера, рекомендуемое сервисом в некоторых случаях, тоже очень важная штука для ускорения ресурса, но совсем непростая даже для веб-мастеров. Поэтому, чтобы не напортачить, лучше поручить эту работу профессиональной команде по оптимизации сайтов. Например, вы можете позвонить нам. :-)
Возможно, существует огромное количество инструментов для проверки скорости загрузки сайта, но среди них всего несколько действительно стоящих внимания:
Можно выполнить ту же задачу с помощью полезных инструментов для Chrome - Google Chrome DevTools . А можно и вовсе обойтись без расширений: нажмите Ctrl+Shift+i при открытой вкладке с вашим сайтом в Chrome и в консоли браузера выберите пункт Audits. Затем нажмите Run audits и подождите, пока Lighthouse проанализирует сайт и покажет результаты.
PSI выделяет шесть пунктов, определяющих итоговую оценку сервиса и представляющих реальную ценность при анализе скорости загрузки сайта.
Это промежуток с момента открытия страницы и начала ее загрузки до появления на ней первого текста или картинки.
Это показатель скорости загрузки содержимого сайта до того момента, когда страница перестает изменяться визуально. То есть пользователь может видеть контент так, как он должен выглядеть.
Этот параметр показывает, сколько секунд нужно подождать пользователю для того, чтобы начать кликать по странице и отдельному ее контенту.
Это временной интервал, через который на веб-странице появляется основная часть ее материала. То есть сайт выглядит уже почти полностью готовым к полноценному просмотру.
Этот показатель Google PageSpeed Insights означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время. Это может быть, например, ввод текста в поиске или клик на интерактивный элемент. Длительность ответа страницы не должна превышать 50 миллисекунд.
Это время отклика страницы на действия пользователя в самые активные 5 секунд ее загрузки. Если в этот момент сайт реагирует дольше 50 мс, то создается эффект «подвисания» и посетителю кажется, что ваш ресурс «тормозит».
Старая версия PSI зачастую высоко оценивала очень медленные ресурсы, а вот шустрые, наоборот, незаслуженно принижала. Обновленный сервис выводит на пьедестал действительно важные вещи - время отклика сервера и количество «тяжелого» контента на странице. Все громоздкие «украшения и побрякушки» будут только портить оценку и постепенно потеряют свою популярность.
Не за горами эра по-настоящему реактивных сайтов и хороших специалистов, умеющих их делать.
Заходите на и ускоряйте ваши сайты!
Слушайте наш подкаст про обновленный Google PageSpeed! 🎧
Добрый день, дорогие читатели. Когда я занимался , в своей работе пользовался ресурсом Google pagespeed insights для определения проблемных мест в коде страницы. В тот период моей целью было достичь 100 баллов из 100 возможных. Но на самом деле нужно гнаться за максимальным баллом и что реально измеряет сервис? В этом мы сегодня постараемся разобраться.
Самым первым средством тестирования скорости был сервис YSlow. Он учитывал множество метрик, которые сказывались на скорости загрузки. По каждой из них выставлялся балл. Количество этих показателей было большое, и в итоги выставлялась оценка по пятибалльной системе (американской) A – отлично, F – неудовлетворительно. Он и был прародителем Google PageSpeed Insights.
Позже появилась система от Гугл, которая упрощала пользователю понимания оценки показателей. Количество метрик сократилось и за каждую начислялось определенное количество баллов. Была выбрана 100 балльная система. Если набираете 100 баллов по ПейджСпид, то многие считают, что их сайт грузится очень быстро. Но это не так. Сейчас узнаем почему.
Этот сервис учитывает:
Как видите, только один показатель отвечает за реальную скорость загрузки – это скорость отклика сервера. Все остальное – это относительные величины, которые влияют лишь на удобство пользователей.
Например. Если следовать рекомендации «Удалить блокирующие ресурсы» и вставить CSS-файл в шапку страницы, то ее размер может значительно увеличиться, а это тоже не хорошо. Перенести CSS и скрипты вниз кода страницы, то это значит, что какое-то время пользователь будет видеть при загрузке содержимого страничку без стилей, то есть, сложится впечатление сломанной верстки. Это ухудшение поведенческих факторов, посетитель может просто закрыть ее и покинуть сайт. Перенос скриптов в футер – потеря их функционала, некоторые могут перестать работать корректно.
То же самое касается и скорости отклика сервера. ПейджСпид измеряет скорость, используя серверы, расположенные в Европе, а для сайтов, на территории России и стран СНГ – это географическая задержка, время увеличивается. То есть, и эта метрика не идеальна.
Вот еще пример того, что Google PageSpeed Insights не сервис замера скорости загрузки . Ниже приведены скрины сайтов с одинаковой скоростью, но совершенно разными баллами:
А вот еще пример одного сайта, который по показателям PageSpeed очень плохой, а реальное время загрузки выше, даже чем на выше приведенных примерах:
Ну а теперь задайте себе вопрос, а стоит ли гнаться за 100 баллами в этом сервисе? На своем примере хочу сказать, что не стоит. Добившись 97 баллов, я получил не рабочий скрипт для мобильных устройств. Поэтому вы можете потерять часть функционала своего сайта .
Его можно использовать только в качестве рекомендательного инструмента. Который поможет найти проблемные места, указать на недочеты. Для реального измерения скорости загрузки сайта, нужно пользоваться профессиональными инструментами: GTmatrix и PingDom, о которых писал в обзоре . В GTMetrix есть временная шкала, к которой привязана загрузка каждого элемента страницы. Вот именно по ней и можно ориентироваться, какой из элементов страницы тормозит ее загрузку. Кроме этого, здесь указаны коды ответов сервера, размеры загружаемых файлов:
PageSpeed пригодится в первую очередь для нахождения возможных проблем. Укажет, если ваш сервер не использует сжатие для файлов, или не указаны корректно сроки кэширования, а может, вы используете полноразмерные картинки без их предварительного сжатия, и так далее.
Стремится получить максимальные баллы – это пустая трата времени. Кроме этого, такой подход может убить часть функционала страницы, перестанут работать плагины и скрипты, может поломаться верстка сайта (страница будет выглядеть коряво). Поэтому использовать Google PageSpeed нужно без фанатизма . Для определения реальной скорости загрузки следует пользоваться профессиональными инструментами и следовать их рекомендациям.
50% интернет-трафика уже сейчас приходится на долю мобильных устройств, и их пользователи ожидают, что страницы сайта будут загружаться практически мгновенно. Поэтому в этой статье мы рассмотрим, как при проверке скорости загрузки страниц бесплатным инструментом Google PageSpeed Insights Tool получить 100/100 баллов как для мобильной, так и для десктопной версии сайта.
Прежде чем перейти непосредственно к советам, стоит обратить внимание, что Google PageSpeed Tool лишь предоставляет рекомендации, следуя которым можно достичь более высокой производительности сайта. Итоговый результат зависит, в первую очередь, от вашей серверной инфраструктуры, ресурсов и выбранных настроек.
Для применения некоторых советов требуются глубокие технические знания, для других - достаточно общего понимания принципов работы сайта. Все рекомендации подходят для использования в любой CMS системе.
PageSpeed Insights Tool проверит изображения на вашем сайте, и если скорость их загрузки окажется недостаточно высокой, Google предложит их оптимизировать. Вы можете увеличить скорость загрузки изображений, уменьшив их вес и размер. Чтоб решить эту задачу достаточно выполнить два шага:
Вы можете выгрузить все изображения, сжать их и изменить размер. Неплохо взять за правило оптимизировать каждое новое изображение перед добавлением на сайт. То есть все изображения должны быть правильного размера и сжаты без потери качества.
Google предложит сразу загрузить оптимизированные изображения на сайт.
Google может попросить вас сократить JavaScript и CSS код.
Под сокращением в первую очередь подразумевается удаление лишних пробелов, пустых строк, ненужных комментариев и так далее, которые разработчики оставляют при написании кода. Все вместе эти нежелательные элементы могут увеличить размер JavaScript и CSS файла в два раза.
Например, код в документе, приведенном ниже,
может быть сокращен до:
Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs . На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google .
Для многих сайтов пункт об использовании кэша браузера - настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.
CDN - это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта расположен в Техасе, если вы не используете CDN, то пользователь, который находится в Амстердаме, будет вынужден ждать, пока ваш американский сервер загрузит для него контент, а это может занять немало времени. В то же самое время использование CDN позволяет загружать сайт из точки, расположенной к пользователю максимально близко. А в данном случае, максимально близко к Амстердаму.
Как результат, сайт загружается значительно быстрее.
Если вы переместите все изображения, файлы JavaScript и CSS на сеть CDN, то ваши удаленные пользователи сразу заметят ощутимое увеличение скорости загрузки страниц. Но даже использование CDN не гарантирует, что вы пройдете тест Google. Google также обращает внимание на все внешние ресурсы, которые вы используете на своем сайте.
Эту проблему можно решить, заменив счетчики изображениями, которые вы можете спокойно хранить с помощью CDN. Вместо того чтобы размещать сторонние скрипты, которые получают информацию о количестве подписчиков из Twitter, Facebook, Google Plus и других соцсетей, можно хранить эти данные самостоятельно, снизив, таким образом, скорость загрузки страниц.
Если ваш сайт интегрирован с Google Analytics и вы не хотите отказываться от интеграции, то решение проблемы может потребовать дополнительных усилий.
Google редко меняет код Analytics, как правило, не более пары раз за год, поэтому можно создать скрипт, который будет проверять Analytics на наличие изменений раз в сутки. Новый код будет загружаться только, если были обнаружены изменения. В таком случае, вы сможете спокойно хранить JavaScript код Analytics, не скачивая его при этом с серверов Google каждый раз при обращении к ним.
Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.
Та же самая операция будет повторяться каждый раз, когда происходит обновление кода. Новая версия скачивается и сохраняется на CDN. Этот же скрипт можно использовать и для других сторонних ресурсов.
Удаление кода, блокирующего отображение верхней части страницы - один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний. Обратите внимание, что код JavaScript следует всегда размещать в конце файла .
Если ваш сайт на Wordpress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”
Включить сжатие можно прямо в настройках вашего сервера. Если вы не знаете, как это сделать, обратитесь к вашему системному администратору и попросите включить GZIP сжатие на сервере.
То, насколько удобно пользователям мобильных устройств работать с вашим сайтом, зависит от многих факторов, в первую очередь от того, оптимизирован ли дизайн сайта под мобильные устройства, как он отображается у пользователя, насколько хорошо подобран фон, удобно ли продумана навигация по сайту и так далее.
Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.
В статье перечислены только самые основные шаги, которые можно предпринять чтобы оптимизировать скорость работы сайта. Обратите внимание, что не стоит останавливаться на оптимизации только главной страницы, необходимо также уделить внимание внутренним страницам.
Ниже кратко перечислены три основных шага, которые помогут добиться более высокой производительности сайта:
Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу поговорить с вами на такую важную тему, как скорость загрузки сайта. Наверное, вы уже все слышали, что наряду со множеством других факторов, влияющих на продвижение Web проекта, поисковые системы с недавних пор стали учитывать еще и это. Да и посетителей тормоза на сайте сильно раздражают, особенно тех, кто привык .
Но тем не менее для многих вебмастеров скорость загрузки не является той темой, над которой стоит начинать ломать голову немедленно, обычно это откладывают на потом в долгий ящик, а на первый план выходят насущные проблемы, связанные с наполнением ресурса уникальными материалами, улучшением его внутренней оптимизацией, но всю совокупность факторов, влияющих . Как говорится, крепость цепи определяется ее самым слабым звеном...
Во всяком случае именно так я относился до недавних пор к тому, чтобы попытаться ускорить свой ресурс. Но мне пришло в голову, что лучше не дожидаться неприятных тенденций в (а именно уменьшения трафика с , ибо она более критично относится к скорости загрузки), а исправить очевидный недочет прямо сейчас.
Надо просто осознать, что скорость , с которой загружается ваш сайт, блог или форум, является очень важным показателем . Если у вашего проекта с этим показателем не все в порядке, то это может повлечь за собой довольно неприятные последствия. И самое важное из них то, что посетители могут отказаться от работы с вашим ресурсом, т.к. он очень долго подгружает страницы. Кроме этого поисковики, в особенности Гугл, учитывают ее при общей оценке полезности того или иного ресурса.
Для того, чтобы понять, а как быстро подгружаются страницы вашего ресурса, можно воспользоваться, например, возможностями такого , подробно описанный в статье по приведенной ссылке. А можно воспользоваться услугами сервисов, которые предназначены для этого. Далее я приведу в качестве примера несколько таких.
В результате будет представлена диаграмма времени закачки отдельных объектов вебстраницы, а также их Урл и вес. Чем меньше объектов будет загружаться и чем легче будет весить каждый из них , тем лучше. Например, я для этой цели:
Собственно, некоторые проблемы и историю измерения скорости вашего сайта вы сможете отследить на соседних вкладках верхнего меню Pingdom.
Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.
Для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».
На первой диаграмме уделяете внимание положению фиолетовой вертикальной линии - это будет время окончания отрисовки сайта . Вторая вертикальная линия (синяя) будет означать время полной загрузки . Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая - раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд - то нужно озабачиваться исправлением этой ситуации.
Как видно из приведенного скриншота, Google PageSpeed Insights дает комплексную оценку — для компьютерного браузера и для мобильного. Кроме этого, внизу будет приведена оценка удобства пользования вашим ресурсом на различных гаджетах. Если вы еще не озаботились, то оценка там будет очень низкая (да и на приведенном справа скрине вашего сайта в окне смартфона все будет наглядно видно).
Но самое главное то, что Google PageSpeed Insights дает рекомендации, как увеличить оценку вашего сайта , т.е. как его ускорить. Начинать нужно, естественно, с самого верха, ибо эти исправления внесут наибольший вклад в ускорение.
У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:
Пришлось покопаться в инструкции к этому онлайн сервису и вычитать там, что минимум нужно ставить 1 день хранения статики в кеше. Я попросил техподдержку хостинга поставить с запасом 1 неделю, что они и сделали. Теперича оценка чуток повысилась и шибко важных претензий к моему ресурсу у Гугла в плане скорости загрузки не имеется, что есть хорошо.
Простенько и со вкусом, что называется. Можно подписаться на рассылку изменений.
Про то, я уже довольно подробно писал и поэтому повторяться не буду, чтобы не загромождать и без того уже громоздкую статью (дочитаете до конца — можете считать себя героем).
Но вернемся от измерения скорости к поиску возможностей ее увеличения. , раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.
В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог сайт загружался медленнее, чем 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 , где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:
Комментарии опять же потом можно будет удалить.
Если вдруг не сработало, но вы надеетесь на чудо, то вот еще несколько вариантов того же самого кода, но пробуйте их по очереди, а не все сразу:
Теперь после того, как вы вставили в.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
Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер
Ускорение сайта - что дает, как измерить и как самому ускорить сайт
Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Google pagespeed insights - это один из самых популярных инструментов проверки показателей скорости загрузки и работы страниц веб-сайтов
Представьте, что сайт – профессиональный бегун на короткие дистанции. Начало загрузки страницы означает выстрел стартового пистолета для забега. От того, насколько быстро спортсмен придет к финишу, зависит удобство и комфорт посетителя сайта. Никто не будет ждать, пока ресурс плетётся черепахой, медленно загружая контент и скрипты. Спустя несколько секунд посетители просто уходят, не дожидаясь ответа.
Pagespeed insights – персональный тренер бегуна – то есть, нашего сайта. Он внимательно анализирует динамику загрузки, выделяет проблемные области, и дает советы по исправлению ошибок, приводящих к снижению скорости.
Чтобы воспользоваться инструментом онлайн-измерения скорости загрузки сайта, перейдите на официальную страницу сервиса. Введите URL страницы и нажмите кнопку «Анализировать».
По результатам анализа будет выведена характеристика вашего ресурса с точки зрения оптимальных скоростных параметров. Отдельно представлены вкладки мобильного сканирования и анализа с точки зрения производительности компьютера.
Отношение полученных баллов к максимальному стобальному результату выражает степень оптимизации сайта. Значения 50-70% являются средними показателям большинства ресурсов, не задумывающихся об улучшении скорости загрузки. 80-90% означает, что вы основательно подготовили сервер и страницы. Стопроцентный результат является большой редкостью, но иногда встречается.
Сразу после процентов будет показана таблица рекомендуемых исправлений для сайта. Google выделяет места, наиболее сильно тормозящие загрузку и подсказывает, какими способами вы можете устранить проблему.
Для администраторов многих порталов остается загадкой, как же получить заветные 100\100 в Google Pagespeed Insights. Оказывается, добиться практически идеального результата можно легко, соблюдая основные приемы оптимизации
Самая придирчивая статья в чек-листах. Все изображения на сайте должны быть максимально сжатыми. Способов решения проблемы много:
Вы должны вручную указывать браузерам клиентов на то, чтобы те хранили статистику как можно дольше. Сделать это можно, с помощью механизмов конфигурации.htaccess в веб-сервере Apache
“
Header set Cache-Control "max-age=40200"
Header set Cache-Control "max-age=624800"
Header set Cache-Control "max-age=2552000"
Header unset Cache-Control
”
Если вы когда-то не включили сжатие на стороне сервера, нужно это сделать прямо сейчас. Есть два варианта сжатия. При установленной CMS подключите сжатие в панели управления, если CMS нет, перейдите в конфигурацию Apache и включите Gzip-сжатие там.
Чтобы проверить, работает ли сжатие, обновите сайт и рассмотрите присланные браузеру заголовки. Если там присутствует строка Content-Encoding: gzip, все прошло отлично.
Все.js файлы должны быть минифицированы. Для популярных библиотек есть специальные издания в формате.min.js. Если вы не нашли такую редакцию или имеете собственный код, к вашим услугам предоставляются онлайн-минификаторы, например Closure Compiler.
С CSS кодом помогут разобраться такие же минификаторы, например cssminifier.
Этот совет появляется, если на вашей странице некоторые элементы отображаются раньше других, например текст загружается в блок быстрее фонового изображения. Одним из способов решения будет настройка специальных JavaScript скриптов, управляющих загрузкой контента. Верх страницы загружается приоритетно, а дальше по мере прохода будут появляться остальные элементы, расположенные ниже.
Одной из самых старых особенностей HTML-сайтов является синхронная обработка контента. Если в head-блоке выполняется загрузка внешних скриптов и стилей, то браузер не показывает содержимого сайта до полной обработки всех полученных данных.
В итоге, если вверху страницы оказываются тяжеловесные библиотеки, то страница может висеть белым экраном по несколько секунд, дожидаясь загрузки файлов.
Существует три важных совета по исправлению этого пункта.
“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");”
Постарайтесь подобрать оптимальную конфигурацию веб-сервера для быстрой отдачи контента. Первым шагом будет установка связки Nginx+Apache для мгновенной отдачи статики кэширующим прокси.
Стоит помнить, что все серверные скрипты сильно задерживают загрузку страницы до окончания своей работы.
Проанализируйте время работы PHP. Не делайте множественных обращений к базе данных, выполняйте операции одним запросом, старайтесь не блокировать файлы на запись без необходимости. Используйте кэширующие расширения, такие как memcached
Кроме скриптовой оптимизации, постарайтесь перейти на удобный хостинг. Хорошим выбором будет на SSD-дисках или физический выделенный сервер с большой мощностью
Возникает закономерный вопрос: для чего мы улучшаем эти параметры, и как они сказываются на продвижении сайта?
Статистика говорит, что если пользователь ждёт загрузку больше трех секунд, в 40% случаев он просто покидает страницу. Что ещё хуже, 80% посетителей отказываются от повторного визита на медленный сайт.
У быстрых сайтов гораздо большая конверсия, что является довольно критичным параметром продающего сайта. Неоптимизированные страницы излишне нагружают сервер и мешают продажам вашего бизнеса.
