Комментарии 52
Проверил 1 свой проект
Lighthouse: 75(первая), жалуется на долгий "time to interactive", в реальности реагирует моментально, вторая загрузка 100, даже с троттлингом "regular 3G" никаких особых проблем.
Старый PageSpeed: стабильно 100
Новый PageSpeed: 99 для десктопа… 40-60(и правда дикий разброс) для мобильного
Добавили требования проверки таймлайн, очень жесткие требования по картинкам, Time To Interactive, похоже, цепляющий модули с отложенной загрузкой, еще придется чуток извернуться с невидимыми шрифтами, потому что гуглу хочется моргающих.
Видимо теперь придется намеренно обрабатывать глупость pagespeed.
Особенно глупой кажется слепая погоня за 0 картинок, зачем стремиться к нулевой задержке интерактивности, если скроллить в пустоту нет никакого смысла, ибо придется, внезапно — подождать.
Только надо дождаться, когда оценивать будет стабильно, а то пока разброс не дает почувствовать разницу )
Возможно, это особенность сервисов, трудно сказать, но спасибо за обзор, уже начал тестировать )
А теперь и не нужно, чистый брильянт.
Причем обычный самописный торговый сайт с кучей несжатых картинок.
Причем 99 % это для мобилок, а для компьютеров — 100%.
![](https://habrastorage.org/webt/lw/d5/x4/lwd5x4ecxuni8dayewndkim-m1o.png)
Отдельный плюсик за разбивку по времени и скриншоты этапов загрузки, удобно клиентам показывать. Хотя Waterfall давно есть в GTMETRIX.
Единственное, убрали ссылку на сформированный сервисом архив страницы, в котором по мнению гугл все идеально. Частенько пользовался сжатыми картинками оттуда, так как всеми доступными средствами получить требуемую для Гугла картинку не удавалось, да и некогда)))
На моем сервисе speed.devs.mx пока еще можно скачать Magic ZIP для вашего сайта — это переформатированный архив оптимизированных ресурсов с гугла, который содержит также оригиналы и готов к простому накатыванию на сайт по FTP.
![image](https://habrastorage.org/webt/yq/bi/zv/yqbizvuuqcbdi00vejdlqea8klq.png)
Но для меня лучший инструмент compressjpeg.com.
![](https://habrastorage.org/webt/ug/3o/6t/ug3o6togtaizsbupnfrxd8zerhm.png)
Дает 100, но при этом говорит что можно оптимизировать…
Это обычный лендинг для приложения iOS
Нужно пороботать над оптимизацией.
![image](https://habrastorage.org/getpro/habr/comment_images/6ae/820/8e0/6ae8208e0574e491be1e54baddccbd98.png)
Вот это качество!
Первое, что надо помнить — обновление PageSpeed Insights никак не влияет на принципы ранжирования в поисковой выдаче
В тоже время, тут webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html пишут
starting in July 2018, page speed will be a ranking factor for mobile searches
Например
Например, чего стоит рекомендация о минификации html кода страницы? В среднем эта операция занимает около 100 мс, и эта задержка в десятки раз перекрывает любую возможную выгоду от уменьшения размера страницы.
в каком виртуальном мире минификация даже 500килобайт кода заняло 100мс, и каким образом это перекрыло типичные для 3g соединения в 100 — 500мс непонятно.
Вероятно автор пытался намекнуть, не те срабатывания когда pgaespeed снижал балы за то, что страницу можно было уменьшить на 0.01%, но тогда именно об этом и нужно писать, а не выдумывать цифры.
PageSpeed был отличным инструментом для своего времени, пока веб мастера вместо следования рекомендациям, стали применять хаки для получения заветных 99 из 100. На фоне его родился LightHouse который выстроил свои метрики на базе попытки померять тоже самое в реальном режиме времени.
И это очень здорово, потому что те, кто следовал рекомендациям pagespeed, а не прокачивали цифру, сейчас получили туже зеленую зону.
Господство старого PageSpeed Insights с его принудительными рекомендациями наделало немало бед. Во первых, любая рекомендация может быть близка к бесполезной в вашей конкретной ситуации.
Приведите мне хотя бы один пример, когда было невозможно выполнить рекомендации PageSзeed в угрозу производительности.
Если у вас есть другие замеры времени мифиникации HTML — не стесняйтесь, озвучивайте.
А дальше происходит такая история — HTML сжимается GZIP и выгода он минификации уменьшается в несколько раз, так как ZIP очень хорошо ужимает все эти пробелы и переводы строк.
В результате, для сжатой страницы размером 60 кб вы получаете после минификации 55 кб — что в принципе практически незаметно при загрузке — потому как основные расходы для файла такого размера — это установить соединение, начать загрузку и т. д. Но при этой минификации браузер получает ответ на 100 мс позже, и это очень дорогое время — так как вся паралельная обработка и загрузка начнется только когда будет получен этот ответ.
А примеров плохого применения рекомендаций полно:
- pagespeed_mod, который делал красивые очки, но при этом становился посредником между сервером и клиентом, анализируя каждый отправляемый html, проверяя все упомянутые в нем ресурсы, что внушительно ухудшало TTFB
- отложенная загрузка JavaScript, что приводило к тому, что страница значительно дольше приходила в себя после загрузки — хотя реальный результат был значительно лучше, если просто сложить скрипты в футер
- включение critical CSS в тело каждой страницы, хотя он бы мог загружаться из кеша при дальнейшей навигации по сайту, если бы лежал в отдельном файле
- требование о соответствии реального размера изображений показываемому размеру, хотя есть немало случаев, когда это необходимо нарушить — например, если картинка увеличивается при наведении. Пару картинок такого типа было достаточно, чтобы просесть в оценке пунктов на 30
Больше всего плохо то, что убрали возможность скачать zip архив со сжатыми картинками. Гугл их действительно неплохо и быстро сжимал, а теперь придётся что-то придумывать чтобы снижать объём загружаемых изображений.
И ещё считаю что очень плохо сделали, сейчас показывают что да, есть проблемы, а дальше крутись как хочешь. Никаких толком рекомендаций по устранению проблем нет.
Пока не прикроют старое API, скачать оптимизированные ресурсы можно на speed.devs.mx.
А насчет рекомендаций и многого другого-gtmetrix.com.
сам хабр далёк от идеала
googleapis фонты и гугл карта прямо сильно режут оценочки, жаль нельзя вырезать никак.
Расскажите пожалуйста, реализация каких из них улучшила баллы, каких — нет. И действительно ли вы получали от них выгоду, близкую к обещаной.
В целом реально быстрее грузится. с учетом тех же галерей которые прогружаются только, когда до них реально пользователь промотает, ну и для мобильных благодаря srcset браузер тянет маленькие картинки, а не большие, реальная экономия трафика. Грузятся картинки только с видимой части и то в lazy режиме, плюс бекграунд на страницу через костыль так же в lazy формате.
js и css на странице сильно влияют на оценку, вебпак пришлось прикрутить, для css и js оптимизации. все css вверху js в футере.
Выход — подключить АМП, для Яшки турбо страницы да еще гууугу пейдж спид для сервака апача или инжиксу! И все в шоколаде или в коричневом цвете.
По мнению нового сервиса, я должен убрать гугл аналитикс, так как его метрика тормозит мне сайт, ну раз надо его то я еще могу убрать, все равно не пользуюсь. Далее убрать метрику яндекса, тоже тормозит, мало времени на кэш и так далее. То есть остаться без аналитики вообще!!!
Следующий прецедент это соц кнопки, но с ними как то еще решил, по ним и замечаний нет, а вот виджет от ВК коммент + хочу добавить в сайдбар, тоже самое с фейсбуком? Выкинуть конечно можно, но комменты охотней оставляют через ВК и Фейсбук. Нафик удаляем и получаем пузомерку (значительный прирост в цифирях).
Далее формы подписки, их тоже выкинуть, НЕ нужны нам всем подписчики!!! Мы здесь просто так пишем авторский контент!!!
Картинки в новом формате, да переделать!!! Только вот почемуто до сих пор прописывается код для IE 6 и прочему бреду, далеко не все браузеры откроют новый формат!!!
А вот сжатые картинки больше не дают,… ДЛЕЦЫ!!! Могли бы и оставить!
Сжал все картинки установленной на сервер утилитой, не помогло, скачал все папки с картинками и поджал прогой на компе, вроде все норм было, кое что заменил из предложенного архива, теперь что делать, все рекомендации по онлайн сервисам левоватые, установка плагинов вообще бред собачий!!!
Теперь требует отложенную загрузку картинок. Была такая! Плагин тормозил, удалил, было все норм. Теперь возвращать что ли? Можно конечно извернуться и скриптом без плагина организовать.
Ну, а со всякими примочками звонков, чатов и т. д. и сказать нечего. УДАЛЯТЬ!!!
Да и зачем вообще картинки то ставить, каждая лишний запрос к серверу, а это время. Шрифты того же гугла, зачем??? Всё УДАЛИТЬ!!!
Оставить голый текст!!! Не форматированный, скорость 100 из 100!!!
Попадаются такие на 17 — 100 странице, читать не возможно.
Вот нас и подводят к тому, чтобы установить гугловский АМП и отдавать свой контент им, а они его будут давать уже пользователям, типа это мы такие вот распрекрасные, Вам тут пишем полезную инфу. И Яшка туда же, подключай турбо страницы и отдай свой контент.
И будем мы все под колпаком у Мюллера, рано или поздно!!!
А до кучи нужно еще супер тормоз подключить от гугла ngx_pagespeed, тормознутей функционала не встречал!!!
Рекомендации имеют мало общего с баллами. Основной посыл нового PageSpeed Insights — делайте мобильные страницы легче, до минимализма. Что, в принципе, правильно — где десктоп чуть поморщится, смартфон уже кучу заряда потратит на загрузку и обработку.
Пару лет назад хотел воткнуть АМП и Турбостраницы, но тут же на хабре умную статью прочитал про эти улучшалки и соответственно не стал.
Лучше подскажите, что реально делать? Все выключить, то есть виджеты ВК, метрику, гугл аналитику, убрать шрифты гугловые, убрать всю графику с сайта, а также CSS стили, до кучи скрипты ???
В принципе, лично я такие сайты часто посещаю, они посвящены кодированию на PHP, JS, SQL там графика совсем не нужна, простой текст. Но я то буду читать и изучать такой контент, а обычный пользователь? Который зашел по запросу «что такое сервер» чистый текст просто сразу и закроет!
Сейчас главная проблема, что нет стабильного измерителя — на PageSpeed Insights баллы скачут, у меня на ноуте в Хроме — тоже (возможно, от нагрева и троттлинга). Я планирую чуть попозже поднять на DigitalOcean машину с консольным Litehouse, посмотреть как будет там.
А с таким шумом оценок, тяжело оценить эффект от мелких изменений (типа выкидывания аналитики или шрифтов), просто невозможно понять, дают они что-то или доли балла.
Я пока что «на уровне Ванги» рекомендую:
- Однозначно делать различные версии для мобильных и десктопа (хоть на разных шаблонах, хоть на ifах)
- Выкидывать по возможности весь внешний визуальный обвес сторонних сервисов — по крайней мере, пока они не начнут всапываться в то, чтобы делать его легким
- В особо критичных ситуациях можно делать загрузку комментов/карт/социалок в момент, когда до них доскроллят, что в принципе разумно со всех сторон.
- Карты можно вставлять простыми картинками, которые по клику переходят к странице с картой.
- Не знаю как кого, а меня все эти выпрыгивающие живочаты всю дорогу бесили. Я бы делал простую кнопку, которая переносит на страницу с чатом, или хотя бы загружает чат уже после нажатия.
- Попапы и извещения всякие только при острой необходимости, особенно в мобильном варианте. Дико бесит, когда приходишь куда-то из гугла, а там лезет попап на 2/3 экрана — вот как раз, еще не увидел что у вас есть, а уже подпишусь и лайкну.
- Предупреждение о cookie — выключаем, если вы не под жесткими законодательными требованиями (находитесь юридически в Евросоюзе)
- Уменьшать количество элементов DOM на странице, особенно на мобильной — никаких ветвистых вложенных меню, товаров/анонсов статей на 10 экранов вниз и т. д.
- Картинки, аналитики, веб-шрифты, CSS — по моему мнению — не особо влияют на скорость, по сравнению с вышеперечисленным. Их я бы не трогал.
- И да, AMP дико рулит, безотносительно PageSpeed. Я, если вижу в выдаче поиска молнийку, нажимаю в первую очередь. Потому что знаю, что откроется мгновенно и будет без свистелок, сразу к сути. Думаю, я такой не один. И нет там минусов, кроме необходимости приложить чуть усилий.
Сам обажаю такие сайты от профи программеров, чистенько, аккуратно и все понятно для меня, джиэс — дык джиэс, пхп, так пхп, настройки сервака, тож интересно.
А как быть простому то обывателю, который пришел по информационному запросу — как поставить ссылку в меню на лендинге, он вчера только про лендинг то узнал!
Я ему в комментах 2 дня объяснял, какие две кнопки надо нажать на клаве, чтобы код страницы открыть, хотя на сайте все дотошно расписано и в картинках, через неделю воткнул бедолага ссылку. Был дюже благодарен! Благо комменты помогли от ВК.
И насчет АМПа КАТЕГОРИЧЕСКИ не соглашусь, вот статья отсюда же Про АМП По началу тоже чуть было не воткнул, а потом посмотрел и понял, что гонят нас как овец под колпак к Мюллеру!!! (Штирлица смотрите!) И Яшка под гуглу погнал свои турбо страницы, как обезьянка, мол комне Ваш контент давайте!
Послали пока одного ухаря да и второго вдогонку за первым! Мол нехрен нам лапшу вешать про свои чудо инструменты АМП да турбоурбо страницы. Сайты настроены на высокую скорость загрузки и норм. Так во че Гугл учудил. Жаль ссылок с тех обсуждений не осталось, а обсуждалось на оф. блоге Яшки, да где то в гугле.
Поп ап окна самого бесят, и сам не использую, но вот необходимый функционал нужен. Скорей гуглу нужно подумать о нормальном инструменте, а то шляпу пульнули типа ngx_pagespeed хоть бы не позорились, программеры и советчики.
Эта штука еще по круче прежней шляпы (ngx_pagespeed) будет.
Гугл сказал РАВНЯЙСЬ шляпа идет! И всем равняться что ли?
Пускай шляпу свою настроят нормально, а потом дают оценивать!
Я и сам за скорость загрузки обеими руками только за!!! Убрал практически все плагины, оставил минимум. Сайт на WP. Но то что предлагает инструментик, согласитесь сами — ну полный же бред, урезать свою же статистику, то есть аналитику гугла! ГУГЛ предлагает? Это КАК вообще? Нормально?
Политику куки? Так он же сам и писал о ней!!! Еще за долго до выхода закона!!! Щас тоже статью с оф сайта не найду.
Лучше сделали бы нормальный инструмент, а то и графику теперь не дадут скачать!
Буду ждать и смотреть, что будет дальше.
Да именно так
С соц. кнопками — 58
Без них — 93
В мобильной (без метрики и аналитики)
В декстопе 100
Больше всего мне нравится сравнение готовности… по скриншотам и их разнице.
Занавес
А по скриншотам — это правильно. Иначе бы обходили для накрутки баллов отложенной загрузкой контента через 2-3 секунды после показа страницы, а страдали бы посетители.
Метрик не перепроверял но баллы сжирает, хоть и не показывается, за время задержки при вводе, время окончания работы ЦП, а вот соц. кнопки 100500% сжирали ~30 попугаев, как их даже не грузи, хоть ajax -м. Они показываются и "разница скриншотов" speedline четко съедала ~30 попугаев, как и… время задержки при вводе, время окончания работы ЦП.
Можно смотреть юзер агент, и на проверку speedtest отдавать контент без метрик, сиц.иконок и т.д.
То же самое касается и других ресуров:)
В результате и пользователи получают адекватный контент, и гугл не снежает баллы:)
Но, конечно, таким трюком не надо злоупотреблять, и применять его только в случаях, когда попросту нельзя нормально исправить «недостатки», за которые снижается оценка!
Там включна и метрика, и аналитика. И апи твиттера подгружается. Но оценка всё равно хорошая.
В некоторых случаях чат просто необходим! К примеру по организации техподдержки, аналитика также просто необходима. Поп ап окна, сам пока не использую, но знаю, что конверсия с них в разы больше, чем с обычной подписки.
Грамотно организованный чат или кнопка звонка просто необходима в интернет магазинах, различных сервисах, комменты от соц сетей люди охотней заполняют, чем простой коммент, где надо вводить почту, так как любимая соц сеть уже открыта и НЕ надо вводить свои адреса, да еще ставить галки, что согласен с обработкой персональных данных.
Если поп ап окно с подпиской выкидывать гдето на 25-30 секунде просмотра страницы, то посетитель изучающий сайт уже такое время отреагирует абсолютно адекватно, подпишется или просто закроет. А если конечно открывать на 3-5 секунде, то только будет раздражение, ну и т. д. То есть нужно настроить грамотно необходимый функционал, и копать Гуглу с Яшкой надо бы в эту сторону.
Зачем уменьшать скорость загрузки сайта, путем сокращения необходимого функционала???????
Когда в 2004 году делал первый свой сайт, то ни каких чатов и прочей лабуды не было, простой HTML и блокнот в помощь!!!
Интернет был по модему (во всем мире), жена даже не знает, что это такое (не застала), как и многие здесь присутствующие! И ничего сайты грузились нормал и в ТОПе были.
Картинки — так ежу понятно (неписанное правило), что для сайта необходимо сокращать и под каждый необходимый размер делать нужный формат.
В 2006 — 2007 появился выделенный интернет с запредельными скоростями до 100 Мбт. И понеслось!!! А в принципе то прошло уж более 10 лет, а тернет во всем мире тот же до 100 Мбт.
Еще Лукьяненко писал офигенский фантастический роман про построение целых городов в интернете, а воз и ныне там, тож более 10 лет прошло!
В те времена попался офигенский сайт, какой то шоу звезды очень популярной (Американской), сейчас не вспомню, кто именно. Так вот у неё сайт был сделан по принципу романа Лукьяненко! Только не город, а студия звуковая, то есть ходишь по объемным 3D помещениям, прям, как в шлеме и там интересная и полезная информация!
Представляете скорость загрузки такого сайта по инструментарию Гугла.
Страницы то так и называются ИНТЕРАКТИВНЫЕ!
Зачем уменьшать скорость загрузки сайта, путем сокращения необходимого функционала???? Может покапать в сторону увеличения пропускного канала интернета???
Ну так скрипт чата загружайте по клику на кнопке юзером
Все эти всплывающие чаты и popup -ы это 3.14 юзабилити
"Конверсия от них больше"? А процент отказов таких как я считали, я закрываю сайт когда мне куча всплывающих окон и чат на пол экрана. И таких кого это "бесит" более 50%. Подумали о "них"? О конверсии с "нас".
Всё должно вызываться по клику юзера, а не вашей самодеятельностью
И так везде. К примеру карта… зачем подгружать её сразу? Выводите изображение вместо неё а по клику на неё или onmouseover — загружайте вместо изображения интерактивную карту со скриптами. PNG в утиль. Всё сжимать mozjpeg bin (exec cjpeg ...). И так везде можно сделать оптимизацию. Единственное чего нельзя — это адаптивная верстка под mobile. Под mobile detect вообще отдавать отдельные шаблоны по типу AMP
А чаты где выезжают на пол экрана закрывая всю нужную инфу и остаются без ответа, самого бесят и считаю что это развод лохов не честными вебмастерами!!!
Пример из жизни:
Я сам архитектор, сижу за проектом, 4 часа утра, необходимо найти теплопроводность кирпича для теплотехнического расчета наружной стены, нахожу сайт с данными, смотрю, а тут на пол экрана выезжает это окно, да еще такая симпотная фифа анимированная просит задать ей вопрос, но мне скучно было, так я ради интереса и задал девушке про кирпич, надеялся, что глюкнет, так нет, смотрю и офигиваю пишет ответ, весь сон прошел! А в ответ дайте мне Ваш телефон, я Вам позвоню! Ну я ради прикола дал, думаю может с утра позвонят, так пообщаюсь с коллегами проектировщиками, так и не позвонили!
Грамотно работающие чаты могут позволить себе единицы, а ставят ВСЕ кому не лень!
Спасибо за совет про карту, возможно будет нужна на одном из проектов. Если можно по подробней про mozjpeg bin (exec cjpeg ...), где почитать мануал. Установил на сервер jpegoptim и pptipng не сильно, как помогли, сжимал уже на компе прогой и после в старом гугловском инструменте скачивал недожатые картинки.
— Считаете что PNG в утиль? Очень много картинок менять придется.
А так спасибо.
А пока несколько вопросов к гуру???
1. Картинки — кто то заморачивался со своим CDN сервером, тоесть загрузка графики на поддомен или домен не имеющий куки, для исключения загрузки куков к картинкам и статики в целом, плюс параллельная загрузка статики и сокращение числа запросов в HTTP заголовках. При имеющемся SSL сертификате и настроенном HTTPS/2 протоколе, позволяющем параллельную загрузку?
2. Использование метрики по технологии API, если подключить таким образом уйдет ли проблема с аналитикой или нет???
3. Отложенная загрузка графики??? Метод lazy loading, я плагин убрал из за нагрузки на сервер, шляпа от ngx_pagespeed НЕ рулит, есть скрипт официальный и метод настройки, может кто ставил, отпишитесь?
4. Соц сети, как обойти, чтоб все работало, здесь на хабре была отличная статья по настройки асинхронной загрузки скриптов соц сетей, данная настройка выполнена, все скрипты загружаются асинхронно, но проблемма не ушла! Если кому интересно, то вот ссылка на статью ссылка на статью.
Подскажите кто использовал данные методы? И не просто подскажите, а ссылку в студию на свой сайт, чтоб можно было проверить, что это действительно работает.
А то тут со шляпой одной пропарился ngx_pagespeed, тож куча прекрасных отзывов, а по факту полная шляпа! Как Гуглу то не стыдно такое выкладывать!
Google PageSpeed Insights кардинально обновился, что изменится?