There are 162 contents with this tag:
Seriously, do we need yet another version of Low Quality Image Placeholders?
Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?
As a user, I hate LQIP. Single colour backgrounds are fine, though.
Looks like Google likes it when we start improving websites performance! 🚀
According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by only looking at the results, but we can also have a look at the features of each format. Some of them are very important.
Today: we finaly have a Pro account on WebPageTest so we'll be able to use all Opportunities & Experiments! 🥳
Also today, in WebPageTest header: "Notice: WebPageTest's user account services are currently experiencing issues." 😭
Why you need to know your site's performance poverty line (and how to find it)
The performance poverty line is the plateau at which changes to your website’s rendering metrics (such as Start Render and Largest Contentful Paint) cease to matter because you’ve bottomed out in terms of business and user engagement metrics.
I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.
This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞
Why web performance still matters in 2023
Another excellent article from Sia about performance, but also equity and the environment. 😍
Priority Hints and optimizing LCP
Increasing the priority of a resource usually comes at the cost of another resource, so Priority Hints should be used sparingly. However, if the browser is queuing your LCP image, I recommend you experiment with Priority Hints to see if you can reduce this waiting time and improve your LCP.
Same page tested on PageSpeed Insights over a few hours the same day, without anything modified, and the desktop scores vary from 19 to 59… 🤷♂️
A lot of businesses rely on this crap to now if their site is "fast" enough for Google SEO! 😭
The Right Way to Use fonts.com Web Fonts
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a web font in the wrong way.
The Performance Inequality Gap, 2023
Testing performance on actual device should be mandatory for every project, as it makes so many issues obvious.
Beating Latency on Scalemates.com
In order to beat latency you should first try to cache at the CDN.
In all #WebPerf reporting tools with graphs, I would like to be able to quickly set a preferred scale, or ignore certain values that I know are incorrect.
Examples from Contentsquare/Dareboost and SpeedCurve…
⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>s.
There's a bug that might remove them when it shouldn't:
https://github.com/svg/svgo/issues/1726
Of course we don't work on performance improvements only for Google, but the Search Console is our clients' main concern, so when it shows such a graph, it's satisfying for everyone! 🎉
Responsive images on Shopify with Liquid
We launched the image_tag and image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between them?
Sam Magura
Why We're Breaking Up with CSS-in-JS
Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.
Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.
One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.
There is not enough interest from the entire ecosystem to continue experimenting with JPEG XL — https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84
I can't believe this, #Chrome is really removing the support for JPEG XL we've been waiting for years! 😡
Any idea why there's so much TTFB difference on #Netlify for main vs branch deploys?
Here is TTFB for:
If you use #Eleventy and know how to add fetchpriority="high" on your Largest Contenful Paint image, I made a plugin that adds a <link rel="preload"…> for it, even it it's responsive: https://github.com/nhoizey/eleventy-plugin-auto-preload
Feedback welcome! 🙏
This is what happens when you preload the heavy high definition pristine image instead of the responsive version… 😅
Thanks #SpeedCurve for noticing it! 🙏
we hope that our observations and support will help bring JPEG XL support to the web for all chrome users
— @colinbendell from Shopify
https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c79
YES, please! 🙏
width and height attributes on <img> help prevent layout shifts (CLS). Values should be unitless integers.
But #Lighthouse sees 100% as 100, thanks parseInt()…
Do you think it should be improved?
Async Alpine — Asynchronous Alpine component loading
Async Alpine is a wrapper for the fantastic Alpine.js JavaScript library, giving you greater control of component loading and adding asynchronous/lazy loading to Alpine. This makes loading components when visible, for certain screen widths, on events and more, super simple!
Client-side caching is a key technique to improving front-end speed and user experience. Whilst it may appear complex and risky, investing the time to review your content and setting the correct response headers will reduce bandwidth utilisation and improve speed for return visitors as well as mid-session.
When an <img loading="lazy"> is hidden (in a menu for example) but above the fold, when exactly is it downloaded? 🤔
In all browsers?
Is JS-based lazy loading after the load event better for above the fold CSS/JS optimization?
For all the resulting script is asynchronous, the <script> block that creates it is fully synchronous, which means that the discovery of the script is governed by any and all synchronous work that happens before it, whether that’s other synchronous JS, HTML, or even CSS. Effectively, we’ve hidden the file from the browser until the very last moment, which means we’re completely failing to take advantage of one of the browser’s most elegant internals… the Preload Scanner.
How do you deal with images that need to have a fluid width but fixed height?
I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔
Anything better?
I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/
True!
But most images are currently not or badly optimized. 😔
They would benefit a lot from an image CDN: resize, compression, modern formats, etc.
Could sustainable websites increase energy consumption?
Having lost some sleep over this, I am relieved to find that when it comes to the web, Sustainable Web Design is the solution to the Jevons paradox. By maximising efficiency in web design, development and content creation, we can ensure that we preserve the benefits of more efficient hardware. Then by trying to ensure that the web projects we work on are actually good for the world, we can harness the secondary rebound effect to create positive rather than negative environmental impact.
a tool that automatically matches the fallback font to the custom font–because computers are good at that stuff.
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Media chapter of the 2022 Web Almanac by HTTP Archive
I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web, backed by real data and trusted web experts".
Joe Liccini
Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead
Caching assets is a fantastic way to optimize the network overhead of your web application, there is still plenty of computational overhead associated with cached JavaScript.
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links!
The re-execution of code on the client that the server already executed as part of SSR/SSG is what makes hydration pure overhead: that is, a duplication of work by the client that the server already did. The framework could have avoided the cost by transferring information from the server to the client, but instead, it threw the information away.
Joe Liccini
Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead
Most developers still don't understand that large JavaScript code is really hurting performance, let's hope this great explanation by Joe, that this is really not just about network, will help:
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or the right ways actually.
preconnect is still not supported in #Firefox… 😔
Introducing Opportunities & Experiments: Taking the Guesswork out of Performance
The WebPageTest team has been working on improving the platform since Catchpoint acquired them, and now they're releasing awesome new features to help better test performance and try actual improvements! 😍
Why is #Dareboost reporting "7 resources has a non-consistent extension with its actual content" in this report where #Cloudinary images were proxified through #Netlify, but not on this one where they're not… 🤷♂️
It looks like after a few month without enough trafic, my personal site is back in Chrome User eXperience! 🎉
Thanks #Treo for the great UI to check these data:
16.9 % of the requests made for images on my web sites are served as AVIF by #Cloudinary:
But it only represents 9.8 % of the bandwidth! 😍
Still looking forward to seeing JPEG XL there… 😁
When you start using an image CDN on a site with oversized JPEGs, without any change to the HTML:
Imagine when there will be accurate srcset/sizes attributes, better formats, etc. 🤯
Routing: I’m not smart enough for a SPA
Here comes Taylor's 4th article in his great "Streets" series about web performance and front end architectures.
Without the legend, looks a lot like the page weight of most web sites when starting using an image CDN… 😅
#Covid19 Apple Mobility Trends Reports in 🇫�� #France. More info and raw data available here www.apple.com/covid19/mobilitykOy #data #driving #walking #transit #lockdown @AppB4v
TIL: Configure an apex domain on #Netlify
the apex domain can’t take advantage of direct DNS routing on a global CDN like @Netlify’s
I guess I now understand why my photography site was slow from France…
TIL: #Cloudflare doesn't support the Vary HTTP header, which means the origin server can't do any content negotiation, for example send WebP or AVIF for a JPEG request…
https://developers.cloudflare.com/cache/about/cache-control/#other
#Fastly supports it, just saying… 😅
Would you like to be able to set different values for the importance priority hint depending on Media Queries, for example when images are above or below the fold depending on viewport width?
It looks like when I preload an image on #Cloudinary, the automatic best format selection (f_auto) doesn't work! 😱
These two requests have the exact same URL:
Support for JPEG XL in Firefox just got a much better priority!
P5 → P3 🤩
https://bugzilla.mozilla.org/show_bug.cgi?id=1539075#a88948208_505306
Performant A/B Testing with Cloudflare Workers
The problem with the current A/B testing tools is they construct the test on the client. They block rendering until they can determine which experiment group the current user should be in, and then they update the DOM based on that experiment’s parameters. On slow connections or low-end devices, this can mean users are staring at a blank screen for seconds waiting for network requests to finish before rendering can even start.
My photography site is hosted on #Cloudflare, and they transform preload into HTTP/2 push. Great!
But why is my preloaded/pushed font downloaded twice then? 😅
The #Mapbox sprite on my photo site weights 222 kB:
https://nicolas-hoizey.photo/ui/thumbnails/[email protected]
I would like to serve it with #Cloudinary to enhance performance, as this PNG sprite will fast get heavier with new photos.
If you agree, please vote! https://github.com/mapbox/mapbox-gl-js/issues/11379
Let's hope #Firefox will get JPEG XL support, if at least Facebook, Adobe and now #Flickr ask for it!
https://bugzilla.mozilla.org/show_bug.cgi?id=1539075#c23
Thank you for weighing in @DonMacAskill! 🤩
Looks like getting 4 💯 #Lighthouse scores in #Speedlify is more difficult than before… 🤔
Anyway, thanks again @zachleat for this great tool!
https://perf.nicolas-hoizey.com/nicolas-hoizey.photo/
Early Hints are now activated on https://nicolas-hoizey.photo ! 🎉
Thanks #Cloudflare @CloudflareDev ! 🙏
I don't see much difference in #WebPageTest though, the site is already pretty fast… 😅
Looks like @archdigestindia could improve #WebPerf for their readers and reduce bandwidth invoices…
Tammy Everts
Matthias Ott
Tim Vereecke
Jon Sneyers
Harry Roberts
Alistair Shepherd
Simon Hearne
Tom Greenwood
Malte Ubl
Brian Louis Ramirez
HTTP Archive
Hubert Sablonnière
Miško Hevery
Jake Archibald
Tim Kadlec
Taylor Hunt
Philip Walton
564.5px widesizes says the image is full width414 % bigger
I tried to follow @TheRealNooshu advice about #Cloudflare cache configuration for performance on my photography site, but it looks like much of my assets are still not cached:
Could it be because the cache TTL is lower than the delay between 2 visits?
Have Core Web Vitals made the web faster?
Barry dives into data from HTTP Archive to show how Google's push for web performance with Core Web Vitals helped — or not 😅 — improve the performance of the Web.
Two weeks ago, I used Google BigQuery with HTTP Archive data to find the heaviest images in French government home pages.
Today, I received a bill I didn't anticipate… 😅
That's it! After a while comparing Netlify and Cloudflare TTFB from France, I moved my photography site to the later.
Results are great!
Impact for users is obvious:
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved srcset and sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
The really high TTFB from France with #Netlify makes me want to move to another hosting for my photography site, maybe #Cloudflare.
This is sad, I really like Netlify features. 😔
Which SVG technique performs best for way too many icons?
Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages.
I guess I've got a perfect illustration for a "WebPerf 101" course… 😉
Available for free on #Unsplash: https://unsplash.com/photos/-4trKf0Kbow
JPEG XL competes with AVIF which has similar compression quality but fewer features overall
This is on #CanIUse page for JPEG XL: https://caniuse.com/jpegxl
I'm not sure @jonsneyers would approve… 😅
The Art of Deception, Lighthouse Score Edition
I agree with Zach that the Lighthouse scores we see - shared mostly on Twitter - should be taken with a grain of salt, as they are often shared without any mention of the test conditions.
Looks like support for loading="lazy" in webkit is almost there! 🎉
Once your image CDN is (correctly) set up, support for any new lighter/faster image format is like infinite ROI: "much lighter images" divided by "zero additional cost". 🥰
It could even cost you less, if you pay based on bandwidth… 🎉
An Inclusive Web is Fast by Default
This is a great talk!
The business models that support much of the content on the web don’t favor better performance. Nor does the culture of many organizations who end up prioritizing the next feature over improving things like performance or accessibility or security.
Does shadow DOM improve style performance?
This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids, classes and data attributes:
To make a fair comparison you really have to pay meticulous attention to encoder settings, normalizing quality, and ensuring that compared images are in fact comparable.
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
I already had Glyphhanger installed on my computer, but I remember having similar issues, so Sara's article is welcome for anyone who wants to use it to optimize fonts weight, including future me.
How To Fix Cumulative Layout Shift (CLS) Issues
Barry shows here a few ways to prevent layout shifts and make your visitors happier.
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭
Any suggestion?
Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.
A 7 years old bug in #Firefox … 😭
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106
I know there are workarounds.
79.4 % of the requests made for images on my web sites are served as WebP by #Cloudinary:
But it only represents 56.8 % of the bandwidth!
Looking forward to seeing AVIF and JPEG XL in there… 😁
Performance-testing the Google I/O site
Jake continues his series of web performance audits, this time with the site for Google's I/O conference, and the result is a real shame.
Using @__treo for small sites with low trafic can be frustrating… 😅
JavaScript performance beyond bundle size
There’s a huge focus recently on JavaScript bundle size: how big are your dependencies? Could you use a smaller one? Could you lazy-load it? But I believe we focus on bundle size first and foremost because it’s easy to measure.
I feel sorry for anyone trying to get into the field of web performance. Not only are there complex browser behaviours to understand, there’s also a veritable alphabet soup of initialisms to memorise. Here’s a really good post on web performance by Harry, but notice how the initialisms multiply like tribbles as the post progresses until we’re talking about using CWV metrics like LCP, FID, and CLS—alongside TTFB and SI—to look at PLPs, PDPs, and SRPs. And fair play to Harry; he expands each initialism the first time he introduces it.
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should already know. 😅
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED. I had decreased the total page weight and number of requests to a tenth of what they were previously and somehow the numbers were showing that it was taking LONGER for videos to load on Feather. This could not be possible. Digging through the numbers more and after browser testing repeatedly, nothing made sense. I was just about to give up on the project, with my world view completely shattered, when my colleague discovered the answer: geography.
Legacy and Transition: Creating a New Universal Image Codec
JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the outset, you can also losslessly preserve legacy images while reaping more compression. In other words, JPEG XL offers only benefits from the start, whereas other approaches require sacrifices in storage to reduce bandwidth.
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT).
Understanding the True Cost of Client-Side A/B Testing
Client-side A/B testing has been a performance loving developer’s worst friend for years.
Now waiting for #Cloudinary to automagically enhance my sites with AVIF for all supported browsers… 😍
Oh wow. @firefox joins Chromium and adds AVIF support. That's going fast. 🐎
🔗 caniusecaniuse.com/?search=avifAZ
🔗 avif explainejakearchibald.com/2020/avif-has-landed/OGjw
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.
We humans are creatures of comfort. We like taking the easy route, the low-hanging fruit, the way that doesn’t make us think. […] In this article, I’ll show you how defaults can be used to save energy and thereby reduce CO₂ emissions in technology.
5 tests for the same page on PageSpeed Insights within 3 minutes, results range from 29 to 60. 🤷♂️
This is ridiculous, our clients rely on this "tool" promoted by Google to assess their performance. 😡
It should be much more stable and reliable!
We should use both dns-prefetch and preconnect (separately) to speed up connexions to additional servers in most browsers:
Looks like I've improved a lot the Speed Index and Largest Contentful Paint (LCP) of my archives page! 💪
Big picture performance analysis using Lighthouse Parade
Here is a great new open source tool provided by the Cloud Four team! 👍
That's the kind of #Dareboost report I like to receive on Monday! 💪
That's an article page with 4 videos and 3 images.
How To Convert Variable TTF Font Files to WOFF2
In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate between font variation settings.
Proxying Cloudinary Requests with Netlify
So we get reduced data cost, with no extra connection from the browser, and what appears to be pretty negligible cost at the CDN (the difference in response time for the final proxied images versus loading them without Cloudinary in place is barely noticeable in my tests)—and it all took just a few minutes to put into place.
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
Towards a Lightweight Jamstack
Not having to use a JavaScript framework also meant that HTML, not JSX or Vue components, is now front and center in the code you write. This helped me avoid the usual traps when writing React: the infamous div soup, inaccessible components, or non-semantic tags.
When the skeleton screen doesn’t match the outcome, we’ve created confusion and frustration that will overcome any benefit you might have gotten from trying to handle that delay in a better way.
When you have a search form on every page, with #Algolia's autocomplete, what is the current best way to load the full required JavaScript only when the input gets the focus?
How to Improve Core Web Vitals
Here's a great overview of both what will come soon in Google ranking algorithm, and how to detect and fix issues with these Core Web Vitals.
I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.
Looks like #Lighthouse now suggests me to preconnect to the Google Analytics domain…
…which I already do! 🤔
Anything wrong with my HTTP header?
Why you should be testing your 404 pages web performance
Nice overview of the issue encountered by users if your 404 error page weights too much, with actual data from HTTP Archive.
Nick Winkler
Performance vs. Functionality: Making the Right Site Speed Tradeoffs
Fortunes are made and lost based on how brands thread the needle between site speed and functionality. Despite this, the Retail Systems Research (RSR)’s survey reveals the average retailer’s website is still too slow, and their mobile sites are even slower.
@bagder hi Daniel, reading https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/ (yes, I'm late 😅)
If DNS B.example.com returns 192.168.0.2 and 192.168.0.3, is TLS really enough to be sure it also works on 192.168.0.1?
BTW, there's a typo near the end: "both IPv4 and IPv4 addresses".
I guess we'll (unfortunately) see a lot of turtles in Firefox soon, while browsing the Web with devtools open… 🐢
JUST LANDED in Firefox Nightly:
🐢!
Appears when the server response time for a request exceeds the recommended limit of 500 ms (adjustable in about:config).
Awesome dev work by @b4bomsy and planning by @digitarald & @janodvarko!
If you spot it and it helps, let us know!H
Use Speedlify to Continuously Measure Site Performance
If you don't have any budget for Dareboost (or competitors) yet, Speedlify can help you monitor your site's performance for free, and build your performance strategy to justify using even better tools:
Using speedlify with #Netlify is great, because enhancing the sites performance will reduce the build times, therefore the monthly cost… 😁
This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍
New project: Speedlify 🐇
A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.
Demo:speedlify.netlify.app/ssg/c
Blog post:www.zachleat.com/web/speedlify/L
It took me just a few minutes to built my dashboard for multiple sites:
https://webperf-monitoring.netlify.app/
Looks like #Dareboost liked improvements made yesterday evening! 💪
Speed Index at 800 on 3G, despite a laaate 530 ms TTFB, not bad! 🤔
TIL:
Paint timing metrics are too optimistic. In 85-95% of cases, they are recorded before any pixels are actually rendered to the screen.
From @Joseph_Wynn's article for #SpeedCurve: https://speedcurve.com/blog/an-analysis-of-chromiums-paint-timing-metrics/
Nice new #WebPerf tool from @browserstack, it will help show people (aka "clients") not everyone have the same high end device and/or browser.
For example, even on the same Windows 10, Edge 80 is 3 times faster than Edge 18:
https://www.browserstack.com/speedlab/report/bb7303c6b142638557f3cde4415cfea8592a9ae9
The Cost of Javascript Frameworks
In an ideal world, I believe a framework should go beyond developer experience value and provide concrete value for the people using our sites. Performance is just one part of that—accessibility and security both come to mind as well—but it’s an essential part.
If you're using Google Fonts service instead of self-hosting the fonts (even if they come from Google Fonts), Harry shows here the optimal performance and UX you can get with it, with lot of details, but a really simple solution.
I think that's the first time someone shares one of my articles on Hacker News:
https://news.ycombinator.com/item?id=23232748
Do I have to celebrate? Is it a rite of passage? 😅
JAMstack is fast only if you make it so
JAMstack often promotes itself as an excellent way to provide performant sites. It's even the first listed benefit on jamstack.wtf, a "guide [which] gathers the concept of JAMstack in a straight-forward guide to encourage other developers to adopt the workflow". But too many JAMstack sites are very slow.
Lighthouse changes how Performance Score is calculated
Lighthouse 6 is the first major release of the popular auditing tool since May 2019, introducing critical changes that will impact everyone relying on the scoring. Remember, the PageSpeed Score (which contributes to your SEO ranking) is the same as the Lighthouse Performance Score.
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look for inspiration in this code.
Eleventy’s New Performance Leaderboard
Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly it also doesn’t add anything extra either. This sort of developer empowerment over the final product has seemed to attract an amazing group of performance oriented developers using the project and I am so grateful to every one of you.
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.
Can we monitor User Happiness on the Web with performance tools?
I really like that SpeedCurve tried to innovate with this recent "User Happiness" metric (original version). It aggregates multiple technical metrics to decide if users visiting the page are happy or not with it. But I see several issues in this metric.
Trackers on Your Domain, Revenue Risk
In this article, Boris shows how new practices around third party trackers hidden as first party assets, to "escape" GDPR and trackers blockers, can lead to security and performance issues, leading to potential business loss.
Caching best practices & max-age gotchas
Used correctly, caching is a massive performance enhancement and bandwidth saver. Favour immutable content for any URL that can easily change, otherwise play it safe with server revalidation. Only mix max-age and mutable content if you're feeling brave, and you're sure your content has no dependancies or dependents that could get out of sync.
Because while the web keeps getting heavier and we keep moving further away from page weight as a primary performance metric, the data I’ve seen so far indicates folks who want low-data experiences are far more common than we may think.
Improving the Speed and Accuracy of the Item Page with Light Service
Ramesh Periyathambi explains why eBay developed a dedicated "light" service to get critical informations about products, to speed up presentation of accurate content to buyers, and why it was worth the additional effort.
The Web Quality Checklist is intended for all professionals who create websites. It is designed in a collaborative way by a community of Web professionals, led by the French company Opquast (Open Quality Standards).
When should you be using Web Workers?
Surma explains very well how “low-end phones will mostly likely be used by the massive number of people coming online in the next couple of years“, and why we need to take that into account when we design our frontend Web architectures.
Progressive Font Enrichment: reinventing web font performance
In issue #11 of his great Web Fonts & Typography News newsletter, Jason Pamental shares the progress made by the W3C Web Fonts Working Group towards a new way to progressively serve fonts so that only the required new glyphs are downloaded every time new characters have to be rendered.
Tali Garsiel
How Browsers Work: Behind the scenes of modern web browsers
As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you’ll be glad you did.
great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural part of the web platform.
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
The average web page is 3MB. How much should we care?
You can have large, robust pages that still feel fast. But you should care about page bloat in terms of how it affects mobile users, especially mobile-only users who are dealing with bandwidth constraints or data limits.
What catches my eye are the gaps between TTFB and the paint metrics, and between the paint metrics and First CPU Idle. These gaps are caused by JavaScript dominating the browser main thread. This happens after TTFB when all the blocking scripts are executed – these have to finish before any rendering can happen.
Should I Use JavaScript to Load My Web Fonts?
the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.
Nikita Prokopov
As a general trend, we’re not getting faster software with more features. We’re getting faster hardware that runs slower software with the same features.
Using Cloudinary to convert an animated GIF to a video
I like animated GIFs, like most people these days I think, but they are really heavy, hurting the performance of web pages, and consuming data plans faster than should be needed. So we need to convert them to videos, which are much lighter, for the same visual result. Let's use Cloudinary.
Optimiser la performance des images responsives
J'ai eu l'honneur de présenter une petite conférence lors du meetup WebPerf de mars 2018, sur un sujet qui me passionne, puisqu'il combine deux de mes marottes en Web front : la WebPerf et les images en Responsive Web Design. Je vous invite à découvrir mes slides et la vidéo.
So long Disqus, hello Webmention
Enough. I'm fed up with Disqus. It's been useful, easy to plug on this blog, but it's a mess for web performance, and I don't own my data, so… bye bye. Webmention is now a great alternative, with more people implementing it, so let's try to keep only that.
How much data should my Service Worker put upfront in the offline cache?
I love when Web site/apps work even when I'm offline. I've made my SVG game esviji work offline thanks to appcache just after attending Jake Archibald conference about why Application Cache is a Douchebag during the 2012 edition of the Paris Web conference. Fortunately, we have now Service Workers (in some browsers), which gives us more control over this kind of cache for offline browsing. But as Uncle Ben says, “With Great Power Comes Great Responsibility”.
Le gros impact des raccourcisseurs d'URL sur la performance
Les raccourcisseurs d'URL sont devenus incontournables sur le Web depuis quelques années, mais initialement pensés comme outils de facilitation de partage[1], ils ont beaucoup évolué et sont surtout devenus des outils de tracking. Du coup, les sites en abusent de plus en plus, alors que les plateformes où ces liens sont publiés, Twitter par exemple, rajoutent leur propre couche. L'impact sur la performance pour l'utilisateur final est désastreux.
Les bonnes pratiques webperf toujours sous la main
La collection «mémento» de chez Eyrolles vient de s'agrandir, avec l'ajout d'un petit nouveau dédié aux WebPerfs web, en termes de vitesse. Incontournable !
Réconcilier SEO et WebPerf au niveau des redirections de (sous)domaines
Le SEO et la performance Web sont deux disciplines très différentes liées à la mise en ligne de sites Web, avec des objectifs qui parfois peuvent être contradictoires. Mais des fois, ce qui paraît contradictoire ne l'est en fait pas si on y regarde de plus près, avec un peu de pragmatisme.
Performance Web, ma conférence à Web UX
Pour ceux qui n'étaient pas présents à Web UX en mai 2011, et avec pas mal de retard[1], voici mes slides, ainsi que la vidéo captée par l'équipe organisatrice.
Retrouvons nous à Web UX et Sud Web les 26 et 27 mai
Vous le savez sans doute si vous me lisez régulièrement, sur ce blog ou via mes tweets, je suis dingue de Web, et toujours intéressé par ses moyens de mise en œuvre, usages et acteurs, et donc très intéressé par tout événement permettant de mixer tout cela. Cette année, en plus de l'incontournable rendez-vous annuel Paris Web en octobre, vous pourrez me croiser fin mai à Nîmes pour Web UX et Sud Web.
La navigation ne se fige plus en haut de l'écran lors du scroll
Vous l'avez peut-être constaté par vous-même, le menu de navigation de ce site[1] ne se fige plus en haut de l'écran quand vous descendez dans la page. Ce fonctionnement que j'avais trouvé très sexy s'avère poser plusieurs problèmes, donc j'ai préféré le supprimer.
Surveillez vos erreurs 404, elles peuvent être très instructives
A l’heure où tout le monde ne jure que par l’optimisation du référencement — on dit Search Engine Optimization, ou SEO, pour faire branché — afin d’augmenter son trafic, et ainsi ses clients potentiels et/ou son revenu publicitaire, qui se soucie de vérifier ce qui se passe pour les internautes qui arrivent bien sur le site, mais sur une page qui n’existe pas, indiquée comme il se doit par une erreur HTTP 404[1] ?
Bouuuuh-stez votre site web !!!
La technologie INA (Intelligent Network Acceleration) de BoostWorks utilisé dans le produit BoostWeb Optimizer « est une procédure sophistiquée de mémorisation et de compression qui optimise les performances du réseau tout en préservant l'intégrité et la qualité des données ».
See all tags.
Barry Pollard
Tyler Sticka
Zach Leatherman
Kornel
Sara Soueidan
Jeremy Keith
Carolina Gilabert
Mark Llobrera
Chris Zacharias
Romaric Pascal
Emerson Loustau
Henry Desroches
Nicolas Goutay
Matt Hobbs
Karolina Szczur
Bryan L. Robinson
Michelle Barker
Boris Schapira
Ramesh Periyathambi
Opquast
Surma
Jason Pamental
Eric Portis
Monica Dinculescu
Steve Souders
![https://nicolas-hoizey.photo/ui/thumbnails/[email protected]](https://nicolas-hoizey.photo/ui/thumbnails/sprite@2x.png){kind=link}