{"id":5174,"date":"2023-01-20T07:19:53","date_gmt":"2023-01-20T07:19:53","guid":{"rendered":"https:\/\/www.epsilondelta.co\/blog\/?p=5174"},"modified":"2024-05-22T09:06:25","modified_gmt":"2024-05-22T09:06:25","slug":"monitoring-spa-pwa-using-gemini","status":"publish","type":"post","link":"https:\/\/www.epsilondelta.co\/blog\/monitoring-spa-pwa-using-gemini\/","title":{"rendered":"Monitoring SPA\/PWA using Gemini"},"content":{"rendered":"\n

Traditional RUM tools Limitations<\/h2>\n\n\n\n

Traditional RUM tools measure the core web vitals and other speed parameters for the HTML. In Single page Apps (SPA) and Progressive Web Apps (PWA), the browser sends an initial GET request to the server, which sends back a html file, Depending on the architecture, the browser either renders the page or makes an AJAX\/FETCH request for data, and the server responds by sending the data in json format. The data gets rendered on the client\u2019s screen through the javascript.<\/p>\n\n\n\n

\"SPA<\/figure>\n\n\n\n

However, from the second page onwards, there are only the ajax\/ fetch API calls which return the json object. The javascript in the memory will then render the page. This is also called “soft routing\u201d.  Because there is no html downloaded from the server for second request onwards, traditional RUM tools aren\u2019t able to monitor the speed parameters of SPA and PWA websites loaded through the soft routing. For such pages, the traditional RUM tools will show the ajax\/ fetch api load times only, with no screen painting related data. However, Gemini measures these soft routes in the same way as a normal website. Gemini detects the First Contentful Paint (FCP) and the real user Speed Index in the soft operations as well.<\/p>\n\n\n\n

Monitoring SPA\/PWA soft route using Gemini<\/h2>\n\n\n\n

As we see in the image below, Gemini users can track the Speed Index and First Contentful Paint (StartRender) of SPA and PWA similar to traditional webpages. Users can also select specifically the “soft route” options if they only want to track them.<\/p>\n\n\n\n

\"First<\/figure>\n\n\n\n

As we see in the image below, Gemini can directly show the percentage of load and soft route requests in a single graph. This is a good way of checking if SPA or PWA architecture is working as desired. More the percent of soft route pages, better the operational efficiency and faster the user experience.<\/p>\n\n\n\n

\"Gemini<\/figure>\n\n\n\n

As shown in the image below, Gemini also tracks ajax\/ fetch API requests and their real user load time. Depending on the requirement, users can choose between soft route, Load or all requests.<\/p>\n\n\n\n

\"Gemini<\/figure>\n\n\n\n

Users can also track JavaScript errors from the soft routed operations, including the page name, with the choice of selecting between load, soft route, or all, as shown in the image below.<\/p>\n\n\n\n

\"Gemini<\/figure>\n\n\n\n

Gemini can also track blocking samples in SPA\/PWA soft routes, as we see in the image below. Depending on the requirement of users they can choose between Soft Route or Load or all requests.<\/p>\n\n\n\n

\"Gemini<\/figure>\n\n\n\n

Users can audit the page waterfall in the online user journey and detect page waterfall issues to correct the user experience with the choice of selecting between load, soft route, or both, as shown in the image below.<\/p>\n\n\n\n

\"Gemini<\/figure>\n","protected":false},"excerpt":{"rendered":"

https:\/\/www.epsilondelta.co\/blog\/monitoring-spa-pwa-using-gemini\/
\nMonitoring SPA\/PWA using Gemini – Epsilon delta 20
\nTraditional RUM tools Limitations Traditional RUM tools measure the core web vitals and other speed parameters for the HTML. In Single page Apps (SPA) and Progressive Web Apps (PWA), the browser sen\u2026<\/p>\n","protected":false},"author":2,"featured_media":6308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[1],"tags":[99,111,110,112,101,109],"class_list":["post-5174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sitespeedimprovementtipsonepsilondeltablog","tag-epsilondelta","tag-gemini","tag-pwa","tag-rum","tag-sitespeed","tag-spa"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/posts\/5174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/comments?post=5174"}],"version-history":[{"count":5,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/posts\/5174\/revisions"}],"predecessor-version":[{"id":6309,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/posts\/5174\/revisions\/6309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/media\/6308"}],"wp:attachment":[{"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/media?parent=5174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/categories?post=5174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.epsilondelta.co\/blog\/wp-json\/wp\/v2\/tags?post=5174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}