{"id":5041,"date":"2023-03-31T12:16:28","date_gmt":"2023-03-31T16:16:28","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5041"},"modified":"2023-04-13T15:29:07","modified_gmt":"2023-04-13T19:29:07","slug":"ionic-capacitor-the-best-path-for-performance","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance","title":{"rendered":"Ionic &amp; Capacitor: The Best Path For Performance"},"content":{"rendered":"\n<p>As a web developer in a previous life, one question that inevitably came up during our discussions on new projects and technologies was, \u201cAre the web technologies we\u2019re choosing performant?\u201d This usually led to anecdotal debates between developers about what they considered to be the best tools in the industry, who developed what technology to be the best, and the comparison of countless articles claiming to have found THE most performant web technology.&nbsp;<\/p>\n\n\n\n<p>The problem with these types of conversations (at least in my experience) is that they often don\u2019t contain any real-world metrics and, if they do, those metrics are comparing complex web applications without considering the development team and technical architectures behind them.<\/p>\n\n\n\n<p>As a new Developer Advocate for Ionic, I have consistently seen these types of questions\/conversations from our developer communities around performance and how the Ionic Framework and Capacitor perform among other web frameworks or technologies. In an effort to address some of these conversations, I wanted to try and answer the questions:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is the Ionic Framework and Capacitor performant for web development?&nbsp;<\/li>\n\n\n\n<li>Is there a way to measure the performance of an application without having to deal with complex architectures?&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>I sought to answer these questions by developing a simple application that utilizes the Ionic Framework and Capacitor and measures a few key metrics.<\/p>\n\n\n\n<p>Before we dive into the application and the metrics I tested, let\u2019s talk about the Ionic Framework and Capacitor.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Ionic Framework<\/h1>\n\n\n\n<p>A common misconception (and one that I was guilty of before starting at Ionic) was combining the Ionic Framework WITH Capacitor. However, it\u2019s important to understand that Ionic as a framework and Capacitor are two different things.<\/p>\n\n\n\n<p>The Ionic Framework is an open-source user interface toolkit for building modern, high-performance cross-platform applications from a single codebase. It\u2019s essentially the user interface components that are framework agnostic so you can use it to build user interfaces in Angular, React, Vue, or even plain vanilla JavaScript. You can use the Ionic Framework with or without Capacitor, but we will be utilizing them together in our demo application to see if it performs as intended.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Capacitor<\/h1>\n\n\n\n<p>Capacitor is an open-source cross-platform native runtime for web applications that allows you to create iOS, Android, and Progressive Web Applications with JavaScript, HTML, and CSS. Capacitor can be utilized in any existing web application and gives you access to core Native APIs. With Capacitor, you can also extend your own APIs in the native platforms that you want to target. However, we\u2019ll be using Capacitor to deploy a progressive web application to see how it performs.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Measuring Web Application Performance<\/h1>\n\n\n\n<p>There are a few ways to <a href=\"https:\/\/ionic.io\/blog\/how-to-improve-app-performance\">measure web application performance<\/a> via startup and runtime performance metrics.<\/p>\n\n\n\n<p>Key startup performance metrics can include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Time for resources to download<\/li>\n\n\n\n<li>Time for the app to show content<\/li>\n\n\n\n<li>Time for the app to become interactive<\/li>\n<\/ul>\n\n\n\n<p>Key runtime performance metrics can include<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code execution time<\/li>\n\n\n\n<li>Complex layouts\/layout thrashing<\/li>\n\n\n\n<li>Animation of non-performant properties<\/li>\n<\/ul>\n\n\n\n<p>Metrics, especially in web development, can vary and can be fairly subjective depending upon the project, but this is a good starting point to demonstrate if a web application is performing well.<\/p>\n\n\n\n<p>To test the metrics above, we\u2019ll be using Lighthouse, which is a Chromium-based browser that will assess the above metrics and offer other metrics as well as suggestions for improvement.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Diving Into The Web Application: Ionic Video Streaming App<\/h1>\n\n\n\n<p>The web application that I\u2019ve created to test the performance of the Ionic Framework and Capacitor is a basic <a href=\"https:\/\/d2ze2v3l97gjc4.cloudfront.net\/videos\">Ionic video streaming application<\/a> that I developed using Angular. It\u2019s similar to many video streaming applications where you can pick a video and watch it, but it contains Ionic-specific videos. I chose to create this type of application because it reflected a real-world use case and it can help put some stress on our application during our tests.&nbsp;<\/p>\n\n\n\n<p>The web application is hosted on Amazon Web Services utilizing a serverless approach and is deployed via Cloudfront to maximize availability. I chose this method because it is an accessible way to launch an application, especially for developers who may not be familiar with more traditional application deployments.<\/p>\n\n\n\n<p>It\u2019s important to note that this application does not store the videos locally and utilizes libraries like <a href=\"https:\/\/github.com\/video-dev\/hls.js\/\">hls.js<\/a> to make it function. The code for the demo project can be found <a href=\"https:\/\/github.com\/ionic-team\/ionic-performance-demo\">here<\/a>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Metrics<\/h1>\n\n\n\n<p>Let\u2019s dive into Lighthouse and see how the app performs on the first pass with the overall scores:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh5.googleusercontent.com\/AuWu06krwYvOaGvVnO6Gq7cMOUgTXCCwGHEmK3QluS_Zc3YvY5MSKBwEM1UZMdvOoFh0ARTKL4iKtiQP9WWQMYdRVHEaFrZzgwnteBCsk6S0rfE78JNlOouF5-VAj2wp-rsEGmqcJ8KfufYo2Y0WJhk\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/AuWu06krwYvOaGvVnO6Gq7cMOUgTXCCwGHEmK3QluS_Zc3YvY5MSKBwEM1UZMdvOoFh0ARTKL4iKtiQP9WWQMYdRVHEaFrZzgwnteBCsk6S0rfE78JNlOouF5-VAj2wp-rsEGmqcJ8KfufYo2Y0WJhk\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>Here are the more detailed performance metrics:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh6.googleusercontent.com\/-kJI6N0N1uA1SHNY0-jbmVUJOYJjIHNgIMgTd6k5Wcczu1Gqac7ILjxqwTLThgISPyJOosAA1S08P03jJI_YgFyF_4mvTuaIyh-7lLaYkZ6yr0gE8WbjFwWvsOYDkbkYkE_dinanAOSrtVTJTDG9d4g\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-kJI6N0N1uA1SHNY0-jbmVUJOYJjIHNgIMgTd6k5Wcczu1Gqac7ILjxqwTLThgISPyJOosAA1S08P03jJI_YgFyF_4mvTuaIyh-7lLaYkZ6yr0gE8WbjFwWvsOYDkbkYkE_dinanAOSrtVTJTDG9d4g\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>Based on the overall performance and the detailed metrics, it looks like this demo video streaming application performed extremely well, especially for a first pass! However, there are some moderate scores, so let\u2019s analyze the data to see if the scores are related to Ionic Framework and Capacitor or other factors.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Analysis<\/h1>\n\n\n\n<p>The three areas that showed moderate performance were SEO, First Contentful Paint, and Largest Contentful Paint. While moderate performance scores for SEO would make sense for a demo application, First Contentful Paint and Largest Contentful Paint are Key Startup Performance Metrics, so let\u2019s look at the speeds and the recommendations from Lighthouse.<\/p>\n\n\n\n<p>Based on the numbers for First Contentful Paint and Largest Contentful Paint (1.0 and 1.7 seconds, respectively) it looks like for pure speed, our application exceeded Lighthouse\u2019s benchmarks (1.8 and 2.5 seconds, respectively). This begs the question: If the application exceeded the timing benchmarks, then why is it considered moderate for both areas? The <em>Opportunities<\/em> section paints a clearer picture:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/oTgdmwyNXcV7O5oZrbV_nW8FwS4u4miScJ3hDAbKoyOWxQnVGx_G1VjiokvxULRLTZzbWxpS0RKWaG8Bt3EJ28do2MaXZXj0WwTvQKU8s87GKOYwrX5c__l_URVnTKTZu7eeWcthd_CC_uy6uarkbEI\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/oTgdmwyNXcV7O5oZrbV_nW8FwS4u4miScJ3hDAbKoyOWxQnVGx_G1VjiokvxULRLTZzbWxpS0RKWaG8Bt3EJ28do2MaXZXj0WwTvQKU8s87GKOYwrX5c__l_URVnTKTZu7eeWcthd_CC_uy6uarkbEI\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>Unused JavaScript played a significant role in the moderate metrics score and, upon further investigation, the biggest culprits were the use of hls.js, ngx-videogular (a library I attempted using but didn\u2019t remove), as well as a Chrome extension that I use for screen recording. The next opportunities had to do with image sizes and preloading images which make sense as I was unable to acquire uniform image sizes for the project. Based on this feedback, I decided to see what would happen if I fixed the issues.<\/p>\n\n\n\n<p>After removing the ngx-videogular library, disabling Chrome extensions, and using unified image sizes, I saw a drastic improvement in the overall metrics:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/so4uCvyupdC74bLOAMls6dRzFq-5j1U5SGKC5A_01U2LA7JJJLkn3u0yV0mZhkW8vz9pPD62GGZ6rl6qPZyH2JCZBdzk4qMrNzXjWiNPWCWwHsaNu6zMtknGynM8kUDegfrHy3Wet8CZE9LWRkOhrig\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/so4uCvyupdC74bLOAMls6dRzFq-5j1U5SGKC5A_01U2LA7JJJLkn3u0yV0mZhkW8vz9pPD62GGZ6rl6qPZyH2JCZBdzk4qMrNzXjWiNPWCWwHsaNu6zMtknGynM8kUDegfrHy3Wet8CZE9LWRkOhrig\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>As well as the detailed performance metrics:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/cwreHXS49cVMvvolbrbxqt_h-gbQQ1N28OfcDMeylIYfiYjFv7_n2KjQwISGJ4Bg-VTLoKuPOTbrIi9MHkOdx8BMbZIGUC9hYfCAlEkDy6CN08owWrd12uuxheS3LiOeJCjVRyFvva3huGXmzfnZAaw\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/cwreHXS49cVMvvolbrbxqt_h-gbQQ1N28OfcDMeylIYfiYjFv7_n2KjQwISGJ4Bg-VTLoKuPOTbrIi9MHkOdx8BMbZIGUC9hYfCAlEkDy6CN08owWrd12uuxheS3LiOeJCjVRyFvva3huGXmzfnZAaw\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>The takeaway from these opportunities is that my system and my choices played a significant role in Lighthouse testing. By removing the unused video library, disabling Chrome extensions, and taking the time to get uniform images, my application had a much higher score. The other key takeaway is that none of the opportunities referenced Ionic Framework or Capacitor. If anything, they performed <em>better <\/em>than expected given some of my development choices.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Conclusion<\/h1>\n\n\n\n<p>Based on the testing, the answer is clear: Ionic Framework and Capacitor are highly performant technologies- even when utilizing video streaming libraries and running a video streaming application. However, even the most performant technologies require developers to make calculated choices during development to keep those tools running the way they are supposed to. In my case, Ionic Framework and Capacitor helped mitigate some of my less calculated choices and kept my app running as smoothly as possible!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to building a performant app, how do Ionic Framework and Capacitor stack up?<\/p>\n","protected":false},"author":103,"featured_media":5071,"comment_status":"open","ping_status":"open","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":[1,123],"tags":[151,23,33],"class_list":["post-5041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-perspectives","tag-capacitor","tag-framework","tag-pwa"],"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>Ionic &amp; Capacitor: The Best Path For Performance - Ionic Blog<\/title>\n<meta name=\"description\" content=\"When it comes to building a performant app, there are tons of options. How do Ionic Framework &amp; Capacitor stack up?\" \/>\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\/ionic-capacitor-the-best-path-for-performance\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic &amp; Capacitor: The Best Path For Performance\" \/>\n<meta property=\"og:description\" content=\"When it comes to building a performant app, there are tons of options. How do Ionic Framework &amp; Capacitor stack up?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-31T16:16:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-13T19:29:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Logan Brade\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loganbrade\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Logan Brade\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\"},\"author\":{\"name\":\"Logan Brade\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562\"},\"headline\":\"Ionic &amp; Capacitor: The Best Path For Performance\",\"datePublished\":\"2023-03-31T16:16:28+00:00\",\"dateModified\":\"2023-04-13T19:29:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\"},\"wordCount\":1202,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png\",\"keywords\":[\"Capacitor\",\"Framework\",\"PWA\"],\"articleSection\":[\"All\",\"Perspectives\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\",\"name\":\"Ionic &amp; Capacitor: The Best Path For Performance - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png\",\"datePublished\":\"2023-03-31T16:16:28+00:00\",\"dateModified\":\"2023-04-13T19:29:07+00:00\",\"description\":\"When it comes to building a performant app, there are tons of options. How do Ionic Framework & Capacitor stack up?\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic &amp; Capacitor: The Best Path For Performance\"}]},{\"@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\/07a04c81f6b3180076d1a6ac967bc562\",\"name\":\"Logan Brade\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"caption\":\"Logan Brade\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/loganbrade\/\",\"https:\/\/x.com\/loganbrade\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/logan-brade\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic &amp; Capacitor: The Best Path For Performance - Ionic Blog","description":"When it comes to building a performant app, there are tons of options. How do Ionic Framework & Capacitor stack up?","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\/ionic-capacitor-the-best-path-for-performance","og_locale":"en_US","og_type":"article","og_title":"Ionic &amp; Capacitor: The Best Path For Performance","og_description":"When it comes to building a performant app, there are tons of options. How do Ionic Framework & Capacitor stack up?","og_url":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance","og_site_name":"Ionic Blog","article_published_time":"2023-03-31T16:16:28+00:00","article_modified_time":"2023-04-13T19:29:07+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","type":"image\/png"}],"author":"Logan Brade","twitter_card":"summary_large_image","twitter_creator":"@loganbrade","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Logan Brade","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance"},"author":{"name":"Logan Brade","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562"},"headline":"Ionic &amp; Capacitor: The Best Path For Performance","datePublished":"2023-03-31T16:16:28+00:00","dateModified":"2023-04-13T19:29:07+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance"},"wordCount":1202,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","keywords":["Capacitor","Framework","PWA"],"articleSection":["All","Perspectives"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance","url":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance","name":"Ionic &amp; Capacitor: The Best Path For Performance - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","datePublished":"2023-03-31T16:16:28+00:00","dateModified":"2023-04-13T19:29:07+00:00","description":"When it comes to building a performant app, there are tons of options. How do Ionic Framework & Capacitor stack up?","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-capacitor-the-best-path-for-performance#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic &amp; Capacitor: The Best Path For Performance"}]},{"@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\/07a04c81f6b3180076d1a6ac967bc562","name":"Logan Brade","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","caption":"Logan Brade"},"sameAs":["https:\/\/www.linkedin.com\/in\/loganbrade\/","https:\/\/x.com\/loganbrade"],"url":"https:\/\/ionic.io\/blog\/author\/logan-brade"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/ionic-and-capacitor-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5041","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\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5041"}],"version-history":[{"count":5,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5041\/revisions"}],"predecessor-version":[{"id":5117,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5041\/revisions\/5117"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5071"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}