[{"data":1,"prerenderedAt":1215},["ShallowReactive",2],{"blog-post-/blog/web-performance-optimization/":3},{"id":4,"title":5,"body":6,"description":1191,"extension":1192,"meta":1193,"navigation":303,"path":1210,"seo":1211,"sitemap":1212,"stem":1213,"__hash__":1214},"content/blog/web-performance-optimization.md","Web Performance Optimization - The Ultimate Guide",{"type":7,"value":8,"toc":1174},"minimark",[9,14,18,23,52,56,59,64,67,72,86,90,93,97,111,115,118,122,133,137,140,386,390,393,519,523,526,785,789,792,982,986,989,1026,1030,1033,1059,1063,1066,1092,1096,1163,1167,1170],[10,11,13],"h1",{"id":12},"web-performance-optimization","Web Performance Optimization",[15,16,17],"p",{},"Website performance directly impacts user experience, SEO rankings, and conversion rates. Let's explore proven techniques to make your websites lightning fast!",[19,20,22],"h2",{"id":21},"why-performance-matters","Why Performance Matters",[24,25,26,34,40,46],"ul",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"User Experience"," - 53% of users abandon sites that take over 3 seconds to load",[27,35,36,39],{},[30,37,38],{},"SEO"," - Google uses page speed as a ranking factor",[27,41,42,45],{},[30,43,44],{},"Conversions"," - Amazon found that every 100ms of latency cost them 1% in sales",[27,47,48,51],{},[30,49,50],{},"Accessibility"," - Faster sites work better on slower connections",[19,53,55],{"id":54},"core-web-vitals","Core Web Vitals",[15,57,58],{},"Google's Core Web Vitals measure user experience:",[60,61,63],"h3",{"id":62},"_1-largest-contentful-paint-lcp","1. Largest Contentful Paint (LCP)",[15,65,66],{},"Measures loading performance. Aim for under 2.5 seconds.",[15,68,69],{},[30,70,71],{},"How to improve:",[24,73,74,77,80,83],{},[27,75,76],{},"Optimize images (use WebP, lazy loading)",[27,78,79],{},"Minimize CSS and JavaScript",[27,81,82],{},"Use CDN for static assets",[27,84,85],{},"Implement server-side rendering",[60,87,89],{"id":88},"_2-first-input-delay-fid","2. First Input Delay (FID)",[15,91,92],{},"Measures interactivity. Aim for under 100ms.",[15,94,95],{},[30,96,71],{},[24,98,99,102,105,108],{},[27,100,101],{},"Break up long JavaScript tasks",[27,103,104],{},"Use web workers for heavy computations",[27,106,107],{},"Minimize third-party scripts",[27,109,110],{},"Implement code splitting",[60,112,114],{"id":113},"_3-cumulative-layout-shift-cls","3. Cumulative Layout Shift (CLS)",[15,116,117],{},"Measures visual stability. Aim for under 0.1.",[15,119,120],{},[30,121,71],{},[24,123,124,127,130],{},[27,125,126],{},"Set dimensions for images and videos",[27,128,129],{},"Avoid inserting content above existing content",[27,131,132],{},"Use transform animations instead of layout animations",[19,134,136],{"id":135},"image-optimization","Image Optimization",[15,138,139],{},"Images often account for most of a page's weight:",[141,142,147],"pre",{"className":143,"code":144,"language":145,"meta":146,"style":146},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Use modern formats -->\n\u003Cpicture>\n  \u003Csource srcset=\"image.webp\" type=\"image/webp\">\n  \u003Csource srcset=\"image.jpg\" type=\"image/jpeg\">\n  \u003Cimg src=\"image.jpg\" alt=\"Description\" loading=\"lazy\">\n\u003C/picture>\n\n\u003C!-- Responsive images -->\n\u003Cimg \n  srcset=\"small.jpg 480w, medium.jpg 800w, large.jpg 1200w\"\n  sizes=\"(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px\"\n  src=\"medium.jpg\"\n  alt=\"Description\"\n>\n","html","",[148,149,150,159,173,212,243,288,298,305,311,321,337,352,367,381],"code",{"__ignoreMap":146},[151,152,155],"span",{"class":153,"line":154},"line",1,[151,156,158],{"class":157},"sHwdD","\u003C!-- Use modern formats -->\n",[151,160,162,166,170],{"class":153,"line":161},2,[151,163,165],{"class":164},"sMK4o","\u003C",[151,167,169],{"class":168},"swJcz","picture",[151,171,172],{"class":164},">\n",[151,174,176,179,182,186,189,192,196,198,201,203,205,208,210],{"class":153,"line":175},3,[151,177,178],{"class":164},"  \u003C",[151,180,181],{"class":168},"source",[151,183,185],{"class":184},"spNyl"," srcset",[151,187,188],{"class":164},"=",[151,190,191],{"class":164},"\"",[151,193,195],{"class":194},"sfazB","image.webp",[151,197,191],{"class":164},[151,199,200],{"class":184}," type",[151,202,188],{"class":164},[151,204,191],{"class":164},[151,206,207],{"class":194},"image/webp",[151,209,191],{"class":164},[151,211,172],{"class":164},[151,213,215,217,219,221,223,225,228,230,232,234,236,239,241],{"class":153,"line":214},4,[151,216,178],{"class":164},[151,218,181],{"class":168},[151,220,185],{"class":184},[151,222,188],{"class":164},[151,224,191],{"class":164},[151,226,227],{"class":194},"image.jpg",[151,229,191],{"class":164},[151,231,200],{"class":184},[151,233,188],{"class":164},[151,235,191],{"class":164},[151,237,238],{"class":194},"image/jpeg",[151,240,191],{"class":164},[151,242,172],{"class":164},[151,244,246,248,251,254,256,258,260,262,265,267,269,272,274,277,279,281,284,286],{"class":153,"line":245},5,[151,247,178],{"class":164},[151,249,250],{"class":168},"img",[151,252,253],{"class":184}," src",[151,255,188],{"class":164},[151,257,191],{"class":164},[151,259,227],{"class":194},[151,261,191],{"class":164},[151,263,264],{"class":184}," alt",[151,266,188],{"class":164},[151,268,191],{"class":164},[151,270,271],{"class":194},"Description",[151,273,191],{"class":164},[151,275,276],{"class":184}," loading",[151,278,188],{"class":164},[151,280,191],{"class":164},[151,282,283],{"class":194},"lazy",[151,285,191],{"class":164},[151,287,172],{"class":164},[151,289,291,294,296],{"class":153,"line":290},6,[151,292,293],{"class":164},"\u003C/",[151,295,169],{"class":168},[151,297,172],{"class":164},[151,299,301],{"class":153,"line":300},7,[151,302,304],{"emptyLinePlaceholder":303},true,"\n",[151,306,308],{"class":153,"line":307},8,[151,309,310],{"class":157},"\u003C!-- Responsive images -->\n",[151,312,314,316,318],{"class":153,"line":313},9,[151,315,165],{"class":164},[151,317,250],{"class":168},[151,319,320],{"class":164}," \n",[151,322,324,327,329,331,334],{"class":153,"line":323},10,[151,325,326],{"class":184},"  srcset",[151,328,188],{"class":164},[151,330,191],{"class":164},[151,332,333],{"class":194},"small.jpg 480w, medium.jpg 800w, large.jpg 1200w",[151,335,336],{"class":164},"\"\n",[151,338,340,343,345,347,350],{"class":153,"line":339},11,[151,341,342],{"class":184},"  sizes",[151,344,188],{"class":164},[151,346,191],{"class":164},[151,348,349],{"class":194},"(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px",[151,351,336],{"class":164},[151,353,355,358,360,362,365],{"class":153,"line":354},12,[151,356,357],{"class":184},"  src",[151,359,188],{"class":164},[151,361,191],{"class":164},[151,363,364],{"class":194},"medium.jpg",[151,366,336],{"class":164},[151,368,370,373,375,377,379],{"class":153,"line":369},13,[151,371,372],{"class":184},"  alt",[151,374,188],{"class":164},[151,376,191],{"class":164},[151,378,271],{"class":194},[151,380,336],{"class":164},[151,382,384],{"class":153,"line":383},14,[151,385,172],{"class":164},[19,387,389],{"id":388},"code-splitting","Code Splitting",[15,391,392],{},"Split your JavaScript bundles:",[141,394,398],{"className":395,"code":396,"language":397,"meta":146,"style":146},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Dynamic imports\nconst module = await import('./heavy-module.js')\n\n// Route-based splitting in Vue\nconst routes = [\n  {\n    path: '/dashboard',\n    component: () => import('./views/Dashboard.vue')\n  }\n]\n","javascript",[148,399,400,405,437,441,446,458,463,482,509,514],{"__ignoreMap":146},[151,401,402],{"class":153,"line":154},[151,403,404],{"class":157},"// Dynamic imports\n",[151,406,407,410,414,416,420,423,426,429,432,434],{"class":153,"line":161},[151,408,409],{"class":184},"const",[151,411,413],{"class":412},"sTEyZ"," module ",[151,415,188],{"class":164},[151,417,419],{"class":418},"s7zQu"," await",[151,421,422],{"class":164}," import",[151,424,425],{"class":412},"(",[151,427,428],{"class":164},"'",[151,430,431],{"class":194},"./heavy-module.js",[151,433,428],{"class":164},[151,435,436],{"class":412},")\n",[151,438,439],{"class":153,"line":175},[151,440,304],{"emptyLinePlaceholder":303},[151,442,443],{"class":153,"line":214},[151,444,445],{"class":157},"// Route-based splitting in Vue\n",[151,447,448,450,453,455],{"class":153,"line":245},[151,449,409],{"class":184},[151,451,452],{"class":412}," routes ",[151,454,188],{"class":164},[151,456,457],{"class":412}," [\n",[151,459,460],{"class":153,"line":290},[151,461,462],{"class":164},"  {\n",[151,464,465,468,471,474,477,479],{"class":153,"line":300},[151,466,467],{"class":168},"    path",[151,469,470],{"class":164},":",[151,472,473],{"class":164}," '",[151,475,476],{"class":194},"/dashboard",[151,478,428],{"class":164},[151,480,481],{"class":164},",\n",[151,483,484,488,490,493,496,498,500,502,505,507],{"class":153,"line":307},[151,485,487],{"class":486},"s2Zo4","    component",[151,489,470],{"class":164},[151,491,492],{"class":164}," ()",[151,494,495],{"class":184}," =>",[151,497,422],{"class":164},[151,499,425],{"class":412},[151,501,428],{"class":164},[151,503,504],{"class":194},"./views/Dashboard.vue",[151,506,428],{"class":164},[151,508,436],{"class":412},[151,510,511],{"class":153,"line":313},[151,512,513],{"class":164},"  }\n",[151,515,516],{"class":153,"line":323},[151,517,518],{"class":412},"]\n",[19,520,522],{"id":521},"lazy-loading","Lazy Loading",[15,524,525],{},"Load content only when needed:",[141,527,531],{"className":528,"code":529,"language":530,"meta":146,"style":146},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003C!-- Lazy load images -->\n  \u003Cimg src=\"image.jpg\" loading=\"lazy\" alt=\"Description\">\n  \n  \u003C!-- Lazy load components -->\n  \u003CSuspense>\n    \u003Ctemplate #default>\n      \u003CDataVisualization />\n    \u003C/template>\n    \u003Ctemplate #fallback>\n      \u003CLoadingSpinner />\n    \u003C/template>\n  \u003C/Suspense>\n\u003C/template>\n\n\u003Cscript setup>\nimport { defineAsyncComponent } from 'vue'\n\nconst DataVisualization = defineAsyncComponent(() =>\n  import('./DataVisualization.vue')\n)\n\u003C/script>\n","vue",[148,532,533,542,547,585,590,595,604,619,630,639,652,661,669,678,686,691,704,729,734,754,771,776],{"__ignoreMap":146},[151,534,535,537,540],{"class":153,"line":154},[151,536,165],{"class":164},[151,538,539],{"class":168},"template",[151,541,172],{"class":164},[151,543,544],{"class":153,"line":161},[151,545,546],{"class":157},"  \u003C!-- Lazy load images -->\n",[151,548,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583],{"class":153,"line":175},[151,550,178],{"class":164},[151,552,250],{"class":168},[151,554,253],{"class":184},[151,556,188],{"class":164},[151,558,191],{"class":164},[151,560,227],{"class":194},[151,562,191],{"class":164},[151,564,276],{"class":184},[151,566,188],{"class":164},[151,568,191],{"class":164},[151,570,283],{"class":194},[151,572,191],{"class":164},[151,574,264],{"class":184},[151,576,188],{"class":164},[151,578,191],{"class":164},[151,580,271],{"class":194},[151,582,191],{"class":164},[151,584,172],{"class":164},[151,586,587],{"class":153,"line":214},[151,588,589],{"class":412},"  \n",[151,591,592],{"class":153,"line":245},[151,593,594],{"class":157},"  \u003C!-- Lazy load components -->\n",[151,596,597,599,602],{"class":153,"line":290},[151,598,178],{"class":164},[151,600,601],{"class":168},"Suspense",[151,603,172],{"class":164},[151,605,606,609,611,614,617],{"class":153,"line":300},[151,607,608],{"class":164},"    \u003C",[151,610,539],{"class":168},[151,612,613],{"class":164}," #",[151,615,616],{"class":184},"default",[151,618,172],{"class":164},[151,620,621,624,627],{"class":153,"line":307},[151,622,623],{"class":164},"      \u003C",[151,625,626],{"class":168},"DataVisualization",[151,628,629],{"class":164}," />\n",[151,631,632,635,637],{"class":153,"line":313},[151,633,634],{"class":164},"    \u003C/",[151,636,539],{"class":168},[151,638,172],{"class":164},[151,640,641,643,645,647,650],{"class":153,"line":323},[151,642,608],{"class":164},[151,644,539],{"class":168},[151,646,613],{"class":164},[151,648,649],{"class":184},"fallback",[151,651,172],{"class":164},[151,653,654,656,659],{"class":153,"line":339},[151,655,623],{"class":164},[151,657,658],{"class":168},"LoadingSpinner",[151,660,629],{"class":164},[151,662,663,665,667],{"class":153,"line":354},[151,664,634],{"class":164},[151,666,539],{"class":168},[151,668,172],{"class":164},[151,670,671,674,676],{"class":153,"line":369},[151,672,673],{"class":164},"  \u003C/",[151,675,601],{"class":168},[151,677,172],{"class":164},[151,679,680,682,684],{"class":153,"line":383},[151,681,293],{"class":164},[151,683,539],{"class":168},[151,685,172],{"class":164},[151,687,689],{"class":153,"line":688},15,[151,690,304],{"emptyLinePlaceholder":303},[151,692,694,696,699,702],{"class":153,"line":693},16,[151,695,165],{"class":164},[151,697,698],{"class":168},"script",[151,700,701],{"class":184}," setup",[151,703,172],{"class":164},[151,705,707,710,713,716,719,722,724,726],{"class":153,"line":706},17,[151,708,709],{"class":418},"import",[151,711,712],{"class":164}," {",[151,714,715],{"class":412}," defineAsyncComponent",[151,717,718],{"class":164}," }",[151,720,721],{"class":418}," from",[151,723,473],{"class":164},[151,725,530],{"class":194},[151,727,728],{"class":164},"'\n",[151,730,732],{"class":153,"line":731},18,[151,733,304],{"emptyLinePlaceholder":303},[151,735,737,739,742,744,746,748,751],{"class":153,"line":736},19,[151,738,409],{"class":184},[151,740,741],{"class":412}," DataVisualization ",[151,743,188],{"class":164},[151,745,715],{"class":486},[151,747,425],{"class":412},[151,749,750],{"class":164},"()",[151,752,753],{"class":184}," =>\n",[151,755,757,760,762,764,767,769],{"class":153,"line":756},20,[151,758,759],{"class":164},"  import",[151,761,425],{"class":412},[151,763,428],{"class":164},[151,765,766],{"class":194},"./DataVisualization.vue",[151,768,428],{"class":164},[151,770,436],{"class":412},[151,772,774],{"class":153,"line":773},21,[151,775,436],{"class":412},[151,777,779,781,783],{"class":153,"line":778},22,[151,780,293],{"class":164},[151,782,698],{"class":168},[151,784,172],{"class":164},[19,786,788],{"id":787},"caching-strategies","Caching Strategies",[15,790,791],{},"Implement effective caching:",[141,793,795],{"className":395,"code":794,"language":397,"meta":146,"style":146},"// Service Worker caching\nself.addEventListener('fetch', (event) => {\n  event.respondWith(\n    caches.match(event.request).then((response) => {\n      return response || fetch(event.request)\n    })\n  )\n})\n\n// HTTP caching headers\nCache-Control: public, max-age=31536000, immutable\n",[148,796,797,802,840,853,892,916,923,928,935,939,944],{"__ignoreMap":146},[151,798,799],{"class":153,"line":154},[151,800,801],{"class":157},"// Service Worker caching\n",[151,803,804,807,810,813,815,817,820,822,825,828,832,835,837],{"class":153,"line":161},[151,805,806],{"class":412},"self",[151,808,809],{"class":164},".",[151,811,812],{"class":486},"addEventListener",[151,814,425],{"class":412},[151,816,428],{"class":164},[151,818,819],{"class":194},"fetch",[151,821,428],{"class":164},[151,823,824],{"class":164},",",[151,826,827],{"class":164}," (",[151,829,831],{"class":830},"sHdIc","event",[151,833,834],{"class":164},")",[151,836,495],{"class":184},[151,838,839],{"class":164}," {\n",[151,841,842,845,847,850],{"class":153,"line":175},[151,843,844],{"class":412},"  event",[151,846,809],{"class":164},[151,848,849],{"class":486},"respondWith",[151,851,852],{"class":168},"(\n",[151,854,855,858,860,863,865,867,869,872,874,876,879,881,883,886,888,890],{"class":153,"line":214},[151,856,857],{"class":412},"    caches",[151,859,809],{"class":164},[151,861,862],{"class":486},"match",[151,864,425],{"class":168},[151,866,831],{"class":412},[151,868,809],{"class":164},[151,870,871],{"class":412},"request",[151,873,834],{"class":168},[151,875,809],{"class":164},[151,877,878],{"class":486},"then",[151,880,425],{"class":168},[151,882,425],{"class":164},[151,884,885],{"class":830},"response",[151,887,834],{"class":164},[151,889,495],{"class":184},[151,891,839],{"class":164},[151,893,894,897,900,903,906,908,910,912,914],{"class":153,"line":245},[151,895,896],{"class":418},"      return",[151,898,899],{"class":412}," response",[151,901,902],{"class":164}," ||",[151,904,905],{"class":486}," fetch",[151,907,425],{"class":168},[151,909,831],{"class":412},[151,911,809],{"class":164},[151,913,871],{"class":412},[151,915,436],{"class":168},[151,917,918,921],{"class":153,"line":290},[151,919,920],{"class":164},"    }",[151,922,436],{"class":168},[151,924,925],{"class":153,"line":300},[151,926,927],{"class":168},"  )\n",[151,929,930,933],{"class":153,"line":307},[151,931,932],{"class":164},"}",[151,934,436],{"class":412},[151,936,937],{"class":153,"line":313},[151,938,304],{"emptyLinePlaceholder":303},[151,940,941],{"class":153,"line":323},[151,942,943],{"class":157},"// HTTP caching headers\n",[151,945,946,949,952,956,958,961,963,966,968,971,973,977,979],{"class":153,"line":339},[151,947,948],{"class":412},"Cache",[151,950,951],{"class":164},"-",[151,953,955],{"class":954},"sBMFI","Control",[151,957,470],{"class":164},[151,959,960],{"class":412}," public",[151,962,824],{"class":164},[151,964,965],{"class":412}," max",[151,967,951],{"class":164},[151,969,970],{"class":412},"age",[151,972,188],{"class":164},[151,974,976],{"class":975},"sbssI","31536000",[151,978,824],{"class":164},[151,980,981],{"class":412}," immutable\n",[19,983,985],{"id":984},"minimize-javascript","Minimize JavaScript",[15,987,988],{},"Reduce JavaScript execution time:",[990,991,992,998,1004,1017],"ol",{},[27,993,994,997],{},[30,995,996],{},"Tree shaking"," - Remove unused code",[27,999,1000,1003],{},[30,1001,1002],{},"Minification"," - Compress code",[27,1005,1006,1009,1010,1013,1014],{},[30,1007,1008],{},"Defer non-critical scripts"," - Use ",[148,1011,1012],{},"defer"," or ",[148,1015,1016],{},"async",[27,1018,1019,1022,1023],{},[30,1020,1021],{},"Remove unused dependencies"," - Audit your ",[148,1024,1025],{},"package.json",[19,1027,1029],{"id":1028},"database-optimization","Database Optimization",[15,1031,1032],{},"For backend performance:",[24,1034,1035,1041,1047,1053],{},[27,1036,1037,1040],{},[30,1038,1039],{},"Use indexes"," - Speed up queries",[27,1042,1043,1046],{},[30,1044,1045],{},"Implement caching"," - Redis, Memcached",[27,1048,1049,1052],{},[30,1050,1051],{},"Connection pooling"," - Reuse database connections",[27,1054,1055,1058],{},[30,1056,1057],{},"Query optimization"," - Avoid N+1 queries",[19,1060,1062],{"id":1061},"monitoring","Monitoring",[15,1064,1065],{},"Track performance over time:",[24,1067,1068,1074,1080,1086],{},[27,1069,1070,1073],{},[30,1071,1072],{},"Lighthouse"," - Automated audits",[27,1075,1076,1079],{},[30,1077,1078],{},"WebPageTest"," - Detailed performance analysis",[27,1081,1082,1085],{},[30,1083,1084],{},"Real User Monitoring (RUM)"," - Track actual user experience",[27,1087,1088,1091],{},[30,1089,1090],{},"Chrome DevTools"," - Profile and debug performance",[19,1093,1095],{"id":1094},"quick-wins-checklist","Quick Wins Checklist",[24,1097,1100,1109,1115,1121,1127,1133,1139,1145,1151,1157],{"className":1098},[1099],"contains-task-list",[27,1101,1104,1108],{"className":1102},[1103],"task-list-item",[1105,1106],"input",{"disabled":303,"type":1107},"checkbox"," Enable gzip/brotli compression",[27,1110,1112,1114],{"className":1111},[1103],[1105,1113],{"disabled":303,"type":1107}," Minify CSS and JavaScript",[27,1116,1118,1120],{"className":1117},[1103],[1105,1119],{"disabled":303,"type":1107}," Optimize images (WebP, compression)",[27,1122,1124,1126],{"className":1123},[1103],[1105,1125],{"disabled":303,"type":1107}," Implement lazy loading",[27,1128,1130,1132],{"className":1129},[1103],[1105,1131],{"disabled":303,"type":1107}," Use a CDN",[27,1134,1136,1138],{"className":1135},[1103],[1105,1137],{"disabled":303,"type":1107}," Enable browser caching",[27,1140,1142,1144],{"className":1141},[1103],[1105,1143],{"disabled":303,"type":1107}," Reduce HTTP requests",[27,1146,1148,1150],{"className":1147},[1103],[1105,1149],{"disabled":303,"type":1107}," Inline critical CSS",[27,1152,1154,1156],{"className":1153},[1103],[1105,1155],{"disabled":303,"type":1107}," Defer non-critical JavaScript",[27,1158,1160,1162],{"className":1159},[1103],[1105,1161],{"disabled":303,"type":1107}," Optimize fonts (font-display: swap)",[19,1164,1166],{"id":1165},"conclusion","Conclusion",[15,1168,1169],{},"Performance optimization is an ongoing process. Start with the quick wins, measure the impact, and continuously improve. Your users (and your business) will thank you!",[1171,1172,1173],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":146,"searchDepth":161,"depth":161,"links":1175},[1176,1177,1182,1183,1184,1185,1186,1187,1188,1189,1190],{"id":21,"depth":161,"text":22},{"id":54,"depth":161,"text":55,"children":1178},[1179,1180,1181],{"id":62,"depth":175,"text":63},{"id":88,"depth":175,"text":89},{"id":113,"depth":175,"text":114},{"id":135,"depth":161,"text":136},{"id":388,"depth":161,"text":389},{"id":521,"depth":161,"text":522},{"id":787,"depth":161,"text":788},{"id":984,"depth":161,"text":985},{"id":1028,"depth":161,"text":1029},{"id":1061,"depth":161,"text":1062},{"id":1094,"depth":161,"text":1095},{"id":1165,"depth":161,"text":1166},"Complete web performance optimization guide: lazy loading, code splitting, image optimization, Core Web Vitals, Lighthouse scores, caching, and CDN. Actionable techniques for React, Vue, and Nuxt.","md",{"author":1194,"date":1195,"image":1196,"category":1197,"tags":1198,"featured":303,"draft":1209},"WonderCoder Team","2025-11-10T11:00:00.000Z","/img/web-performance/web-performance.webp","Performance",[1199,1200,1201,1202,54,1203,1204,1205,1206,388,1207,1208],"performance","optimization","web-development","best-practices","lighthouse-optimization","page-speed-improvement","how-to-improve-website-speed","lazy-loading-guide","web-performance-tips-2025","lcp-fid-cls-optimization",false,"/blog/web-performance-optimization",{"title":5,"description":1191},{"loc":1210},"blog/web-performance-optimization","8teIc69coUkPRvUGYEnybnPshVzMP1yEVSdfYKWvF6c",1782986783060]