Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

PageSpeed Insights анализирует динамику загрузки, выделяет проблемные области и дает советы по исправлению ошибок.
PageSpeed Insights ана­ли­зи­ру­ет дина­ми­ку загруз­ки, выде­ля­ет про­блем­ные обла­сти и дает сове­ты по исправ­ле­нию оши­бок.

Один из пока­за­те­лей хоро­шей рабо­ты сай­та – ско­рость. И пер­вич­ной загруз­ки стра­ниц, и рабо­ты в целом. Быст­рее загру­зит­ся глав­ная стра­ни­ца – быст­рее поль­зо­ва­тель уви­дит вашу инфор­ма­цию и с боль­шей веро­ят­но­стью оста­нет­ся на сай­те, если при­шел впер­вые. Веб-раз­ра­бот­чик, it-волон­тер Алек­сандр Гусев (сту­дия «Биз­нес-Ате­лье») рас­ска­зал, как про­ана­ли­зи­ро­вать ско­рость сай­та с помо­щью сер­ви­са PageSpeed Insights.

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

Сервис Page Speed Insights от Google предназначен для проверки скорости загрузки страниц сайта. Скриншот экрана установки.
Сер­вис Page Speed Insights от Google пред­на­зна­чен для про­вер­ки ско­ро­сти загруз­ки стра­ниц сай­та. Скрин­шот экра­на уста­нов­ки.

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

  • 0 – 49 (мед­лен­но): крас­ная зона;
  • 50 – 89 (средне): оран­же­вая зона;
  • 90 – 100 (быст­ро): зелё­ная зона.

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

И здесь пере­хо­дим к самым попу­ляр­ным пунк­там, кото­рые вли­я­ют на рабо­ту сай­та.

Количество и размер картинок на сайте

Если на глав­ной стра­ни­це 100 кар­ти­нок и каж­дая весит по мега­бай­ту (пото­му что на мони­то­ре редак­то­ра сай­та она смот­рит­ся кра­си­во, чет­ко и ярко), то раз­мер всех изоб­ра­же­ний лег­ко уле­та­ет за 100 Мб. И одно дело, когда кар­тин­ка нуж­на на сай­те имен­но в боль­шом раз­ре­ше­нии и имен­но в том виде, в каком она выгру­же­на с фото­ап­па­ра­та.

Еще по теме: 106 спо­со­бов улуч­шить сайт НКО

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

Все рав­но в подав­ля­ю­щем боль­шин­стве фото­гра­фия на сай­те будет или совсем ста­тич­на (она не будет откры­вать­ся по кли­ку мыши), или же будет откры­вать­ся во всплы­ва­ю­щем окне, кото­рое мень­ше раз­ме­ра экра­на. А это в боль­шин­стве сво­ем мони­то­ры с раз­ре­ше­ни­ем до 1920 px, кон­крет­ные циф­ры будут вид­ны в ана­ли­ти­ке сай­та. Поэто­му, если раз­мер новост­ной мини­а­тю­ры на уровне кода огра­ни­чен 640px, то загру­жать на это место кар­тин­ку в full-hd раз­ре­ше­нии про­сто ни к чему. Она все рав­но ужмет­ся до ука­зан­ных ей 640px по ширине.

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

Squoosh — сервис Google для сжатия фотографий без потери качества. Скриншот экрана.
Squoosh – сер­вис Google для сжа­тия фото­гра­фий без поте­ри каче­ства. Скрин­шот экра­на.

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

Отложенная загрузка

Дру­гой момент, кото­рый так­же отно­сит­ся к гра­фи­ке и есть в перечне пунк­тов оцен­ки PageSpeed, это так назы­ва­е­мая lazy load (лени­вая загруз­ка). Хотя мне боль­ше нра­вит­ся вари­ант «отло­жен­ная загруз­ка», так как он точ­нее отра­жа­ет суть. Но даль­ше по тек­сту буду исполь­зо­вать «лени­вую загруз­ку», что­бы не путать.

