CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Widget Optimization | Elementor Developers</title> <meta name="generator" content="VuePress 1.9.10"> <link rel="icon" href="/docs/favicon.png"> <link rel="manifest" href="/docs/manifest.json"> <link rel="mask-icon" href="/docs/assets/img/logo.svg" color="#db3157"> <link rel="apple-touch-icon" href="/docs/assets/img/logo.svg"> <link rel="preconnect" href="https://elementor.com" crossorigin=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM+Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto"> <script type="text/javascript" src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" charset="UTF-8" data-cfasync="false" data-domain-script="31f0e3a0-7e21-4548-96da-7ae09f8d3f78"></script> <script>function OptanonWrapper(){}function insureCookieBanner(n,o){window.setTimeout(function(){window[n]?o(window[n]):insureCookieBanner(n,o)},800)}insureCookieBanner("OneTrust",function(n){OneTrust.LoadBanner()});</script> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://gtm.elementor.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NJK8HW'); </script> <meta name="description" content="Resources and tutorials for Elementor developers"> <meta name="theme-color" content="#db3157"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="msapplication-TileImage" content="/assets/img/logo.svg"> <meta name="msapplication-TileColor" content="#000000"> <link rel="preload" href="/docs/assets/css/0.styles.79554685.css" as="style"><link rel="preload" href="/docs/assets/js/app.4a037537.js" as="script"><link rel="preload" href="/docs/assets/js/2.32541751.js" as="script"><link rel="preload" href="/docs/assets/js/1.3d99b080.js" as="script"><link rel="preload" href="/docs/assets/js/308.264b9f59.js" as="script"><link rel="preload" href="/docs/assets/js/4.de33d348.js" as="script"><link rel="preload" href="/docs/assets/js/19.d9598f47.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.836effd9.js"><link rel="prefetch" href="/docs/assets/js/100.592bdef9.js"><link rel="prefetch" href="/docs/assets/js/101.642cd354.js"><link rel="prefetch" href="/docs/assets/js/102.d32dbf67.js"><link rel="prefetch" href="/docs/assets/js/103.30c9fa76.js"><link rel="prefetch" href="/docs/assets/js/104.b220f4d8.js"><link rel="prefetch" href="/docs/assets/js/105.ba82ff45.js"><link rel="prefetch" href="/docs/assets/js/106.d8661b4b.js"><link rel="prefetch" href="/docs/assets/js/107.04f3ba5b.js"><link rel="prefetch" href="/docs/assets/js/108.7b8954e1.js"><link rel="prefetch" href="/docs/assets/js/109.229e8f06.js"><link rel="prefetch" href="/docs/assets/js/11.5d7506cb.js"><link rel="prefetch" href="/docs/assets/js/110.2b7f5b07.js"><link rel="prefetch" href="/docs/assets/js/111.a6a1e430.js"><link rel="prefetch" href="/docs/assets/js/112.edd2a898.js"><link rel="prefetch" href="/docs/assets/js/113.30ca7f70.js"><link rel="prefetch" href="/docs/assets/js/114.f7543676.js"><link rel="prefetch" href="/docs/assets/js/115.aba29b47.js"><link rel="prefetch" href="/docs/assets/js/116.ee502de1.js"><link rel="prefetch" href="/docs/assets/js/117.065bcc3d.js"><link rel="prefetch" href="/docs/assets/js/118.4e0ebe1e.js"><link rel="prefetch" href="/docs/assets/js/119.e32f68a4.js"><link rel="prefetch" href="/docs/assets/js/12.a4686364.js"><link rel="prefetch" href="/docs/assets/js/120.a69461e0.js"><link rel="prefetch" href="/docs/assets/js/121.32a94758.js"><link rel="prefetch" href="/docs/assets/js/122.bd4941a9.js"><link rel="prefetch" href="/docs/assets/js/123.fad58e3c.js"><link rel="prefetch" href="/docs/assets/js/124.e696a0e8.js"><link rel="prefetch" href="/docs/assets/js/125.996f913d.js"><link rel="prefetch" href="/docs/assets/js/126.e58dc590.js"><link rel="prefetch" href="/docs/assets/js/127.1c907183.js"><link rel="prefetch" href="/docs/assets/js/128.d240b275.js"><link rel="prefetch" href="/docs/assets/js/129.0b9dcb10.js"><link rel="prefetch" href="/docs/assets/js/13.6612b3d3.js"><link rel="prefetch" href="/docs/assets/js/130.a4823577.js"><link rel="prefetch" href="/docs/assets/js/131.cdc983f8.js"><link rel="prefetch" href="/docs/assets/js/132.dae10d34.js"><link rel="prefetch" href="/docs/assets/js/133.e0fb4088.js"><link rel="prefetch" href="/docs/assets/js/134.df517645.js"><link rel="prefetch" href="/docs/assets/js/135.c2452720.js"><link rel="prefetch" href="/docs/assets/js/136.4abfbe1d.js"><link rel="prefetch" href="/docs/assets/js/137.978aa079.js"><link rel="prefetch" href="/docs/assets/js/138.699baffe.js"><link rel="prefetch" href="/docs/assets/js/139.95e222f4.js"><link rel="prefetch" href="/docs/assets/js/14.87a30c47.js"><link rel="prefetch" href="/docs/assets/js/140.326732cc.js"><link rel="prefetch" href="/docs/assets/js/141.d9188a1b.js"><link rel="prefetch" href="/docs/assets/js/142.05f131a9.js"><link rel="prefetch" href="/docs/assets/js/143.adde1842.js"><link rel="prefetch" href="/docs/assets/js/144.659fc30a.js"><link rel="prefetch" href="/docs/assets/js/145.890a4f01.js"><link rel="prefetch" href="/docs/assets/js/146.0a1ecd57.js"><link rel="prefetch" href="/docs/assets/js/147.df871804.js"><link rel="prefetch" href="/docs/assets/js/148.f48f265b.js"><link rel="prefetch" href="/docs/assets/js/149.be511f13.js"><link rel="prefetch" href="/docs/assets/js/15.1d3c9083.js"><link rel="prefetch" href="/docs/assets/js/150.982c278d.js"><link rel="prefetch" href="/docs/assets/js/151.a1917d88.js"><link rel="prefetch" href="/docs/assets/js/152.e0c78065.js"><link rel="prefetch" href="/docs/assets/js/153.568a6f41.js"><link rel="prefetch" href="/docs/assets/js/154.e1c36835.js"><link rel="prefetch" href="/docs/assets/js/155.8222a311.js"><link rel="prefetch" href="/docs/assets/js/156.4103ca64.js"><link rel="prefetch" href="/docs/assets/js/157.6c786533.js"><link rel="prefetch" href="/docs/assets/js/158.ce60ce5a.js"><link rel="prefetch" href="/docs/assets/js/159.5a20eb5f.js"><link rel="prefetch" href="/docs/assets/js/16.397abca0.js"><link rel="prefetch" href="/docs/assets/js/160.3bcb2ffe.js"><link rel="prefetch" href="/docs/assets/js/161.c89a9398.js"><link rel="prefetch" href="/docs/assets/js/162.71181b59.js"><link rel="prefetch" href="/docs/assets/js/163.5a5239e8.js"><link rel="prefetch" href="/docs/assets/js/164.197e397b.js"><link rel="prefetch" href="/docs/assets/js/165.17641710.js"><link rel="prefetch" href="/docs/assets/js/166.9d88c27e.js"><link rel="prefetch" href="/docs/assets/js/167.576e27cb.js"><link rel="prefetch" href="/docs/assets/js/168.eaf86ed1.js"><link rel="prefetch" href="/docs/assets/js/169.92587866.js"><link rel="prefetch" href="/docs/assets/js/17.024e95ed.js"><link rel="prefetch" href="/docs/assets/js/170.6e2687cf.js"><link rel="prefetch" href="/docs/assets/js/171.4db36e93.js"><link rel="prefetch" href="/docs/assets/js/172.98d3bfdd.js"><link rel="prefetch" href="/docs/assets/js/173.2af35b2a.js"><link rel="prefetch" href="/docs/assets/js/174.aac095a2.js"><link rel="prefetch" href="/docs/assets/js/175.08de05b9.js"><link rel="prefetch" href="/docs/assets/js/176.c4de5f71.js"><link rel="prefetch" href="/docs/assets/js/177.1df000bb.js"><link rel="prefetch" href="/docs/assets/js/178.a63f5b44.js"><link rel="prefetch" href="/docs/assets/js/179.6336538e.js"><link rel="prefetch" href="/docs/assets/js/18.e25b2100.js"><link rel="prefetch" href="/docs/assets/js/180.240019ad.js"><link rel="prefetch" href="/docs/assets/js/181.1e021c83.js"><link rel="prefetch" href="/docs/assets/js/182.58e74e74.js"><link rel="prefetch" href="/docs/assets/js/183.a95f6264.js"><link rel="prefetch" href="/docs/assets/js/184.e8e03029.js"><link rel="prefetch" href="/docs/assets/js/185.39c65c16.js"><link rel="prefetch" href="/docs/assets/js/186.2cb1240a.js"><link rel="prefetch" href="/docs/assets/js/187.51876d64.js"><link rel="prefetch" href="/docs/assets/js/188.41802096.js"><link rel="prefetch" href="/docs/assets/js/189.0fa2e6ac.js"><link rel="prefetch" href="/docs/assets/js/190.dd9062ef.js"><link rel="prefetch" href="/docs/assets/js/191.79a29e04.js"><link rel="prefetch" href="/docs/assets/js/192.5c535f99.js"><link rel="prefetch" href="/docs/assets/js/193.f31c2ab4.js"><link rel="prefetch" href="/docs/assets/js/194.b4b736cc.js"><link rel="prefetch" href="/docs/assets/js/195.7ab4dd64.js"><link rel="prefetch" href="/docs/assets/js/196.32db08a9.js"><link rel="prefetch" href="/docs/assets/js/197.3993b652.js"><link rel="prefetch" href="/docs/assets/js/198.79404859.js"><link rel="prefetch" href="/docs/assets/js/199.8f246053.js"><link rel="prefetch" href="/docs/assets/js/20.1dd6acbb.js"><link rel="prefetch" href="/docs/assets/js/200.5d363006.js"><link rel="prefetch" href="/docs/assets/js/201.63941387.js"><link rel="prefetch" href="/docs/assets/js/202.a7bf3a52.js"><link rel="prefetch" href="/docs/assets/js/203.edb11998.js"><link rel="prefetch" href="/docs/assets/js/204.6b1e02a1.js"><link rel="prefetch" href="/docs/assets/js/205.3795ff9b.js"><link rel="prefetch" href="/docs/assets/js/206.b33a9272.js"><link rel="prefetch" href="/docs/assets/js/207.410590a0.js"><link rel="prefetch" href="/docs/assets/js/208.03a19797.js"><link rel="prefetch" href="/docs/assets/js/209.8fcb01b2.js"><link rel="prefetch" href="/docs/assets/js/21.b067890a.js"><link rel="prefetch" href="/docs/assets/js/210.af76d0b9.js"><link rel="prefetch" href="/docs/assets/js/211.a45e7bdf.js"><link rel="prefetch" href="/docs/assets/js/212.34d7bb48.js"><link rel="prefetch" href="/docs/assets/js/213.d462c22c.js"><link rel="prefetch" href="/docs/assets/js/214.7c883821.js"><link rel="prefetch" href="/docs/assets/js/215.84a17e7c.js"><link rel="prefetch" href="/docs/assets/js/216.045e2fd6.js"><link rel="prefetch" href="/docs/assets/js/217.6e2e41f3.js"><link rel="prefetch" href="/docs/assets/js/218.83e017d9.js"><link rel="prefetch" href="/docs/assets/js/219.70d7d796.js"><link rel="prefetch" href="/docs/assets/js/22.3b421a30.js"><link rel="prefetch" href="/docs/assets/js/220.47a464fc.js"><link rel="prefetch" href="/docs/assets/js/221.a062db54.js"><link rel="prefetch" href="/docs/assets/js/222.d247ea4d.js"><link rel="prefetch" href="/docs/assets/js/223.c40d128f.js"><link rel="prefetch" href="/docs/assets/js/224.7ad47a13.js"><link rel="prefetch" href="/docs/assets/js/225.73b1d0d2.js"><link rel="prefetch" href="/docs/assets/js/226.dfeca7e1.js"><link rel="prefetch" href="/docs/assets/js/227.6b93883f.js"><link rel="prefetch" href="/docs/assets/js/228.56d2c633.js"><link rel="prefetch" href="/docs/assets/js/229.0cee4ab7.js"><link rel="prefetch" href="/docs/assets/js/23.c9ebadae.js"><link rel="prefetch" href="/docs/assets/js/230.73285e9b.js"><link rel="prefetch" href="/docs/assets/js/231.4217bc4d.js"><link rel="prefetch" href="/docs/assets/js/232.884d57ed.js"><link rel="prefetch" href="/docs/assets/js/233.4129a142.js"><link rel="prefetch" href="/docs/assets/js/234.e3225657.js"><link rel="prefetch" href="/docs/assets/js/235.8da65149.js"><link rel="prefetch" href="/docs/assets/js/236.44a84cfa.js"><link rel="prefetch" href="/docs/assets/js/237.45d73288.js"><link rel="prefetch" href="/docs/assets/js/238.ffecbf73.js"><link rel="prefetch" href="/docs/assets/js/239.df10139c.js"><link rel="prefetch" href="/docs/assets/js/24.5520ed7c.js"><link rel="prefetch" href="/docs/assets/js/240.1641bb69.js"><link rel="prefetch" href="/docs/assets/js/241.920ef0fe.js"><link rel="prefetch" href="/docs/assets/js/242.657b7d78.js"><link rel="prefetch" href="/docs/assets/js/243.5a2332b7.js"><link rel="prefetch" href="/docs/assets/js/244.1dbe64bc.js"><link rel="prefetch" href="/docs/assets/js/245.e4027f3f.js"><link rel="prefetch" href="/docs/assets/js/246.e55bef8c.js"><link rel="prefetch" href="/docs/assets/js/247.13999998.js"><link rel="prefetch" href="/docs/assets/js/248.d978dd59.js"><link rel="prefetch" href="/docs/assets/js/249.6c0a8fc5.js"><link rel="prefetch" href="/docs/assets/js/25.ea3d6538.js"><link rel="prefetch" href="/docs/assets/js/250.9a31d410.js"><link rel="prefetch" href="/docs/assets/js/251.b3f35e34.js"><link rel="prefetch" href="/docs/assets/js/252.487b5324.js"><link rel="prefetch" href="/docs/assets/js/253.1f1487ff.js"><link rel="prefetch" href="/docs/assets/js/254.f5b5f89c.js"><link rel="prefetch" href="/docs/assets/js/255.3e0a1e38.js"><link rel="prefetch" href="/docs/assets/js/256.e7984ce9.js"><link rel="prefetch" href="/docs/assets/js/257.29638c50.js"><link rel="prefetch" href="/docs/assets/js/258.4bd1753d.js"><link rel="prefetch" href="/docs/assets/js/259.257ae58f.js"><link rel="prefetch" href="/docs/assets/js/26.22fa4661.js"><link rel="prefetch" href="/docs/assets/js/260.8c95a0a1.js"><link rel="prefetch" href="/docs/assets/js/261.44497ffd.js"><link rel="prefetch" href="/docs/assets/js/262.cc424a91.js"><link rel="prefetch" href="/docs/assets/js/263.cdcde635.js"><link rel="prefetch" href="/docs/assets/js/264.7df35fe4.js"><link rel="prefetch" href="/docs/assets/js/265.0fecead0.js"><link rel="prefetch" href="/docs/assets/js/266.bc9b2853.js"><link rel="prefetch" href="/docs/assets/js/267.15e85310.js"><link rel="prefetch" href="/docs/assets/js/268.fc0f6c56.js"><link rel="prefetch" href="/docs/assets/js/269.9a6a7dee.js"><link rel="prefetch" href="/docs/assets/js/27.d275ba0b.js"><link rel="prefetch" href="/docs/assets/js/270.86841e39.js"><link rel="prefetch" href="/docs/assets/js/271.bac35782.js"><link rel="prefetch" href="/docs/assets/js/272.11995466.js"><link rel="prefetch" href="/docs/assets/js/273.386419d5.js"><link rel="prefetch" href="/docs/assets/js/274.2139cccc.js"><link rel="prefetch" href="/docs/assets/js/275.5875f9fe.js"><link rel="prefetch" href="/docs/assets/js/276.af87e0d7.js"><link rel="prefetch" href="/docs/assets/js/277.3b071a69.js"><link rel="prefetch" href="/docs/assets/js/278.ebe868b8.js"><link rel="prefetch" href="/docs/assets/js/279.976c33cf.js"><link rel="prefetch" href="/docs/assets/js/28.7ea43c17.js"><link rel="prefetch" href="/docs/assets/js/280.182c66fe.js"><link rel="prefetch" href="/docs/assets/js/281.26f4ea11.js"><link rel="prefetch" href="/docs/assets/js/282.7513fe50.js"><link rel="prefetch" href="/docs/assets/js/283.5f8e22ee.js"><link rel="prefetch" href="/docs/assets/js/284.1224b1fa.js"><link rel="prefetch" href="/docs/assets/js/285.b3a95f84.js"><link rel="prefetch" href="/docs/assets/js/286.8c23e1ca.js"><link rel="prefetch" href="/docs/assets/js/287.fcd0764f.js"><link rel="prefetch" href="/docs/assets/js/288.78dd98e0.js"><link rel="prefetch" href="/docs/assets/js/289.bbb04c67.js"><link rel="prefetch" href="/docs/assets/js/29.7d89cded.js"><link rel="prefetch" href="/docs/assets/js/290.a8409c4a.js"><link rel="prefetch" href="/docs/assets/js/291.9516da92.js"><link rel="prefetch" href="/docs/assets/js/292.fc740c36.js"><link rel="prefetch" href="/docs/assets/js/293.02c2d6df.js"><link rel="prefetch" href="/docs/assets/js/294.f02e4c2b.js"><link rel="prefetch" href="/docs/assets/js/295.8f93d78c.js"><link rel="prefetch" href="/docs/assets/js/296.9b66cd43.js"><link rel="prefetch" href="/docs/assets/js/297.c9fa8fb3.js"><link rel="prefetch" href="/docs/assets/js/298.6ce74247.js"><link rel="prefetch" href="/docs/assets/js/299.ff4936a9.js"><link rel="prefetch" href="/docs/assets/js/3.8ecf6ac9.js"><link rel="prefetch" href="/docs/assets/js/30.004b2fc0.js"><link rel="prefetch" href="/docs/assets/js/300.e51eb61d.js"><link rel="prefetch" href="/docs/assets/js/301.0717836b.js"><link rel="prefetch" href="/docs/assets/js/302.9a112487.js"><link rel="prefetch" href="/docs/assets/js/303.c147cb54.js"><link rel="prefetch" href="/docs/assets/js/304.f314bd68.js"><link rel="prefetch" href="/docs/assets/js/305.9a479b5d.js"><link rel="prefetch" href="/docs/assets/js/306.16dfc959.js"><link rel="prefetch" href="/docs/assets/js/307.3f19ee3e.js"><link rel="prefetch" href="/docs/assets/js/309.321accbc.js"><link rel="prefetch" href="/docs/assets/js/31.d56d2fc1.js"><link rel="prefetch" href="/docs/assets/js/310.60f45d72.js"><link rel="prefetch" href="/docs/assets/js/311.f5e52e0a.js"><link rel="prefetch" href="/docs/assets/js/312.2cc8b5a5.js"><link rel="prefetch" href="/docs/assets/js/313.1d6fd7aa.js"><link rel="prefetch" href="/docs/assets/js/314.35cb6cbd.js"><link rel="prefetch" href="/docs/assets/js/32.e35fd9a1.js"><link rel="prefetch" href="/docs/assets/js/33.d0ca1f16.js"><link rel="prefetch" href="/docs/assets/js/34.61e94196.js"><link rel="prefetch" href="/docs/assets/js/35.86fbc0f0.js"><link rel="prefetch" href="/docs/assets/js/36.0f37ff5b.js"><link rel="prefetch" href="/docs/assets/js/37.cb36eab6.js"><link rel="prefetch" href="/docs/assets/js/38.4a0e6876.js"><link rel="prefetch" href="/docs/assets/js/39.05395574.js"><link rel="prefetch" href="/docs/assets/js/40.8eb5be6c.js"><link rel="prefetch" href="/docs/assets/js/41.a8817873.js"><link rel="prefetch" href="/docs/assets/js/42.2a370aa2.js"><link rel="prefetch" href="/docs/assets/js/43.c1197d9a.js"><link rel="prefetch" href="/docs/assets/js/44.e0841163.js"><link rel="prefetch" href="/docs/assets/js/45.ec1ff6a6.js"><link rel="prefetch" href="/docs/assets/js/46.75dcc964.js"><link rel="prefetch" href="/docs/assets/js/47.e082d922.js"><link rel="prefetch" href="/docs/assets/js/48.6305c493.js"><link rel="prefetch" href="/docs/assets/js/49.220de7a1.js"><link rel="prefetch" href="/docs/assets/js/5.70556686.js"><link rel="prefetch" href="/docs/assets/js/50.6dd5edac.js"><link rel="prefetch" href="/docs/assets/js/51.e9700132.js"><link rel="prefetch" href="/docs/assets/js/52.a2ea969e.js"><link rel="prefetch" href="/docs/assets/js/53.7ece8f2c.js"><link rel="prefetch" href="/docs/assets/js/54.b5c2581d.js"><link rel="prefetch" href="/docs/assets/js/55.13e24143.js"><link rel="prefetch" href="/docs/assets/js/56.1f0ce6b4.js"><link rel="prefetch" href="/docs/assets/js/57.d9e86640.js"><link rel="prefetch" href="/docs/assets/js/58.95a7e38d.js"><link rel="prefetch" href="/docs/assets/js/59.7b46d313.js"><link rel="prefetch" href="/docs/assets/js/6.436a728f.js"><link rel="prefetch" href="/docs/assets/js/60.65c93542.js"><link rel="prefetch" href="/docs/assets/js/61.72148ba4.js"><link rel="prefetch" href="/docs/assets/js/62.b5273896.js"><link rel="prefetch" href="/docs/assets/js/63.bbc903cd.js"><link rel="prefetch" href="/docs/assets/js/64.b9d83699.js"><link rel="prefetch" href="/docs/assets/js/65.e9f68e46.js"><link rel="prefetch" href="/docs/assets/js/66.0a81eb3d.js"><link rel="prefetch" href="/docs/assets/js/67.13fde5ce.js"><link rel="prefetch" href="/docs/assets/js/68.c195528e.js"><link rel="prefetch" href="/docs/assets/js/69.6d05917a.js"><link rel="prefetch" href="/docs/assets/js/7.9e3691d1.js"><link rel="prefetch" href="/docs/assets/js/70.286e82b9.js"><link rel="prefetch" href="/docs/assets/js/71.7a50c641.js"><link rel="prefetch" href="/docs/assets/js/72.db59d476.js"><link rel="prefetch" href="/docs/assets/js/73.41e8e708.js"><link rel="prefetch" href="/docs/assets/js/74.d1677f97.js"><link rel="prefetch" href="/docs/assets/js/75.60ec7670.js"><link rel="prefetch" href="/docs/assets/js/76.31571826.js"><link rel="prefetch" href="/docs/assets/js/77.714ed672.js"><link rel="prefetch" href="/docs/assets/js/78.2ae66602.js"><link rel="prefetch" href="/docs/assets/js/79.ffbecd6f.js"><link rel="prefetch" href="/docs/assets/js/80.272432a0.js"><link rel="prefetch" href="/docs/assets/js/81.885cfc85.js"><link rel="prefetch" href="/docs/assets/js/82.f830cca1.js"><link rel="prefetch" href="/docs/assets/js/83.315af250.js"><link rel="prefetch" href="/docs/assets/js/84.eb0d48eb.js"><link rel="prefetch" href="/docs/assets/js/85.f6b5be14.js"><link rel="prefetch" href="/docs/assets/js/86.2896a476.js"><link rel="prefetch" href="/docs/assets/js/87.cc6190f7.js"><link rel="prefetch" href="/docs/assets/js/88.632bdc25.js"><link rel="prefetch" href="/docs/assets/js/89.bdc0b25c.js"><link rel="prefetch" href="/docs/assets/js/90.679d5d12.js"><link rel="prefetch" href="/docs/assets/js/91.95688a59.js"><link rel="prefetch" href="/docs/assets/js/92.76ba6f9c.js"><link rel="prefetch" href="/docs/assets/js/93.8475ffb2.js"><link rel="prefetch" href="/docs/assets/js/94.eef2baf1.js"><link rel="prefetch" href="/docs/assets/js/95.22c8b921.js"><link rel="prefetch" href="/docs/assets/js/96.1f982597.js"><link rel="prefetch" href="/docs/assets/js/97.79c2bc9a.js"><link rel="prefetch" href="/docs/assets/js/98.7d7561d2.js"><link rel="prefetch" href="/docs/assets/js/99.694821d8.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.be90ab07.js"> <link rel="stylesheet" href="/docs/assets/css/0.styles.79554685.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/assets/img/icon.svg" alt="Elementor Developers" class="logo"> <span class="site-name can-hide">Elementor Developers</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Getting Started" class="dropdown-title"><span class="title">Getting Started</span> <span class="arrow down"></span></button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title"><span class="title">Getting Started</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" class="nav-link"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" class="nav-link"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title"><span class="title">Internals</span> <span class="arrow down"></span></button> <button type="button" aria-label="Internals" class="mobile-dropdown-title"><span class="title">Internals</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/editor/" class="nav-link"> The Editor </a></li><li class="dropdown-item"> <a href="/docs/editor-controls/" class="nav-link"> Editor Controls </a></li><li class="dropdown-item"> <a href="/docs/data-structure/" class="nav-link"> Data Structure </a></li><li class="dropdown-item"> <a href="/docs/managers/" class="nav-link"> Managers </a></li><li class="dropdown-item"> <a href="/docs/scripts-styles/" class="nav-link"> Scripts & Styles </a></li><li class="dropdown-item"> <a href="/docs/hooks/" class="nav-link"> Hooks </a></li><li class="dropdown-item"> <a href="/docs/deprecations/" class="nav-link"> Deprecations </a></li><li class="dropdown-item"> <a href="/docs/cli/" class="nav-link"> CLI </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Components" class="dropdown-title"><span class="title">Components</span> <span class="arrow down"></span></button> <button type="button" aria-label="Components" class="mobile-dropdown-title"><span class="title">Components</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/widgets/" class="nav-link router-link-active"> Widgets </a></li><li class="dropdown-item"> <a href="/docs/controls/" class="nav-link"> Controls </a></li><li class="dropdown-item"> <a href="/docs/dynamic-tags/" class="nav-link"> Dynamic Tags </a></li><li class="dropdown-item"> <a href="/docs/form-actions/" class="nav-link"> Form Actions </a></li><li class="dropdown-item"> <a href="/docs/form-fields/" class="nav-link"> Form Fields </a></li><li class="dropdown-item"> <a href="/docs/theme-conditions/" class="nav-link"> Theme Conditions </a></li><li class="dropdown-item"> <a href="/docs/themes/" class="nav-link"> Theme Locations </a></li><li class="dropdown-item"> <a href="/docs/context-menu/" class="nav-link"> Context Menu </a></li><li class="dropdown-item"> <a href="/docs/finder/" class="nav-link"> Finder </a></li></ul></div></div><div class="nav-item"><a href="https://developers.elementor.com/blog/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Blog <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Getting Started" class="dropdown-title"><span class="title">Getting Started</span> <span class="arrow down"></span></button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title"><span class="title">Getting Started</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" class="nav-link"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" class="nav-link"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title"><span class="title">Internals</span> <span class="arrow down"></span></button> <button type="button" aria-label="Internals" class="mobile-dropdown-title"><span class="title">Internals</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/editor/" class="nav-link"> The Editor </a></li><li class="dropdown-item"> <a href="/docs/editor-controls/" class="nav-link"> Editor Controls </a></li><li class="dropdown-item"> <a href="/docs/data-structure/" class="nav-link"> Data Structure </a></li><li class="dropdown-item"> <a href="/docs/managers/" class="nav-link"> Managers </a></li><li class="dropdown-item"> <a href="/docs/scripts-styles/" class="nav-link"> Scripts & Styles </a></li><li class="dropdown-item"> <a href="/docs/hooks/" class="nav-link"> Hooks </a></li><li class="dropdown-item"> <a href="/docs/deprecations/" class="nav-link"> Deprecations </a></li><li class="dropdown-item"> <a href="/docs/cli/" class="nav-link"> CLI </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Components" class="dropdown-title"><span class="title">Components</span> <span class="arrow down"></span></button> <button type="button" aria-label="Components" class="mobile-dropdown-title"><span class="title">Components</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/widgets/" class="nav-link router-link-active"> Widgets </a></li><li class="dropdown-item"> <a href="/docs/controls/" class="nav-link"> Controls </a></li><li class="dropdown-item"> <a href="/docs/dynamic-tags/" class="nav-link"> Dynamic Tags </a></li><li class="dropdown-item"> <a href="/docs/form-actions/" class="nav-link"> Form Actions </a></li><li class="dropdown-item"> <a href="/docs/form-fields/" class="nav-link"> Form Fields </a></li><li class="dropdown-item"> <a href="/docs/theme-conditions/" class="nav-link"> Theme Conditions </a></li><li class="dropdown-item"> <a href="/docs/themes/" class="nav-link"> Theme Locations </a></li><li class="dropdown-item"> <a href="/docs/context-menu/" class="nav-link"> Context Menu </a></li><li class="dropdown-item"> <a href="/docs/finder/" class="nav-link"> Finder </a></li></ul></div></div><div class="nav-item"><a href="https://developers.elementor.com/blog/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Blog <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Elementor Widgets</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/" aria-current="page" class="sidebar-link">Introduction</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Managing Widgets</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/add-new-widget/" class="sidebar-link">Add New Widget</a></li><li><a href="/docs/widgets/remove-widgets/" class="sidebar-link">Remove Widgets</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Creating Widgets</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/widget-structure/" class="sidebar-link">Widget Structure</a></li><li><a href="/docs/widgets/widget-data/" class="sidebar-link">Widget Data</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span></span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/widget-information/" class="sidebar-link">Widget Information</a></li><li><a href="/docs/widgets/widget-promotions/" class="sidebar-link">Widget Promotions</a></li><li><a href="/docs/widgets/widget-categories/" class="sidebar-link">Widget Categories</a></li></ul></section></li><li><a href="/docs/widgets/widget-dependencies/" class="sidebar-link">Widget Dependencies</a></li><li><a href="/docs/widgets/widget-controls/" class="sidebar-link">Widget Controls</a></li><li><a href="/docs/widgets/widget-rendering/" class="sidebar-link">Widget Rendering</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span></span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/widget-settings/" class="sidebar-link">Widget Settings</a></li><li><a href="/docs/widgets/rendering-text/" class="sidebar-link">Rendering Text</a></li><li><a href="/docs/widgets/rendering-style/" class="sidebar-link">Rendering Style</a></li><li><a href="/docs/widgets/rendering-media/" class="sidebar-link">Rendering Media</a></li><li><a href="/docs/widgets/rendering-repeaters/" class="sidebar-link">Rendering Repeaters</a></li><li><a href="/docs/widgets/rendering-html-attribute/" class="sidebar-link">Rendering HTML Attributes</a></li><li><a href="/docs/widgets/rendering-inline-editing/" class="sidebar-link">Rendering Inline Editing</a></li></ul></section></li><li><a href="/docs/widgets/widget-optimization/" aria-current="page" class="active sidebar-link">Widget Optimization</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span></span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/widget-inner-wrapper/" class="sidebar-link">Widget DOM Optimization</a></li><li><a href="/docs/widgets/widget-output-caching/" class="sidebar-link">Widget Output Caching</a></li></ul></section></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Examples</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/widgets/simple-example/" class="sidebar-link">Simple Example</a></li><li><a href="/docs/widgets/advanced-example/" class="sidebar-link">Advanced Example</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="widget-optimization"><a href="#widget-optimization" class="header-anchor">#</a> Widget Optimization</h1> <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>Elementor Core</span> <span class="badge warning" style="vertical-align:top;" data-v-15b7b770>Intermediate</span> <p>Elementor offers several methods and best practices to optimize widgets and improve performance. The optimizations are not implemented for all widgets in order to maintain backwards compatibility. In addition, each widget has its own characteristics. The widget developer needs to add some extra methods to the widget class to make sure Elementor knows how to process it.</p> <h2 id="performance-optimization-methods"><a href="#performance-optimization-methods" class="header-anchor">#</a> Performance Optimization Methods</h2> <p>Elementor widgets has two performance optimization methods:</p> <div class="language-php line-numbers-mode"><pre class="language-php"><code><span class="token keyword">class</span> <span class="token class-name-definition class-name">Elementor_Test_Widget</span> <span class="token keyword">extends</span> <span class="token class-name class-name-fully-qualified"><span class="token punctuation">\</span>Elementor<span class="token punctuation">\</span>Widget_Base</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">has_widget_inner_wrapper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">bool</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">is_dynamic_content</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">bool</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li><p><strong>DOM Optimization</strong> - The <code>has_widget_inner_wrapper()</code> method lets you determine whether the widget uses optimized DOM structure or not.</p></li> <li><p><strong>Element Output Caching</strong> - The <code>is_dynamic_content()</code> method lets you determine whether the widget returns dynamic content, to cache the element HTML output or not.</p></li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/elementor/elementor-developers-docs/edit/master/src/widgets/widget-optimization.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/16/2024, 2:38:27 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/docs/widgets/rendering-inline-editing/" class="prev"> Rendering Inline Editing </a></span> <span class="next"><a href="/docs/widgets/widget-inner-wrapper/"> Widget DOM Optimization </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/docs/assets/js/app.4a037537.js" defer></script><script src="/docs/assets/js/2.32541751.js" defer></script><script src="/docs/assets/js/1.3d99b080.js" defer></script><script src="/docs/assets/js/308.264b9f59.js" defer></script><script src="/docs/assets/js/4.de33d348.js" defer></script><script src="/docs/assets/js/19.d9598f47.js" defer></script> </body> </html>