[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-10x-faster-nuxt-builds-on-netlify-i18n-slugs":134,"language-blog-slug-en-10x-faster-nuxt-builds-on-netlify":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","10x-faster-nuxt-builds-on-netlify",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":149,"authors":150,"introTitle":159,"items":160,"pivots":294,"relatedBlogPosts":305,"tags":306,"onMountedScript":153,"onUnmountedScript":153},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"10x Faster Nuxt builds on Netlify","How can we create faster Nuxt builds on Netlify without affecting UX or site performance? ",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1568908694-nuxt-generate-fast.png",false,null,"2019-09-30T02:00:00.000+02:00",[151],{"name":152,"lastName":153,"slug":154,"image":155},"Jasper","","jasper",{"url":156,"alt":148,"width":157,"height":158},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,"How can we create faster Nuxt builds on Netlify without affecting UX or site performance?",[161,165,174,177,181,186,192,195,199,203,206,210,213,217,220,223,226,229,233,236,240,244,247,250,253,257,266,269,277,280,287,290],{"__typename":162,"id":163,"title":153,"body":164},"TextSectionRecord","1521919","\u003Cp>\u003Cspan>We love building fast, progressively enhanced websites for everyone using \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002F\">Nuxt\u003C\u002Fa>\u003Cspan> and \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002F\">Netlify\u003C\u002Fa>\u003Cspan>. But building \u003C\u002Fspan>\u003Cstrong>hundreds of web pages\u003C\u002Fstrong>\u003Cspan> with Nuxt on Netlify resulted in builds taking up to \u003C\u002Fspan>\u003Cstrong>30 minutes or more\u003C\u002Fstrong>\u003Cspan>, causing a timeout on Netlify and our sites failing to deploy :(\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":167,"image":168,"caption":170,"fullWidth":147,"captionPosition":173},"ImageRecord","1521920",{"url":169,"alt":170,"width":171,"height":172},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1568908862-netlify-deploy-timeout.jpg","Netlify deploy failing after 30 minutes",2160,310,"bottom",{"__typename":162,"id":175,"title":153,"body":176},"1521921","\u003Cp>So the question is, \u003Cstrong>how can we create faster builds without affecting UX or site performance? \u003C\u002Fstrong>TL;DR:\u003C\u002Fp>\n\u003Col class=\"list--numbered\">\n\u003Cli>Optimise HTML minification\u003C\u002Fli>\n\u003Cli>Mute logs\u003C\u002Fli>\n\u003Cli>Remove unneeded dependencies\u003C\u002Fli>\n\u003Cli>Disable “all” post-processing\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Let’s first have a look at our Nuxt + Netlify setup:\u003C\u002Fp>",{"__typename":162,"id":178,"title":179,"body":180},"1521922","Generating static Nuxt websites","\u003Cp>\u003Cspan>Nuxt is a framework to build isomorphic Vue apps. Meaning application routing and rendering HTML work both on the server (on first page view) and in the browser (on subsequent navigations). However this setup requires a Node.js server to do the server-side part. We like to keep our setups as simple and carefree as possible. So we prefer static hosting on a CDN (content delivery network) over a dynamic Node.js server. Luckily \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fguide\u002Fcommands\u002F#static-generated-deployment-pre-rendered-\">Nuxt has a command to generate static deployments\u003C\u002Fa>\u003Cspan>:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":182,"id":183,"language":184,"body":185},"CodeBlockRecord","1521923","bash","nuxt generate",{"__typename":166,"id":187,"image":188,"caption":189,"fullWidth":147,"captionPosition":173},"1521924",{"url":146,"alt":189,"width":190,"height":191},"Nuxt generate log: generated 833 pages in 1m38s",1668,986,{"__typename":162,"id":193,"title":153,"body":194},"1521925","\u003Cp>This command pre-renders each page (and \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fapi\u002Fconfiguration-generate#routes\">supports dynamic routes too\u003C\u002Fa>). All you need to know is which pages (routes) to render and when to render them. In our case it’s often a git push, publishing from a cms or a \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fscheduling-netlify-deploys-with-github-actions\u002F\">cron job triggering a Netlify deploy\u003C\u002Fa> which runs \u003Ccode>nuxt generate\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Nuxt generate works great on Netlify. But the larger our websites get, the slower our deploys become. And if they take too long Netlify deploys fail with a “Build exceeded maximum allowed runtime” error.\u003C\u002Fp>\n\u003Cp>What can we do to fix this?\u003C\u002Fp>",{"__typename":162,"id":196,"title":197,"body":198},"1521926","Optimise HTML minification","\u003Cp>Nuxt warns for API calls slowing down generating static pages and \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fapi\u002Fconfiguration-generate\u002F#speeding-up-dynamic-route-generation-with-code-payload-code-\">advises using the payload option\u003C\u002Fa>. However even without API calls and without using the store we found large HTML pages significantly slowed down the build.\u003C\u002Fp>\n\u003Cp>After a journey through the Nuxt source code we stumbled upon the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002F5fa768373da1adfd8c76145b2ec95b7824af93b4\u002Fpackages\u002Fconfig\u002Fsrc\u002Fconfig\u002Fbuild.js#L89-L101\">default HTML minification settings\u003C\u002Fa> used for post-processing builds:\u003C\u002Fp>",{"__typename":182,"id":200,"language":201,"body":202},"1521927","js","build: {\n  html: {\n    minify: {\n      collapseBooleanAttributes: true,\n      decodeEntities: true,\n      minifyCSS: true,\n      minifyJS: true,\n      processConditionalComments: true,\n      removeEmptyAttributes: true,\n      removeRedundantAttributes: true,\n      trimCustomFragments: true,\n      useShortDoctype: true\n    }\n  }\n}",{"__typename":162,"id":204,"title":153,"body":205},"1521928","\u003Cp>While we encourage squeezing out every last byte on the critical rendering path, there are two settings that spoil our build times: \u003Ccode>minifyCSS\u003C\u002Fcode> and \u003Ccode>minifyJS\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Nuxt already \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002F5fa768373da1adfd8c76145b2ec95b7824af93b4\u002Fpackages\u002Fwebpack\u002Fsrc\u002Fconfig\u002Fclient.js#L62-L74\">minifies CSS using OptimizeCSSAssetsPlugin\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002Fda4615a160f356d7368e66956758345d674948d0\u002Fpackages\u002Fwebpack\u002Fsrc\u002Fconfig\u002Fbase.js#L183-L213\">minifies JS using TerserWebpackPlugin\u003C\u002Fa>. So we can actually disable inline CSS and JS minification for the HTML minifier in our \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fapi\u002Fconfiguration-build#html-minify\">build settings\u003C\u002Fa>:\u003C\u002Fp>",{"__typename":182,"id":207,"language":208,"body":209},"1521929","diff","build: {\n  html: {\n    minify: {\n      collapseBooleanAttributes: true,\n      decodeEntities: true,\n-     minifyCSS: true,\n+     minifyCSS: false,\n-     minifyJS: true,\n+     minifyJS: false,\n      processConditionalComments: true,\n      removeEmptyAttributes: true,\n      removeRedundantAttributes: true,\n      trimCustomFragments: true,\n      useShortDoctype: true\n    }\n  }\n}",{"__typename":162,"id":211,"title":153,"body":212},"1521930","\u003Cp>Running Nuxt generate with these settings results is equal page sizes, but much faster build times. For example, the build time of one of our projects with 833 pages went down from 5h33m21s to 1m38s. \u003Cstrong>That’s over 200x faster!\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>We also experimented with disabling \u003Ccode>html.minify\u003C\u002Fcode> entirely, but this didn’t have any significant effect on the build time.\u003C\u002Fp>\n\u003Cp>This benchmark was performed locally by running \u003Ccode>time nuxt generate\u003C\u002Fcode> as Netlify times out after 30 minutes. Deploys on Netlify will be slower than on a local machine, but at least now we can build all of our pages on Netlify.\u003C\u002Fp>",{"__typename":162,"id":214,"title":215,"body":216},"1521944","Skip streaming logs","\u003Cp>On Netlify we run into our next \u003Ccode>nuxt generate\u003C\u002Fcode> issue. For every page Nuxt generates, it logs a line to the console. And on Netlify this causes our deploys to slow down. So we reached out and got a useful reply:\u003C\u002Fp>\n\u003Cblockquote class=\"blockquote--minimal\">\n\u003Cp>It does look like your build is logging out a lot of lines. Note that because of the way we stream build logs, each logged line does have a time cost. The more you have, the more likely it can slow down your build.\u003C\u002Fp>\n\u003Cp>— \u003Cstrong>Dennis\u003C\u002Fstrong> from Netlify\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>As we couldn’t do anything on the Netlify side, we \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fissues\u002F5510\">filed an issue on the Nuxt repository\u003C\u002Fa>, followed by a \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fpull\u002F5517\u002Ffiles\">pull request to remedy the issue\u003C\u002Fa>. Eventually the issue was \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002Fe7cc2757c3aea7076b82fc9c65700d48eab01586\u002Fpackages\u002Fcli\u002Fsrc\u002Fcommands\u002Fgenerate.js#L28-L39\">solved by adding a\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002Fe7cc2757c3aea7076b82fc9c65700d48eab01586\u002Fpackages\u002Fcli\u002Fsrc\u002Fcommands\u002Fgenerate.js#L28-L39\">\u003Cstrong>quiet\u003C\u002Fstrong>\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002Fe7cc2757c3aea7076b82fc9c65700d48eab01586\u002Fpackages\u002Fcli\u002Fsrc\u002Fcommands\u002Fgenerate.js#L28-L39\">option\u003C\u002Fa> to the generate command. So now you can disable all output except for errors using:\u003C\u002Fp>",{"__typename":182,"id":218,"language":184,"body":219},"1521945","nuxt generate --quiet",{"__typename":162,"id":221,"title":153,"body":222},"1521946","\u003Cp>Note this option is not in the Nuxt documentation on generate, but can be found when running \u003Ccode>nuxt generate --help\u003C\u002Fcode> and is also described as a \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fapi\u002Fconfiguration-build#quiet\">build option\u003C\u002Fa>. Also note that \u003Ca href=\"https:\u002F\u002Fdocs.npmjs.com\u002Fmisc\u002Fconfig#shorthands-and-other-cli-niceties\">npm uses the same\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fdocs.npmjs.com\u002Fmisc\u002Fconfig#shorthands-and-other-cli-niceties\">\u003Ccode>--quiet\u003C\u002Fcode> flag\u003C\u002Fa> as a loglevel alias, but Nuxt ignores the npm loglevel.\u003C\u002Fp>\n\u003Cp>On Netlify we like to run the default generate command as it’s part of a larger build script. Luckily \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fblob\u002F5fa768373da1adfd8c76145b2ec95b7824af93b4\u002Fpackages\u002Fconfig\u002Fsrc\u002Fconfig\u002Fbuild.js#L4\">Nuxt also checks for a \u003Ccode>CI\u003C\u002Fcode> environment variable\u003C\u002Fa>. So we can achieve the same using:\u003C\u002Fp>",{"__typename":182,"id":224,"language":184,"body":225},"1521947","CI=1 nuxt generate",{"__typename":162,"id":227,"title":153,"body":228},"1521948","\u003Cp>\u003Cspan>Now we can keep our build script, and configure the \u003C\u002Fspan>\u003Ccode>CI\u003C\u002Fcode>\u003Cspan> \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002Fdocs\u002Fcontinuous-deployment\u002F#environment-variables\">environment variable on Netlify\u003C\u002Fa>\u003Cspan> via the dashboard or in our \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002Fdocs\u002Fnetlify-toml-reference\u002F\">\u003Ccode>netlify.toml\u003C\u002Fcode> file\u003C\u002Fa>\u003Cspan>:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":182,"id":230,"language":231,"body":232},"1521949","toml","# netlify.toml\n[build.environment]\n  CI = \"1\"",{"__typename":162,"id":234,"title":153,"body":235},"1521950","\u003Cp>With this simple change we saw our build times drop immediately.\u003C\u002Fp>",{"__typename":162,"id":237,"title":238,"body":239},"1521952","Skip optional dependencies","\u003Cp>While not Nuxt specific, there’s another simple change we can apply to make our Netlify deploys faster: only install the dependencies you need and skip optional dependencies.\u003C\u002Fp>\n\u003Cp>We sometimes depend on large packages like Cypress. Cypress is a great testing framework. But is dramatic for our npm install times. So we can make it an optional dependency:\u003C\u002Fp>",{"__typename":182,"id":241,"language":242,"body":243},"1521953","json","\"optionalDependencies\": {\n    \"cypress\": \"3.2.0\"\n}",{"__typename":162,"id":245,"title":153,"body":246},"1521954","\u003Cp>Now our other CI services can still use Cypress, but we can drop our optional dependencies on Netlify using the npm \u003Ccode>--no-optional\u003C\u002Fcode> flag:\u003C\u002Fp>\n\u003Cblockquote class=\"blockquote--minimal\">\n\u003Cp>The \u003Cstrong>\u003Ccode>--no-optional\u003C\u002Fcode>\u003C\u002Fstrong> argument will prevent optional dependencies from being installed.\u003C\u002Fp>\n\u003Cp>— \u003Ca href=\"https:\u002F\u002Fdocs.npmjs.com\u002Fcli\u002Finstall\">npm documentation\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>Again we configure this using an \u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002Fdocs\u002Fcontinuous-deployment\u002F#environment-variables\">environment variable on Netlify\u003C\u002Fa>. In this case with the \u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002Fdocs\u002Fbuild-settings\u002F#build-environment-variables\">\u003Ccode>NPM_FLAGS\u003C\u002Fcode>variable\u003C\u002Fa>:\u003C\u002Fp>",{"__typename":182,"id":248,"language":231,"body":249},"1521958","# netlify.toml\n[build.environment]\n  NPM_FLAGS = \"--no-optional\"",{"__typename":162,"id":251,"title":153,"body":252},"1521959","\u003Cp>Note that the same is possible for Yarn (\u003Ca href=\"https:\u002F\u002Fyarnpkg.com\u002Flang\u002Fen\u002Fdocs\u002Fcli\u002Finstall\u002F#toc-yarn-install-ignore-optional\">\u003Ccode>yarn install --ignore-optional\u003C\u002Fcode>\u003C\u002Fa>). But \u003Ca href=\"https:\u002F\u002Fwww.netlify.com\u002Fdocs\u002Fbuild-gotchas\u002F#yarn\">shouldn’t be necessary on Netlify when you have a \u003Ccode>yarn.lock\u003C\u002Fcode> in your repository\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Skipping our optional dependencies typically saves us a few minutes per build.\u003C\u002Fp>",{"__typename":162,"id":254,"title":255,"body":256},"1521960","Disable post processing on Netlify","\u003Cp>\u003Cspan>Nuxt already does all our post processing optimisations. So we don't need Netlify to do this. We can disable most post processing in our Netlify settings > Build & deploy > Post processing:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":258,"image":259,"caption":261,"fullWidth":264,"captionPosition":265},"176470591",{"url":260,"alt":261,"width":262,"height":263},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1569829583-netlify-post-processing-options.jpg","post processing options for our Netlify project",1664,1124,true,"left",{"__typename":162,"id":267,"title":153,"body":268},"1541468","\u003Cp>Obviously we don’t need Netlify Pre-rendering as we use Nuxt generate to do just that. Nuxt also does all of our asset optimisation and could do snippet injection when needed. But even with all these settings disabled, Netlify’s post processing still takes ~ 2 minutes:\u003C\u002Fp>",{"__typename":166,"id":270,"image":271,"caption":276,"fullWidth":264,"captionPosition":173},"1541469",{"url":272,"alt":273,"width":274,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1569829764-netlify-deploy-default-post-processing.jpg","Netlify deploy logs show post processing takes ~2min with default settings",1326,656,"Before: Netlify deploy logs show post processing takes ~2min with default settings",{"__typename":162,"id":278,"title":153,"body":279},"1541470","\u003Cp>So \u003Ca href=\"https:\u002F\u002Fcommunity.netlify.com\u002Ft\u002Fcompletely-disabling-post-processing-of-deploys\u002F2678\u002F1\">we reached out to the Netlify community\u003C\u002Fa> and received some useful feedback:\u003C\u002Fp>\n\u003Cblockquote class=\"blockquote--minimal\">\n\u003Cp>Two things you can’t control in post processing:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>form detection.\u003C\u002Fstrong> We can disable this for you as long as you have optimisation totally disabled (I see you do), AND you don’t want to use our forms service. If this is true, let me know your site’s API ID and I can turn off forms processing for you.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>mixed content warnings.\u003C\u002Fstrong> We look for \u003Ccode>http:\u002F\u002F\u003C\u002Fcode> links in your pages and tell you about those so you’ll be aware that a browser is likely to act ugly when displaying the pages. No way to disable this.\u003C\u002Fp>\n\u003Cp>— \u003Ca href=\"https:\u002F\u002Fcommunity.netlify.com\u002Ft\u002Fcompletely-disabling-post-processing-of-deploys\u002F2678\u002F2\">\u003Cstrong>Chris\u003C\u002Fstrong>\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fcommunity.netlify.com\u002Ft\u002Fcompletely-disabling-post-processing-of-deploys\u002F2678\u002F2\">from Netlify\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>In the project above, we are not using Netlify forms, so we requested to turn off form-processing:\u003C\u002Fp>",{"__typename":166,"id":281,"image":282,"caption":286,"fullWidth":264,"captionPosition":173},"1541471",{"url":283,"alt":284,"width":285,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1569829997-netlify-deploy-fast-post-processing.jpg","Netlify deploy logs post processing takes ~5sec with form-processing disabled",1308,"After: Netlify deploy logs post processing takes ~5sec with form-processing disabled",{"__typename":162,"id":288,"title":153,"body":289},"1541472","\u003Cp>With the form-processing disabled our post processing times are \u003Cstrong>down from ~2min to ~5sec\u003C\u002Fstrong>!\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fcommunity.netlify.com\u002Ft\u002Fcompletely-disabling-post-processing-of-deploys\u002F2678\u002F8?u=jbmoelker\">Phil Hawksworth liked the idea of making this a configurable feature\u003C\u002Fa>, so \u003Cem>maybe\u003C\u002Fem> we’ll be able to manage this through the Netlify dashboard in the future.\u003C\u002Fp>",{"__typename":162,"id":291,"title":292,"body":293},"1541473","Fast deploys FTW","\u003Cp>With these optimisations we are able to generate and deploy hundreds and sometimes even thousands of Nuxt pages on Netlify in a matter of minutes.\u003C\u002Fp>\u003Cp>We’ll keep experimenting with new ways to optimise the speed of our builds. Tweaking \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fapi\u002Fconfiguration-generate\u002F#concurrency\">\u003Ccode>generate.concurrency\u003C\u002Fcode>\u003C\u002Fa> had inconsistent results and using \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fnuxt-generate-cluster\">\u003Ccode>nuxt-generate-cluster\u003C\u002Fcode>\u003C\u002Fa> produced incorrect builds. Maybe \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fnuxt_js\u002Fstatus\u002F966979855039549442\">incremental Nuxt builds\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fphilhawksworth\u002Fcontent-shards\">content sharding\u003C\u002Fa> and Netlify’s secret cache (\u003Ccode>\u002Fopt\u002Fbuild\u002Fcache\u002F\u003C\u002Fcode>) can make our future builds even faster.\u003C\u002Fp>\u003Cblockquote class=\"blockquote--minimal\">\u003Cp>Do you want to become a Vue master? During our two day hands-on workshop we’ll teach you everything you need to know to build large performant web apps with Vue. Vue is the SPA framework powering Nuxt, so a better understanding of Vue enables you to build better Nuxt projects.\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fvuemaster\">Join our Vue masterclass\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>A special thanks to our colleague \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Ffrank_warnaar\">Frank\u003C\u002Fa> for figuring out the log issues and reviewing the other optimisations in this post. And a big thanks to the Nuxt and Netlify teams for their amazing products and fast & friendly feedback on all our questions!\u003C\u002Fp>",[295],{"title":296,"body":297,"links":298,"mailchimpValue":153,"mailchimpName":153,"mailchimpId":153,"formType":153,"contactPerson":148},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[299],{"__typename":300,"id":301,"title":302,"link":303},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":304},"jobs",[],[],1776256144138]