Смысл этой шту­ки – берем ту же нашу тесто­вую стра­ни­цу, на кото­рой 100 кар­ти­нок. Понят­но, что все эти изоб­ра­же­ния рас­пре­де­ле­ны рав­но­мер­но по всей глав­ной стра­ни­це и нахо­дят­ся на 10 экра­нах про­крут­ки. Так вот, по умол­ча­нию при откры­тии сай­та бра­у­зер загру­жа­ет всю гра­фи­ку, кото­рую най­дет на стра­ни­це. При этом посе­ти­тель сай­та пока что нахо­дит­ся толь­ко на пер­вом экране и видит пер­вые 10 кар­ти­нок. В это же вре­мя осталь­ные 90 усерд­но под­гру­жа­ют­ся, наде­ясь быть уви­ден­ны­ми. 

Еще по теме: Видео­урок Теп­ли­цы: как улуч­шить поис­ко­вую выда­чу с помо­щью Яндекс.Вебмастер

Посе­ти­тель, в свою оче­редь, недо­уме­ва­ет, сколь­ко еще стра­ни­ца будет загру­жать­ся и когда уже это кон­чит­ся? И он либо дожи­да­ет­ся загруз­ки всей этой кра­со­ты, либо ухо­дит с сай­та. Так вот, lazy load под­гру­жа­ет толь­ко те кар­тин­ки, кото­рые нахо­дят­ся в поле види­мо­сти или вот-вот попа­дут в него.

Поэто­му при таком вари­ан­те посе­ти­тель сай­та видит толь­ко пер­вые 10 кар­ти­нок и для него стра­ни­ца уже загру­зи­лась. Остав­ши­е­ся 90 сидят себе тихо и не тре­во­жат бра­у­зер тре­бо­ва­ни­ем сроч­но пока­зать их. Как толь­ко посе­ти­тель нач­нет про­кру­чи­вать стра­ни­цу вниз, под­гру­зят­ся сле­ду­ю­щие 10 кар­ти­нок. И так далее по мере про­крут­ки будут под­гру­жать­ся бли­жай­шие кар­тин­ки. За счет это­го умень­ша­ет­ся вес стра­ни­цы и сокра­ща­ет­ся ско­рость ее загруз­ки.

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

Использование webp

Дру­гой пункт, каса­ю­щий­ся гра­фи­ки, это «исполь­зуй­те совре­мен­ные фор­ма­ты изоб­ра­же­ний». Если вкрат­це, то не исполь­зуй­те bmp, а исполь­зуй­те webp. Это хоть и край­но­сти, но доволь­но близ­кие к истине. У каж­до­го фор­ма­та изоб­ра­же­ния есть свое пред­на­зна­че­ние, и исполь­зо­вать png в тех кар­тин­ках, где нет про­зрач­но­сти, не сто­ит, сго­дит­ся и jpg. Тот же webp, кото­рый реко­мен­ду­ет сер­вис, конеч­но, хорош. Совре­мен­ный, с хоро­шим сжа­ти­ем, но при этом его под­держ­ка бра­у­зе­ра­ми еще не пол­ная.

WebP — формат сжатия изображений с потерями и без потерь качества, предложенный Google. Скриншот экрана.
WebP – фор­мат сжа­тия изоб­ра­же­ний с поте­ря­ми и без потерь каче­ства, пред­ло­жен­ный Google. Скрин­шот экра­на.

К при­ме­ру, бра­у­зер Safari этот фор­мат не пони­ма­ет. При­чем ни его настоль­ная вер­сия, ни мобиль­ная. Поэто­му посе­ти­те­ли ваше­го сай­та, зашед­шие с iPhone, кар­ти­нок не уви­дят вовсе.

Кеширование

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

Использование плагинов

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

Правильные приоритеты

