[{"data":1,"prerenderedAt":246},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-performance-hacking-with-amp-i18n-slugs":134,"language-blog-slug-en-performance-hacking-with-amp":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","performance-hacking-with-amp",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":147,"subtitle":79,"isArchived":148,"headerIllustration":149,"date":150,"authors":151,"introTitle":160,"items":161,"pivots":198,"relatedBlogPosts":209,"tags":210,"onMountedScript":154,"onUnmountedScript":154},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Performance hacking with AMP: do or don’t? | De Voorhoede","AMP is an open source framework developed by Google, which promises a smooth experience by loading web pages nearly instantaneous for users.",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1537955645-1533802909-amp.jpg","Performance hacking with AMP: do or don’t?",false,null,"2018-08-09T02:00:00.000+02:00",[152],{"name":153,"lastName":154,"slug":155,"image":156},"Jesse","","jesse",{"url":157,"alt":149,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"AMP’s incredible speed is tempting, but a bigger setback looms",[162,166,170,174,178,187,190,194],{"__typename":163,"id":164,"title":154,"body":165},"TextSectionRecord","401087","\u003Cp>Here at De Voorhoede we give the user experience a top priority when doing client projects. So when \u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002F\">Accelerated Mobile Pages (AMP)\u003C\u002Fa> became a thing, it definitely caught our attention. AMP is an open source framework developed by Google, which promises a smooth experience by loading web pages nearly instantaneous for users.\u003C\u002Fp>\n\u003Cp>That \u003Cem>sounds\u003C\u002Fem> like a perfect thing to use in any project. But when something sounds too good to be true, it usually is. After getting our hands dirty with AMP our skepticism seemed justified, but we were also pleasantly surprised. In this blog post, we’ll explain how AMP works and give you some things to consider before choosing for or against.\u003C\u002Fp>",{"__typename":163,"id":167,"title":168,"body":169},"401088","AMP in practice: BungalowSpecials","\u003Cp>When we started with AMP it was as a side project for our client \u003Ca href=\"https:\u002F\u002Fwww.bungalowspecials.nl\u002F\">BungalowSpecials\u003C\u002Fa>. They wanted a fast mobile experience for their users. It started as a small internal prototype and eventually grew to the mobile version of every bungalow rental page. This was an excellent way to get started with AMP: we were able to learn from actual usage and fine tune the experience before a site wide deployment.\u003C\u002Fp>\n\u003Cp>The performance boost at BungalowSpecials was mostly due to images getting optimised, and AMP’s \u003Ccode>img\u003C\u002Fcode>-component handling lazy loading automatically. Really nice— but lazy loading isn’t the hardest thing to implement without AMP.\u003C\u002Fp>\n\u003Cp>Honestly, the main reason why AMP is really fast is pre-rendering. Google pre-renders AMP pages when you are on their search results page. Once you click the AMP page, you will stay on Googles domain and Google will serve you a pre-rendered, cached version of the page. This will feel — because it almost \u003Cem>is\u003C\u002Fem> — instantaneous. Ofcourse, this only works because Google forces their infrastructure on all AMP pages. Let’s see how that works.\u003C\u002Fp>",{"__typename":163,"id":171,"title":172,"body":173},"401105","Requirements","\u003Cp>There are a few requirements to be met in order to use the AMP framework.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>The \u003Ccode><html>\u003C\u002Fcode> tag needs an \u003Ccode>amp\u003C\u002Fcode> attribute\u003C\u002Fli>\n\u003Cli>Various meta tags are needed\u003C\u002Fli>\n\u003Cli>AMP pages are discovered by Google’s search engine by adding an 'amp' link on the AMP-less page, and a canonical link vice versa on the AMP page\u003C\u002Fli>\n\u003Cli>There is a boilerplate AMP \u003Ccode><style>\u003C\u002Fcode> tag that needs to be added to the page\u003C\u002Fli>\n\u003Cli>The AMP JavaScript framework needs to be loaded\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If your page has these requirements, you’re good to go. To check your page for errors, use Google’s AMP Validation tool. We would recommend creating a proof of concept to see if you can get a valid page, and build from there.\u003C\u002Fp>\n\u003Cp>To get your AMP pages in Google’s search results, there’s tooling to test whether they meet the search engine’s requirements. You can either apply for indexing by submitting your pages, or use the link tags as mentioned above and simply wait for Google to pick up your AMP pages.\u003C\u002Fp>",{"__typename":163,"id":175,"title":176,"body":177},"401108","Considerations and limitations","\u003Cp>There are some serious considerations — and limitations — when building a page with AMP.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>AMP extends HTML by adding custom tags to meet various demands (to illustrate: there’s \u003Ccode>amp-accordion\u003C\u002Fcode> as well as \u003Ccode>amp-analytics\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>You can’t add your own JavaScript. If you want to add behaviour to your page, you are limited to the available AMP components. To be fair, there are quite a few, and they work really well.\u003C\u002Fli>\n\u003Cli>You can add custom styling, but it needs to be inlined.\u003C\u002Fli>\n\u003Cli>AMP pages are hosted by Google.\u003C\u002Fli>\n\u003Cli>Google validates your AMP pages.\u003C\u002Fli>\n\u003Cli>Google automatically caches AMP pages with the so-called AMP Cache.\u003C\u002Fli>\n\u003Cli>When opening an AMP page from Google Results, Google will draw a fake address bar that makes it look like you’re on the content owner’s site. This can be off-throwing to your users.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":179,"id":180,"image":181,"caption":182,"fullWidth":185,"captionPosition":186},"ImageRecord","401116",{"url":146,"alt":182,"width":183,"height":184},"On the left: Google search results showing the lightning icon designating that it’s an AMP page; on the right, the BungalowSpecials AMP page showing the in-page ‘address bar’ below the actual browser bar",922,700,true,"bottom",{"__typename":163,"id":188,"title":154,"body":189},"401117","\u003Cp>For most (and hopefully all) front-end developers these considerations are a serious reason to question whether going for AMP is a good idea. Not just the UI is dictated by Google, but hosting and caching as well.\u003C\u002Fp>\n\u003Cp>The upside is that you can quickly build good-looking, well-behaving web pages that, thanks to Googles infrastructure, perform outstandingly. Even the crabbiest of developers will have to admit that the whole of AMP comes in a solidly crafted package.\u003C\u002Fp>",{"__typename":163,"id":191,"title":192,"body":193},"401118","Our verdict","\u003Cp>High performance equals a great user experience, equals higher conversion of your visitors. AMP follows excellent guidelines to get great performance, but you will invest in a project that is controlled within a Google environment.\u003C\u002Fp>\n\u003Cp>We still believe you can near the speed of an AMP product by adopting a performance budget for the team, and using that budget to make business- and design decisions that always edge toward keeping high performance. A solid front-ender will know what these decisions are in the browser, and a solid back-ender will do the same for their expertise.\u003C\u002Fp>\n\u003Cp>The truth is, there are no silver bullets and AMP is no exception. If you don’t like to get vendorlocked just to get parts of your website performing well, make performance a key metric in your decision making. Otherwise, well, \u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Fgetting_started\u002Fquickstart\">here’s a link\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":163,"id":195,"title":196,"body":197},"401119","The AMP Letter","\u003Cp>\u003Cem>If you as a developer are fond of the ‘open web’ & would like to make a statement and show your discontent with AMP there is the \u003Ca href=\"http:\u002F\u002Fampletter.org\u002F\">AMP letter\u003C\u002Fa> a lot of (prominent) developers signed. \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Famp-letter\u002Famp-letter.github.io\">You can too\u003C\u002Fa>.\u003C\u002Fem>\u003C\u002Fp>",[199],{"title":200,"body":201,"links":202,"mailchimpValue":154,"mailchimpName":154,"mailchimpId":154,"formType":154,"contactPerson":149},"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",[203],{"__typename":204,"id":205,"title":206,"link":207},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":208},"jobs",[],[211],{"id":212,"title":213,"slug":214,"blogPosts":215},"b-HOCOQTRJKMsff0UxhDcg","Web performance ","web-performance",[216,227,238],{"slug":217,"title":218,"date":219,"authors":220},"reclaiming-digital-sovereignty-on-european-infrastructure","Reclaiming Digital Sovereignty on European Infrastructure","2026-01-29T12:02:28.591+01:00",[221],{"name":222,"image":223},"Luuk",{"url":224,"alt":149,"width":225,"height":226},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721036156-luuk-edit-edit.jpg",2198,2969,{"slug":228,"title":229,"date":230,"authors":231},"how-close-to-the-user-should-your-code-be","How close to the user should your code be?","2025-10-30T10:07:10.411+01:00",[232],{"name":233,"image":234},"Jasper",{"url":235,"alt":149,"width":236,"height":237},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":239,"title":240,"date":241,"authors":242},"lessons-learned-debugging-inp"," Lessons learned debugging Interaction to Next Paint (INP)","2024-08-16T09:46:11.712+02:00",[243],{"name":244,"image":245},"Declan",{"url":157,"alt":149,"width":158,"height":159},1776256150371]