{"id":511572,"date":"2022-05-23T17:18:32","date_gmt":"2022-05-24T00:18:32","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&#038;p=511572"},"modified":"2022-05-23T17:18:32","modified_gmt":"2022-05-24T00:18:32","slug":"performance-tips","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips","title":{"rendered":"Performance Tips for ArcGIS API for JavaScript"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[10722,25002,473802],"tags":[472461,178472,23492],"arcuser_issues":[479252],"class_list":["post-511572","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-api-for-javascript","category-developers-corner","category-web-gis","tag-arcuser","tag-best-practices","tag-geodev","arcuser_issues-spring-2022"],"acf":{"short_description":"Tips to make your web applications more performant.","pdf":{"host_remotely":false,"file":511582,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"One of the goals of a web developer is to build performant web applications. Notice, that we said one of the goals. As developers, we shouldn\u2019t overprioritize performance optimization and neglect other user expectations. Users drive what we do. We should meet user needs while staying as performant as possible. These strategies can help make your web applications built with the ArcGIS API for JavaScript work better.\r\n<h2>Before You Begin<\/h2>\r\nThe rendering logic in JavaScript API is already optimized. Because the software fetches data efficiently, you should test the app on various devices first to understand its performance before diving into optimization. API performance is constantly being improved\u2014in terms of CPU and memory usage\u2014so using the most current release of the API can benefit your application\u2019s performance. If you start noticing performance issues when many features are in the map view, or if your app needs many visible layers, consider the recommendations in this article.\r\n<h2>Designing Your Map for Performance<\/h2>\r\nWhether using the ArcGIS Online or Enterprise Map Viewer to create a map and then loading it into your app, or constructing your map manually using JavaScript code, it\u2019s important to design the map for performance. This is where web mapping application optimization starts. A map designed for performance is one that loads only the data needed to make a meaningful visualization, at the right time. If you really understand both your data and your user\u2019s requirements for interacting with it, you can design a map that optimizes both performance and experience. Let\u2019s explore some tips to consider for accomplishing this.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":511642,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Reduce the Number of Features Displayed<\/h3>\r\nWith the fast rendering pipeline used by JavaScript API and the smart client-server implementation of feature services, you can render a shocking amount of data with speed that is often comparable to that of a desktop application. Often end users access applications on very resource-constrained devices or with limited network bandwidth, so it is important for some developers to optimize applications for this scenario. The following strategies will reduce the amount of data your application is working with, which can reduce network latency, rendering time, and the application\u2019s memory footprint.\r\n<ul>\r\n \t<li>Establish the minimum and maximum scale.<\/li>\r\n \t<li>Preprocess data when appropriate.<\/li>\r\n \t<li>Limit the map to the layers needed by the application.<\/li>\r\n \t<li>Use definition expressions to filter data displayed by layers.<\/li>\r\n \t<li>Only load the attributes you need.<\/li>\r\n<\/ul>\r\n<h3>Establish the Minimum and Maximum Scale<\/h3>\r\nThe number of features displayed impacts performance, especially on memory-constrained devices. When you set a minimum and maximum scale (also referred to as the visible scale range), a layer\u2019s features are displayed when the zoom level is within the set range. What layers should you show at each scale? When configuring the visible scale range of each layer, think about what features make sense to view at small and large scales. Can users distinguish between features at small scales? As you zoom out, it may become difficult to see more detailed information, or as you zoom in, information may become too coarse. Often the best way of determining the visible scale is by playing around with it and looking at the data through your end user\u2019s eyes.\r\n<h3>Preprocess Data When Appropriate<\/h3>\r\nUse the ArcGIS system to preprocess your data for display at small scales. At the country, state, or county level, it may be more useful to display the data as aggregated polygons as opposed to individual points. There are multiple ways to summarize data within polygons. Polygons can either be a standard geography such as a state boundary or they can be regularly divided into a grid or hexagons. If it is meaningful to summarize your data at a standard geography, calculate the summary statistic for each geography and thematically map each polygon according to its value.\r\n\r\nIf it doesn\u2019t make sense to summarize at a standard geography, an alternative is binning. Binning aggregates large amounts of point features into polygons called bins. A single bin represents all features within its boundaries and appears wherever at least one feature lies within it. For layers that contain thousands or millions of point features, binning vastly improves layer drawing performance. You can use ArcGIS Pro or ArcGIS Online to aggregate data and create summary layers. Use a scale dependency to display the summarized data at small scales and display individual features as the user zooms in. This approach only makes sense if your data is not constantly changing because each time your data changes, you will need to process the data again.\r\n<h3>Limit the Map to the Key Layers Needed<\/h3>\r\nAvoid authoring web maps with a dozen or more layers. A web map with many layers is usually a web map trying to address too many user needs in a single application. Breaking the content into different maps to build focused applications will better meet specific user needs. A good approach for doing this is to categorize your users into groups based on their role and data and application requirements. Then design maps for users with similar needs and create clean and easy-to-use mapping applications that target their use case. These applications can often streamline users\u2019 workflows while providing better performance because they work with less data.\r\n\r\nIf you must create a map with many layers, you may be able to squeeze a bit more performance out of it by loading the layers in your application as needed. Listing 1 shows how you could accomplish that. It loads the map, finds the layers needed when the application loads, and then loads the other layers as required.\r\n<h3>Use Definition Expressions to Filter the Data Displayed<\/h3>\r\nIf your application requirements are met using only a subset of the layer\u2019s features, set a definition expression on the layer. Definition expressions set on the layer are different from defining a client-side filter. When a definition expression is set on the layer, the server will only return the needed features.\r\n<h3>Load Only the Attributes Needed<\/h3>\r\nBy default, JavaScript API will only load the attributes it needs for visualization. This is done for performance reasons, because many datasets have a lot of attributes that are not used by the application. Sending many attributes to the client and storing them in memory can degrade map loading time. However, the application may need attributes in addition to the ones needed for display. For example, if you are building workflows that include client-side filtering, querying, or statistical calculations, you\u2019ll need all corresponding attributes available on the client. Developers sometimes make the mistake of using an asterick (*) to set the layer\u2019s outFields, which means all attributes are loaded. Instead, determine exactly which attributes are needed and explicitly set those attributes as outFields.\r\n<h2>Optimize Services<\/h2>\r\nImprove the performance of your application and the services it uses by employing the following techniques:\r\n<h3>Enable Control Cache<\/h3>\r\nOne of the best performance enhancements for public feature services is to enable the control cache. The JavaScript API uses a concept called feature tiles, which is like raster tiles but works with features rather than precooked images. It allows the JavaScript API to do cacheable queries when requesting data, so both the server-side data fetch and client-side display operations can be extremely efficient. Feature services hosted in ArcGIS Online can be cached, so requests do not have to go to the back-end database. (The ability to enable a similar cache will come to ArcGIS Enterprise in a future release.) Caches can be configured to be valid for between 30 seconds and 5 minutes. If data doesn\u2019t change frequently, set the cache to the maximum time so data can be retrieved as fast as possible.\r\n<h3>Precook Features into Vector Tile Layers<\/h3>\r\nFeature services often load as fast as vector tile layers when loaded using a laptop. That surprising fact is due to the fast rendering engine in JavaScript API and client-server optimizations for feature services. Displaying feature services\u2014as opposed to vector or raster tile layers\u2014is ideal because it allows you to build interactive workflows in your app. This is because all feature geometries and attributes are available on the client for use in any geometric, querying, filtering, or statistical operation.\r\n\r\nHowever, if end users are on more limited devices, you may not have the luxury of loading all features. To preserve a crisp display at any scale and minimize memory consumption, you can precook features into a vector tile layer. Interactivity will depend on a feature service used behind the scenes. Queries will go to the server rather than a client-side feature layer, but the display will be handled by the vector tile layer. When end users are using very resource-constrained devices or in low network bandwidth situations, consider precooking raster tiles as opposed to vector tiles. However, this will come at a cost. The raster tiles will not display as crisply as vector tiles and are not dynamic. For example, as the user rotates the map, the labels won\u2019t rotate.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":511652,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Optimize Application Design<\/h2>\r\nThere are several methods you can use to optimize your web mapping applications with a custom build geared toward your application. The PRPL pattern is a common method for making applications performant, especially on low-end devices and in regions with poor Internet connectivity.\r\n<ul>\r\n \t<li>Push critical resources<\/li>\r\n \t<li>Render as soon as possible<\/li>\r\n \t<li>Pre-cache assets<\/li>\r\n \t<li>Lazy load as needed<\/li>\r\n<\/ul>\r\n<h3>Push Critical Resources<\/h3>\r\nYou want to be able to push critical resources to your web application as soon as possible. These resources include JavaScript, CSS, images, fonts, or other assets needed up front for your application. You can leverage the rel=\u201dpreload\u201d attribute in your script and style tags. The browser will prioritize loading of these assets. Some build tooling will let you designate bundles with this attribute for the output HTML file. Most modern build tooling will create bundles for you so that your application will only request the required bundles on load.\r\n<h3>Render as Soon as Possible<\/h3>\r\nA side effect of pushing critical resources when an application starts is loading and rendering the initial route as soon as possible. This is also an area where you can leverage an app shell. An app shell is the minimum amount of HTML and CSS needed to display your page right away. It might not have the detailed layout but would display the bare minimum of the application. If the map takes up a significant region of your initial page, you could have an image of a map or globe displayed until the map loads. It does not have to be an exact image of the map you want the application to display; the placeholder can just indicate where a map will appear.\r\n<h3>Precache Assets<\/h3>\r\nIdeally, you want to limit the number of requests made to a server. Service workers, a script that runs in the background of the user\u2019s browser, can help with this. You can configure a service worker to cache resources, such as JavaScript, CSS, images, and fonts, so that on the next load, your application doesn\u2019t need to make extra requests. After the initial load, this means faster page loads on subsequent visits.\r\n<h3>Lazy Load<\/h3>\r\nOnce you have preloaded and cached critical resources in your application, you may want to lazy load the remaining resources. This doesn\u2019t necessarily need to be an initial route, but there are portions of your application\u2014such as charts, or even the map\u2014that are loaded at runtime.\r\n\r\nFor example, an application might display a list of locations by name. When a location is selected, a map is loaded displaying that location. In this case, you want to render that list as soon as possible, but you can lazy load the resources for the map later. This can be accomplished in a few ways including using dynamic imports of modules for when they are needed. You don\u2019t want to overuse dynamic imports because this could result in code being repeated in the bundles generated by dynamic imports.\r\n<h2>Conclusion<\/h2>\r\nThe best applications are built by developers that truly understand their end users and optimize their application\u2019s experience to focus on their users\u2019 requirements\u2014no more and no less. Using the techniques in this article, you can tune your map, the services it uses, and your application design to create the happy intersection of a good user experience and optimized performance. Learn more by reading the <a href=\"https:\/\/js.arcgis.com.\">ArcGIS API for JavaScript documentation<\/a>.\r\n\r\n&nbsp;"}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Improve data display for web maps<\/title>\n<meta name=\"description\" content=\"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Performance Tips for ArcGIS API for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/05\/performance_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips\",\n\t            \"name\": \"Improve data display for web maps\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2022-05-24T00:18:32+00:00\",\n\t            \"description\": \"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Performance Tips for ArcGIS API for JavaScript\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468\",\n\t            \"name\": \"Monica Pratt\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"caption\": \"Monica Pratt\"\n\t            },\n\t            \"description\": \"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/x.com\/ArcUser\"\n\t            ],\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Improve data display for web maps","description":"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.","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:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips","og_locale":"en_US","og_type":"article","og_title":"Performance Tips for ArcGIS API for JavaScript","og_description":"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/05\/performance_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips","name":"Improve data display for web maps","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2022-05-24T00:18:32+00:00","description":"Best practices for creating more performant web mapping applications that use the ArcGIS API for JavaScript.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/performance-tips#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Performance Tips for ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468","name":"Monica Pratt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","caption":"Monica Pratt"},"description":"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.","sameAs":["https:\/\/x.com\/ArcUser"],"url":""}]}},"sort_order":"15","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/511572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1031"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/511572\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=511572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=511572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=511572"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=511572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}