{"id":2148,"date":"2018-03-15T19:36:18","date_gmt":"2018-03-15T19:36:18","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2148"},"modified":"2019-06-03T21:48:19","modified_gmt":"2019-06-03T21:48:19","slug":"improved-perceived-performance-with-skeleton-screens","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens","title":{"rendered":"Improved Perceived Performance with Skeleton Screens"},"content":{"rendered":"<p>Skeleton screens&#8230; You might think they sound a little scary and or that they&#8217;re hard to implement, but what if I told you that they are actually quite simple to make. Once added to your app, skeleton screens become an awesome feature to make your app feel incredibly fast.<\/p>\n<p>When building an app, you&#8217;re always making sure that you are doing everything correctly from a technical perspective to ensure great performance. But another, often ignored part of performance is called perceived performance. Perceived performance is how fast an action appears to happen to the user.  Skeleton screens are a great way to improve the perceived performance of your app, when combined with traditional optimizations (lazy loading, code splitting, etc).<\/p>\n<p>Let&#8217;s dive a little deeper into what skeleton screens are, why they are better than traditional loading spinners, and how Ionic makes it easy to use them!<\/p>\n<p><!--more--><\/p>\n<h3>Skeleton screens, not a scary movie<\/h3>\n<p>You have probably seen skeleton screens before if you have used Facebook, Slack or Medium, but let&#8217;s go into detail about what they are. We can think of skeleton screens as rendering the \u201cskeleton\u201d or a \u201cmockup\u201d of content before it has actually loaded. For example, here&#8217;s what Medium does:<\/p>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/medium.mp4\"><\/video>\n        <\/div>\n<p>As you can see, Medium is rendering some grey bars where content will be once it has loaded and also renders a grey box where the image will be once it has loaded.<\/p>\n<p>Another good example is Facebook. They make heavy use of skeleton screens in their native app and web app. They use a similar implementation to Medium, rendering a Skeleton Screen where content will eventually be:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook.png\"><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"300\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-169x300.png\" alt=\"\" class=\"aligncenter size-medium wp-image-2151 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-169x300.png 169w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-577x1024.png 577w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook.png 640w\" data-sizes=\"auto, (max-width: 169px) 100vw, 169px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 169px; --smush-placeholder-aspect-ratio: 169\/300;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"300\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-169x300.png\" alt=\"\" class=\"aligncenter size-medium wp-image-2151\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-169x300.png 169w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook-577x1024.png 577w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/facebook.png 640w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/noscript><\/a><\/p>\n<h3>That&#8217;s coo&#8230;but why?<\/h3>\n<p>As we mentioned above, skeleton screens can be better at increasing perceived performance than loading spinners, but why?<\/p>\n<p>Let&#8217;s consider an app that only uses loading indicators and look at how it could benefit from using skeleton screens.<\/p>\n<p><strong>Loading Indicator<\/strong><\/p>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/loading-spinner-ionicTrim.mp4\"><\/video>\n        <\/div>\n<p><strong>Skeleton screen<\/strong><br \/>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton-screen-ionicTrim.mp4\"><\/video>\n        <\/div><\/p>\n<p>The page using a skeleton screen has several advantages here that lead to a better experience including:<\/p>\n<ul>\n<li>It feels faster by giving an indication of what the content is going to look like before it has loaded.<\/li>\n<li>We never block the user from interacting with the app. The user is free to scroll and interact with the app even while the content is still being loaded.<\/li>\n<li>The page using a loading indicator is a very jarring experience as it flashes from a loading spinner to the fully loaded page. Whereas the page using skeleton screens provides a much smoother experience when the content loads.<\/li>\n<\/ul>\n<h3>Sweet, can I haz now?<\/h3>\n<p>Skeleton screens are pretty simple to make with plain HTML and a little CSS. Here is an example of a simple <a href=\"https:\/\/stackblitz.com\/edit\/ionic-skeleton-screen\">Skeleton Screen in Ionic-Angular<\/a>.<\/p>\n<p>In the above StackBlitz example, we hide the real list of users and display the skeleton list until the users have loaded using <code>*ngIf<\/code>. In our skeleton item we have the same DOM as our real item, an <code>h2<\/code>, <code>h3<\/code> and <code>p<\/code> element.<\/p>\n<pre><code class=\"language-html\">&lt;!--\n   Our users list which will be rendered once\n   our users have loaded\n --&gt;\n  &lt;ion-list *ngIf=&quot;users&quot;&gt;\n    &lt;ion-item *ngFor=&quot;let user of users&quot;&gt;\n      &lt;h2&gt;{{user.name}}&lt;\/h2&gt;\n      &lt;h3&gt;Email: {{user.email}}&lt;\/h3&gt;\n      &lt;p&gt;Company: {{user.company.name}}&lt;\/p&gt;\n    &lt;\/ion-item&gt;\n  &lt;\/ion-list&gt;\n\n  &lt;ion-list *ngIf=&quot;!users&quot;&gt;\n    &lt;ion-item *ngFor=&quot;let fake of fakeUsers&quot; class=&quot;fakeItem&quot;&gt;\n      &lt;h2&gt;&lt;\/h2&gt;\n      &lt;h3&gt;&lt;\/h3&gt;\n      &lt;p&gt;&lt;\/p&gt;\n    &lt;\/ion-item&gt;\n  &lt;\/ion-list&gt;\n<\/code><\/pre>\n<p>In our Sass we give each element a height, background color, opacity and a bit of margin. We then give each element a width based on the normal width of the element once the real users are loaded.<\/p>\n<pre><code class=\"language-scss\">.fakeItem {\n h2, h3, p {\n   background-color: lightgrey;\n   opacity: 0.5;\n   height: 1em;\n   margin-top: 10px;\n }\n\n h2 {\n   width: 35%;\n }\n\n h3 {\n   width: 40%;\n } \n\n p {\n   width: 60%;\n }\n}\n\n<\/code><\/pre>\n<p>This renders a skeleton screen that is extremely similar in layout to the actual content of the page.<\/p>\n<h3>Upcoming <code>ion-skeleton-text<\/code> component<\/h3>\n<p>We are always searching for ways to make things easy and in 4.0 of Ionic, we have a new web component called <code>ion-skeleton-text<\/code>. This will make adding skeleton screens even easier!<\/p>\n<pre><code class=\"language-html\">&lt;ion-item&gt;\n  &lt;ion-skeleton-text width=&quot;40px&quot;&gt;&lt;\/ion-skeleton-text&gt; \n&lt;\/ion-item&gt; \n<\/code><\/pre>\n<p>The width property here being used in the same way as our CSS <code>width<\/code> property in the previous example.<\/p>\n<h3>Parting words<\/h3>\n<p>Skeleton screens can be a very powerful way to increase the perceived performance of your  and make your app feel incredibly fast. When combined with traditional performance optimizations, skeleton screens can take your app to the next level of performance. As you can see skeleton screens are very easy to do in ionic-angular today, and with the next version of Ionic it will only get easier. Implement skeleton screens into your app today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Skeleton screens&#8230; You might think they sound a little scary and or that they&#8217;re hard to implement, but what if I told you that they are actually quite simple to make. Once added to your app, skeleton screens become an awesome feature to make your app feel incredibly fast. When building an app, you&#8217;re always [&hellip;]<\/p>\n","protected":false},"author":36,"featured_media":2156,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[60,23,68,79],"class_list":["post-2148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-angular","tag-framework","tag-mobile-development","tag-performance"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Improved Perceived Performance with Skeleton Screens - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improved Perceived Performance with Skeleton Screens\" \/>\n<meta property=\"og:description\" content=\"Skeleton screens&#8230; You might think they sound a little scary and or that they&#8217;re hard to implement, but what if I told you that they are actually quite simple to make. Once added to your app, skeleton screens become an awesome feature to make your app feel incredibly fast. When building an app, you&#8217;re always [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-15T19:36:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-03T21:48:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"468\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Justin Willis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Justinwillis96\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Willis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\"},\"author\":{\"name\":\"Justin Willis\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74\"},\"headline\":\"Improved Perceived Performance with Skeleton Screens\",\"datePublished\":\"2018-03-15T19:36:18+00:00\",\"dateModified\":\"2019-06-03T21:48:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\"},\"wordCount\":715,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif\",\"keywords\":[\"Angular\",\"Framework\",\"mobile development\",\"performance\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\",\"url\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\",\"name\":\"Improved Perceived Performance with Skeleton Screens - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif\",\"datePublished\":\"2018-03-15T19:36:18+00:00\",\"dateModified\":\"2019-06-03T21:48:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif\",\"width\":1280,\"height\":468},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improved Perceived Performance with Skeleton Screens\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74\",\"name\":\"Justin Willis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"caption\":\"Justin Willis\"},\"sameAs\":[\"https:\/\/x.com\/@Justinwillis96\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/justinwillis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Improved Perceived Performance with Skeleton Screens - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens","og_locale":"en_US","og_type":"article","og_title":"Improved Perceived Performance with Skeleton Screens","og_description":"Skeleton screens&#8230; You might think they sound a little scary and or that they&#8217;re hard to implement, but what if I told you that they are actually quite simple to make. Once added to your app, skeleton screens become an awesome feature to make your app feel incredibly fast. When building an app, you&#8217;re always [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens","og_site_name":"Ionic Blog","article_published_time":"2018-03-15T19:36:18+00:00","article_modified_time":"2019-06-03T21:48:19+00:00","og_image":[{"width":1280,"height":468,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","type":"image\/gif"}],"author":"Justin Willis","twitter_card":"summary_large_image","twitter_creator":"@Justinwillis96","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Justin Willis","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens"},"author":{"name":"Justin Willis","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74"},"headline":"Improved Perceived Performance with Skeleton Screens","datePublished":"2018-03-15T19:36:18+00:00","dateModified":"2019-06-03T21:48:19+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens"},"wordCount":715,"commentCount":25,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","keywords":["Angular","Framework","mobile development","performance"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens","url":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens","name":"Improved Perceived Performance with Skeleton Screens - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","datePublished":"2018-03-15T19:36:18+00:00","dateModified":"2019-06-03T21:48:19+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","width":1280,"height":468},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/improved-perceived-performance-with-skeleton-screens#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Improved Perceived Performance with Skeleton Screens"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74","name":"Justin Willis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","caption":"Justin Willis"},"sameAs":["https:\/\/x.com\/@Justinwillis96"],"url":"https:\/\/ionic.io\/blog\/author\/justinwillis"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/03\/skeleton.gif","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2148"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2148\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2156"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}