Ранее мы уже проверяли наличие мобильных версий у сайтов, а сегодня будем измерять скорость загрузки страниц, их юзабилити, и даже получать скриншоты сайтов. Точнее все это делать будет Google, а мы всего лишь спарсим информацию из их сервиса PageSpeed Insights.
Для того, чтобы составить пресет, нужно проанализировать алгоритм работы сервиса. Для этого воспользуемся Инструментами разработчика в Chrome и посмотрим какие запросы отправляются при нажатии кнопки Анализировать в сервисе.
Как видим - отправляется 2 запроса: для десктопной и для мобильной версий. В ответ приходит нужная нам информация в JSON. Т.е. задача парсера - отправить оба запроса и распарсить ответ.
Но, проанализировав получаемый в качестве ответа JSON, можно заметить, что там есть скриншоты, но они приходят не в виде ссылки, а в виде BASE64 кодированной картинки. При этом в самой строке заменены некоторые символы, поэтому это тоже нужно будет учесть. Такую картинку можно вывести на обычной HTML странице в теге <img...>. Поэтому весь результат мы будем выводить в виде HTML страницы. А чтобы это все красиво оформить, воспользуемся способом ранее описанным в статье Вывод результатов в таблицу.
Итак, составляем пресет:
Результат
Мы получим страницу, которая будет выглядеть примерно так:
Посмотреть "вживую"
Примечание. PageSpeed отдает скриншоты в довольно плохом качестве, поэтому они могут дать только общее представление о том, как выглядит страница при просмотре в уменьшенном виде.
Для того, чтобы составить пресет, нужно проанализировать алгоритм работы сервиса. Для этого воспользуемся Инструментами разработчика в Chrome и посмотрим какие запросы отправляются при нажатии кнопки Анализировать в сервисе.
Как видим - отправляется 2 запроса: для десктопной и для мобильной версий. В ответ приходит нужная нам информация в JSON. Т.е. задача парсера - отправить оба запроса и распарсить ответ.
Но, проанализировав получаемый в качестве ответа JSON, можно заметить, что там есть скриншоты, но они приходят не в виде ссылки, а в виде BASE64 кодированной картинки. При этом в самой строке заменены некоторые символы, поэтому это тоже нужно будет учесть. Такую картинку можно вывести на обычной HTML странице в теге <img...>. Поэтому весь результат мы будем выводить в виде HTML страницы. А чтобы это все красиво оформить, воспользуемся способом ранее описанным в статье Вывод результатов в таблицу.
Итак, составляем пресет:
- Для десктопной и мобильной версии используем отдельные парсеры
- В Общем формате результата для парсинга JSON используем $tools.parseJSON и форматируем результат (добавляем HTML теги, чтобы получилась таблица)
- В Начальном и Конечном текстах прописываем хедер и футер будущей HTML страницы
Код:
eyJwcmVzZXQiOiJQYWdlU3BlZWQgSW5zaWdodHMiLCJ2YWx1ZSI6eyJwcmVzZXQi
OiJQYWdlU3BlZWQgSW5zaWdodHMiLCJwYXJzZXJzIjpbWyJOZXQ6OkhUVFAiLCJk
ZWZhdWx0Iix7InR5cGUiOiJvdmVycmlkZSIsImlkIjoiZ29vZENvZGUiLCJ2YWx1
ZSI6WzIwMF19LHsidHlwZSI6Im92ZXJyaWRlIiwiaWQiOiJxdWVyeWZvcm1hdCIs
InZhbHVlIjoiaHR0cHM6Ly93d3cuZ29vZ2xlYXBpcy5jb20vcGFnZXNwZWVkb25s
aW5lL3YzYmV0YTEvcnVuUGFnZXNwZWVkP3N0cmF0ZWd5PW1vYmlsZSZzY3JlZW5z
aG90PXRydWUmdXJsPSRxdWVyeSJ9XSxbIk5ldDo6SFRUUCIsImRlZmF1bHQiLHsi
dHlwZSI6Im92ZXJyaWRlIiwiaWQiOiJnb29kQ29kZSIsInZhbHVlIjpbMjAwXX0s
eyJ0eXBlIjoib3ZlcnJpZGUiLCJpZCI6InF1ZXJ5Zm9ybWF0IiwidmFsdWUiOiJo
dHRwczovL3d3dy5nb29nbGVhcGlzLmNvbS9wYWdlc3BlZWRvbmxpbmUvdjNiZXRh
MS9ydW5QYWdlc3BlZWQ/c3RyYXRlZ3k9ZGVza3RvcCZzY3JlZW5zaG90PXRydWUm
dXJsPSRxdWVyeSJ9XV0sInJlc3VsdHNGb3JtYXQiOiJbJSAnPHRyPic7XG4nPHRk
PicgXyBxdWVyeSBfICc8L3RkPic7XG5qc29uMSA9IHRvb2xzLnBhcnNlSlNPTihw
MS5kYXRhKTtcbmpzb24xLnJlc3BvbnNlQ29kZSA9PSAnMjAwJyA/ICc8dGQ+JyBf
IGpzb24xLnJ1bGVHcm91cHMuU1BFRUQuc2NvcmUgXyAnPC90ZD48dGQ+JyBfIGpz
b24xLnJ1bGVHcm91cHMuVVNBQklMSVRZLnNjb3JlIF8gJzwvdGQ+JyA6ICc8dGQ+
bm9uZTwvdGQ+PHRkPm5vbmU8L3RkPic7XG5cIjx0ZD48YSBocmVmPScjJyBjbGFz
cz0ncG9wJz48aW1nIHN0eWxlPSd3aWR0aDoyNSU7aGVpZ2h0OjI1JTsnIHNyYz0n
ZGF0YTpcIiBfIGpzb24xLnNjcmVlbnNob3QubWltZV90eXBlIF8gJztiYXNlNjQs
JyBfIGpzb24xLnNjcmVlbnNob3QuZGF0YS5yZXBsYWNlKCdfJywgJy8nKS5yZXBs
YWNlKCctJywgJysnKSBfIFwiJyAvPjwvYT48L3RkPlwiO1xuanNvbjIgPSB0b29s
cy5wYXJzZUpTT04ocDIuZGF0YSk7XG5qc29uMi5yZXNwb25zZUNvZGUgPT0gJzIw
MCcgPyAnPHRkPicgXyBqc29uMi5ydWxlR3JvdXBzLlNQRUVELnNjb3JlIF8gJzwv
dGQ+JyA6ICc8dGQ+bm9uZTwvdGQ+JztcblwiPHRkPjxhIGhyZWY9JyMnIGNsYXNz
PSdwb3AnPjxpbWcgc3R5bGU9J3dpZHRoOjUwJTtoZWlnaHQ6NTAlOycgc3JjPSdk
YXRhOlwiIF8ganNvbjIuc2NyZWVuc2hvdC5taW1lX3R5cGUgXyAnO2Jhc2U2NCwn
IF8ganNvbjIuc2NyZWVuc2hvdC5kYXRhLnJlcGxhY2UoJ18nLCAnLycpLnJlcGxh
Y2UoJy0nLCAnKycpIF8gXCInIC8+PC9hPjwvdGQ+XCI7XG5cIjwvdHI+XFxuXCIg
JV0iLCJyZXN1bHRzU2F2ZVRvIjoiZmlsZSIsInJlc3VsdHNGaWxlTmFtZSI6IiRk
YXRlZmlsZS5mb3JtYXQoKS5odG1sIiwiYWRkaXRpb25hbEZvcm1hdHMiOltdLCJy
ZXN1bHRzVW5pcXVlIjoibm8iLCJxdWVyeUZvcm1hdCI6WyJodHRwOi8vJHF1ZXJ5
Il0sInVuaXF1ZVF1ZXJpZXMiOmZhbHNlLCJzYXZlRmFpbGVkUXVlcmllcyI6ZmFs
c2UsIml0ZXJhdG9yT3B0aW9ucyI6eyJvbkFsbExldmVscyI6ZmFsc2UsInF1ZXJ5
QnVpbGRlcnNBZnRlckl0ZXJhdG9yIjpmYWxzZSwicXVlcnlCdWlsZGVyc09uQWxs
TGV2ZWxzIjpmYWxzZX0sInJlc3VsdHNPcHRpb25zIjp7Im92ZXJ3cml0ZSI6ZmFs
c2V9LCJkb0xvZyI6Im5vIiwia2VlcFVuaXF1ZSI6Ik5vIiwibW9yZU9wdGlvbnMi
OnRydWUsInJlc3VsdHNQcmVwZW5kIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBs
YW5nPVwiZW5cIj5cbjxoZWFkPlxuICA8dGl0bGU+UGFnZVNwZWVkIEluc2lnaHRz
PC90aXRsZT5cbiAgPG1ldGEgY2hhcnNldD1cInV0Zi04XCI+XG4gIDxtZXRhIG5h
bWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGlu
aXRpYWwtc2NhbGU9MVwiPlxuICA8c2NyaXB0IHNyYz1cImh0dHBzOi8vYWpheC5n
b29nbGVhcGlzLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzEuMTEuMy9qcXVlcnkubWlu
LmpzXCI+PC9zY3JpcHQ+XG4gIDxzY3JpcHQgc3JjPVwiaHR0cHM6Ly9tYXhjZG4u
Ym9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvanMvYm9vdHN0cmFwLm1p
bi5qc1wiIGludGVncml0eT1cInNoYTM4NC1UYzVJUWliMDI3cXZ5alNNZkhqT01h
TGtmdVdWeFp4VVBuQ0pBN2wybUNXTklwRzltR0NEOHdHTkljUEQ3VHhhXCIgY3Jv
c3NvcmlnaW49XCJhbm9ueW1vdXNcIj48L3NjcmlwdD5cbiAgPHNjcmlwdCBzcmM9
XCJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9ib290c3Ry
YXAtdGFibGUvMS44LjEvYm9vdHN0cmFwLXRhYmxlLWFsbC5taW4uanNcIj48L3Nj
cmlwdD5cbiAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCJodHRwczov
L21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNy9jc3MvYm9v
dHN0cmFwLm1pbi5jc3NcIiBpbnRlZ3JpdHk9XCJzaGEzODQtQlZZaWlTSUZlSzFk
R21KUkFreWN1SEFIUmczMk9tVWN3dzdvbjNSWWRnNFZhK1BtU1Rzei9LNjh2YmRF
amg0dVwiIGNyb3Nzb3JpZ2luPVwiYW5vbnltb3VzXCI+XG4gIDxsaW5rIHJlbD1c
InN0eWxlc2hlZXRcIiBocmVmPVwiaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNv
bS9hamF4L2xpYnMvYm9vdHN0cmFwLXRhYmxlLzEuOC4xL2Jvb3RzdHJhcC10YWJs
ZS5taW4uY3NzXCI+XG48L2hlYWQ+XG48Ym9keT5cbjxkaXYgY2xhc3M9XCJtb2Rh
bCBmYWRlXCIgaWQ9XCJpbWFnZW1vZGFsXCIgdGFiaW5kZXg9XCItMVwiIHJvbGU9
XCJkaWFsb2dcIiBhcmlhLWxhYmVsbGVkYnk9XCJteU1vZGFsTGFiZWxcIiBhcmlh
LWhpZGRlbj1cInRydWVcIj5cbiAgPGRpdiBjbGFzcz1cIm1vZGFsLWRpYWxvZ1wi
PlxuICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+ICAgICAgICAgICAg
ICBcbiAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1ib2R5XCI+XG4gICAgICBcdDxi
dXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiY2xvc2VcIiBkYXRhLWRpc21p
c3M9XCJtb2RhbFwiPjxzcGFuIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPiZ0aW1lczs8
L3NwYW4+PHNwYW4gY2xhc3M9XCJzci1vbmx5XCI+Q2xvc2U8L3NwYW4+PC9idXR0
b24+XG4gICAgICAgIDxpbWcgc3JjPVwiXCIgY2xhc3M9XCJpbWFnZXByZXZpZXdc
IiBzdHlsZT1cIndpZHRoOiAxMDAlO2hlaWdodDoxMDAlO1wiID5cbiAgICAgIDwv
ZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuPHNjcmlwdD5cbiQo
ZnVuY3Rpb24oKSB7XG5cdFx0JCgnLnBvcCcpLm9uKCdjbGljaycsIGZ1bmN0aW9u
KCkge1xuXHRcdFx0JCgnLmltYWdlcHJldmlldycpLmF0dHIoJ3NyYycsICQodGhp
cykuZmluZCgnaW1nJykuYXR0cignc3JjJykpO1xuXHRcdFx0JCgnI2ltYWdlbW9k
YWwnKS5tb2RhbCgnc2hvdycpOyAgIFxuXHRcdH0pO1x0XHRcbn0pO1xuPC9zY3Jp
cHQ+XG48ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XG4gIDxoMj5QYWdlU3BlZWQg
SW5zaWdodHM8L2gyPlxuICA8cD48YSBocmVmPVwiaHR0cHM6Ly9kZXZlbG9wZXJz
Lmdvb2dsZS5jb20vc3BlZWQvZG9jcy9pbnNpZ2h0cy9hYm91dD9obD1ydS1SVSZ1
dG1fc291cmNlPVBTSSZ1dG1fbWVkaXVtPWluY29taW5nLWxpbmsmdXRtX2NhbXBh
aWduPVBTSVwiPlx1MDQxNFx1MDQzNVx1MDQ0Mlx1MDQzMFx1MDQzYlx1MDQ0Y1x1
MDQzZFx1MDQzNVx1MDQzNSBcdTA0M2UgXHUwNDQxXHUwNDM1XHUwNDQwXHUwNDMy
XHUwNDM4XHUwNDQxXHUwNDM1PC9hPjwvcD4gICAgICAgICAgICBcbiAgPHRhYmxl
IGNsYXNzPVwidGFibGUgdGFibGUtYm9yZGVyZWRcIiBkYXRhLXNvcnQtbmFtZT1c
InNpdGVcIiBkYXRhLXNvcnQtb3JkZXI9XCJhc2NcIiBkYXRhLXRvZ2dsZT1cInRh
YmxlXCI+XG4gICAgPHRoZWFkPlxuICAgICAgPHRyPlxuICAgICAgICA8dGggZGF0
YS1maWVsZD1cInNpdGVcIiBkYXRhLWFsaWduPVwibGVmdFwiIGRhdGEtc29ydGFi
bGU9XCJ0cnVlXCI+XHUwNDIxXHUwNDMwXHUwNDM5XHUwNDQyPC90aD5cbiAgICAg
ICAgPHRoIGRhdGEtZmllbGQ9XCJtc3BlZWRcIiBkYXRhLWFsaWduPVwiY2VudGVy
XCIgZGF0YS1zb3J0YWJsZT1cInRydWVcIj5Nb2JpbGU8YnI+c3BlZWQ8L3RoPlxu
ICAgICAgICA8dGggZGF0YS1maWVsZD1cIm11c2FiaWxpdHlcIiBkYXRhLWFsaWdu
PVwiY2VudGVyXCIgZGF0YS1zb3J0YWJsZT1cInRydWVcIj5Nb2JpbGU8YnI+dXNh
YmlsaXR5PC90aD5cbiAgICAgICAgPHRoIGRhdGEtZmllbGQ9XCJtc2NyZWVuc2hv
dFwiIGRhdGEtYWxpZ249XCJjZW50ZXJcIiBkYXRhLXNvcnRhYmxlPVwidHJ1ZVwi
Pk1vYmlsZTxicj5zY3JlZW5zaG90PC90aD5cbiAgICAgICAgPHRoIGRhdGEtZmll
bGQ9XCJkdXNhYmlsaXR5XCIgZGF0YS1hbGlnbj1cImNlbnRlclwiIGRhdGEtc29y
dGFibGU9XCJ0cnVlXCI+RGVza3RvcDxicj5zcGVlZDwvdGg+XG4gICAgICAgIDx0
aCBkYXRhLWZpZWxkPVwiZHNjcmVlbnNob3RcIiBkYXRhLWFsaWduPVwiY2VudGVy
XCIgZGF0YS1zb3J0YWJsZT1cInRydWVcIj5EZXNrdG9wPGJyPnNjcmVlbnNob3Q8
L3RoPlxuICAgICAgPC90cj5cbiAgICA8L3RoZWFkPlxuICAgIDx0Ym9keT5cbiIs
InJlc3VsdHNBcHBlbmQiOiJcbjwvdGJvZHk+XG48L3RhYmxlPlxuPHAgYWxpZ249
XCJyaWdodFwiPjxmb250IGZhY2U9XCJtb25vc3BhY2VcIiBzaXplPVwiMlwiIGNv
bG9yPVwic2lsdmVyXCI+PGk+UGFyc2VkIGJ5IDxhIGhyZWY9XCJodHRwOi8vYS1w
YXJzZXIuY29tL1wiPkEtUGFyc2VyPC9hPi48L2k+PC9mb250PjwvcD4gXG48L2Rp
dj5cbjwvYm9keT5cbjwvaHRtbD4iLCJxdWVyeUJ1aWxkZXJzIjpbXSwicmVzdWx0
c0J1aWxkZXJzIjpbXSwiY29uZmlnT3ZlcnJpZGVzIjpbXSwicnVuVGFza09uQ29t
cGxldGUiOm51bGwsInVzZVJlc3VsdHNGaWxlQXNRdWVyaWVzRmlsZSI6ZmFsc2Us
InJ1blRhc2tPbkNvbXBsZXRlQ29uZmlnIjoiZGVmYXVsdCIsInRvb2xzSlMiOiIi
fX0=Результат
Мы получим страницу, которая будет выглядеть примерно так:
Посмотреть "вживую"
Примечание. PageSpeed отдает скриншоты в довольно плохом качестве, поэтому они могут дать только общее представление о том, как выглядит страница при просмотре в уменьшенном виде.