Важ­ный момент для пер­фек­ци­о­ни­стов: «хочу, что­бы у мое­го сай­та было 100 бал­лов из 100». Оно, конеч­но, при­ят­но, когда ваше­му сай­ту выда­ли 100 бал­лов и в мобиль­ной вер­сии, и для ком­пью­те­ров, но зача­стую овчин­ка не сто­ит выдел­ки. Какие-то пунк­ты сер­ви­су могут не нра­вить­ся, и все тут. И сайт уже нор­маль­но рабо­та­ет, и гру­зит­ся быст­ро, а PageSpeed’у все мало и мало.

На при­ме­ре мое­го лич­но­го фото­сай­та alexangusev.ru инте­рес­но наблю­дать как раз эту кар­ти­ну. На сего­дня я докру­тил его до 91 бал­ла для мобиль­ной вер­сии и 99 бал­лов – для ком­пью­тер­ной вер­сии. При этом это сайт с фото­гра­фи­я­ми, то есть каче­ство изоб­ра­же­ний для меня очень и очень важ­но. На сего­дня все фото, что есть на сай­те, я про­пу­стил через тот же Squoosh и оста­вил на мини­маль­но удо­вле­тво­ря­ю­щих меня уров­нях. И сде­лав этот в пер­вый раз, был несколь­ко удив­лен, когда PageSpeed вновь выдал мне реко­мен­да­цию «настрой­те под­хо­дя­щий раз­мер изоб­ра­же­ний». Но, пар­дон, у меня нет цели сде­лать все фото пик­сель­ны­ми в уго­ду сер­ви­су, что­бы полу­чить желан­ную сот­ню бал­лов. Поэто­му сей­час этот пункт я уже мыс­лен­но про­пус­каю и из реко­мен­да­ций для себя исклю­чаю.

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

Резю­ме: каж­дый пункт диа­гно­сти­ки сер­вис сопро­вож­да­ет неболь­шим опи­са­ни­ем по воз­мож­но­стям опти­ми­за­ции и ссыл­ка­ми либо на Кодекс WordPress, либо на ката­лог пла­ги­нов с уже гото­вы­ми их вари­ан­та­ми для исполь­зо­ва­ния. Как раз одним из таких пла­ги­нов явля­ет­ся Autoptimize – он поз­во­ля­ет про­стым про­став­ле­ни­ем гало­чек внут­ри акти­ви­ро­вать ту или иную настрой­ку, напря­мую вли­я­ю­щую на пока­за­те­ли PageSpeed. Это и вклю­че­ние лени­вой загруз­ки для кар­ти­нок, и сжа­тие и кеши­ро­ва­ние скрип­тов, пере­нос скрип­тов в футер и сжа­тие HTML. Широ­кое поле для твор­че­ства, глав­ное, что­бы не во вред сай­ту.

Autoptimize предназначен для оптимизации сайта на Wordpress. Скриншот экрана.
Autoptimize пред­на­зна­чен для опти­ми­за­ции сай­та на Wordpress. Скрин­шот экра­на.

Само­му пла­ги­ну вполне сто­ит дове­рять, если:

  • он сов­ме­стим вплоть до вер­сии WordPress 5.2.3 (на сего­дня акту­аль­ней неку­да);
  • у него более мил­ли­о­на актив­ных уста­но­вок (не абы как);
  • послед­нее обнов­ле­ние было 4 дня назад (по состо­я­нию на 16.09.2019);
  • у него 4,7 бал­ла из 5 воз­мож­ных (по оцен­кам поль­зо­ва­те­лей).

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

К тому же за 4 года, что я помо­гаю НКО как it-волон­тер, не при­пом­ню зада­чи имен­но на улуч­ше­ние пока­за­те­лей рабо­ты сай­та по PageSpeed. А это очень инте­рес­ная рабо­та. Поэто­му если вы еще не пуб­ли­ко­ва­ли зада­чи на it-волон­те­ре, то самое вре­мя.