<story><title>My stack is HTML+CSS</title><url>https://blog.steren.fr/2020/my-stack-will-outlive-yours/</url></story><parent_chain><item><author>Rauchg</author><text>This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `&amp;lt;img&amp;gt;` will ship the same image to every device, regardless of viewport size. Vanilla `&amp;lt;img&amp;gt;` doesn&amp;#x27;t enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the &amp;quot;100&amp;quot; score he&amp;#x27;s currently proud of.&lt;p&gt;Frontend performance is basically an iceberg[1]. We tend to look at the top and that&amp;#x27;s where the fashionable &amp;quot;silver bullet&amp;quot; currently is (whether Rust+wasm or HTML+CSS or a JS framework). Then we find deeper in the iceberg that even a `box-shadow` property[2] can ruin our day, and let alone images, YouTube and Twitter embeds, and all the things that make the web more interesting and powerful than a black page with white text.&lt;p&gt;Oh and it gets even more fun! A Lighthouse score in itself is an over-simplification. There&amp;#x27;s more to a great experience than the initial impression the site makes, like what happens to FPS when you scroll or click around[2]&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;rauchg.com&amp;#x2F;2020&amp;#x2F;next-for-vercel#realistic&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;rauchg.com&amp;#x2F;2020&amp;#x2F;next-for-vercel#realistic&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;ishadeed.com&amp;#x2F;article&amp;#x2F;new-facebook-css#using-an-image-for-the-shadow&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;ishadeed.com&amp;#x2F;article&amp;#x2F;new-facebook-css#using-an-image...&lt;/a&gt;</text></item></parent_chain><comment><author>dceddia</author><text>Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly.&lt;p&gt;It turned out that embedded YouTube videos were pulling down something like 1mb of JS, &lt;i&gt;just to show the thumbnail&lt;/i&gt;, before the user even clicked Play.&lt;p&gt;I ended up making a static thumbnail with a hover-over &amp;quot;play&amp;quot; icon that would replace itself with the real embed when it was clicked. Got the Lighthouse score up and saved all those unnecessary downloads. But it was pretty amazing to me that while one arm of Google is pushing for web performance, another is building this YouTube player that auto-downloads a megabyte of JS just to show a thumbnail.</text></comment>
<story><title>My stack is HTML+CSS</title><url>https://blog.steren.fr/2020/my-stack-will-outlive-yours/</url></story><parent_chain><item><author>Rauchg</author><text>This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `&amp;lt;img&amp;gt;` will ship the same image to every device, regardless of viewport size. Vanilla `&amp;lt;img&amp;gt;` doesn&amp;#x27;t enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the &amp;quot;100&amp;quot; score he&amp;#x27;s currently proud of.&lt;p&gt;Frontend performance is basically an iceberg[1]. We tend to look at the top and that&amp;#x27;s where the fashionable &amp;quot;silver bullet&amp;quot; currently is (whether Rust+wasm or HTML+CSS or a JS framework). Then we find deeper in the iceberg that even a `box-shadow` property[2] can ruin our day, and let alone images, YouTube and Twitter embeds, and all the things that make the web more interesting and powerful than a black page with white text.&lt;p&gt;Oh and it gets even more fun! A Lighthouse score in itself is an over-simplification. There&amp;#x27;s more to a great experience than the initial impression the site makes, like what happens to FPS when you scroll or click around[2]&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;rauchg.com&amp;#x2F;2020&amp;#x2F;next-for-vercel#realistic&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;rauchg.com&amp;#x2F;2020&amp;#x2F;next-for-vercel#realistic&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;ishadeed.com&amp;#x2F;article&amp;#x2F;new-facebook-css#using-an-image-for-the-shadow&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;ishadeed.com&amp;#x2F;article&amp;#x2F;new-facebook-css#using-an-image...&lt;/a&gt;</text></item></parent_chain><comment><author>alberth</author><text>You might not be aware of the ‘&amp;lt;picture&amp;gt;’ HTML tag that only sends the correct size img to the user based on their browser size.&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;developer.mozilla.org&amp;#x2F;en-US&amp;#x2F;docs&amp;#x2F;Learn&amp;#x2F;HTML&amp;#x2F;Multimedia_and_embedding&amp;#x2F;Responsive_images&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;developer.mozilla.org&amp;#x2F;en-US&amp;#x2F;docs&amp;#x2F;Learn&amp;#x2F;HTML&amp;#x2F;Multimed...&lt;/a&gt;</text></comment>