So use it on your `` elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by…
There are 182 contents with this tag:
So use it on your `` elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by…
This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…
The generated report provides an overall performance score ranging from 1 (least performant) to 99 (most performant)
First try on my photography site: 100 🤷♂️😅
Joke aside, new tools to audit performance are always welcome!
For ecommerce companies—particularly for those selling apparel—it likely makes sense to prioritize image quality above file size. This is a really…
I'm really worried about #WebPageTest, right now… 🤨
Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭
You can see this for my photography site in this WebPageTest result:
Looks like we will soon have JPEG XL in Safari! 🥳
<link rel="preconnect" …> will start working again in Firefox 115! 🥳
We need to talk about video and animated image formats in the same breath. Many articles compare video formats to GIF, or image formats to each other,…
In our case, we were using
ch units to define our page layout. This meant that our post content was equal to
50ch units (or the width of fifty…
General question about synthetic performance monitoring:
How do you define the device/network settings of your tests?
I usualy do the former, but I think both could be useful.
I really like to see that all browser vendors agree with @[email protected] that we need
<video> as for
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many
<source> in a
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with
x descriptors for fluid images… 😞
<img maxdensity="2.5" …> attribute for example!
If you agree, comment:
Sure, those people almost certainly do care about the business. Who doesn’t? But they’re also humans. I feel like if really want to convince them,…
I still don't understand why using Cloudflare in front of Netlify allows for a much better and stable Time To First Byte (TTFB) than Cloudflare Pages or Netlify alone… 🤷♂️
TTFB for static sites should always be very low.
I love #SpeedCurve's simple and efficient Core Web Vitals Real User Monitoring, especially when everything is green! 🥳
This is a real e-commerce site, with many real users everyday. After a few months of performance optimisation.
This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…
It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now…
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…
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." 😭
The performance poverty line is the plateau at which changes to your website’s rendering metrics (such as Start Render and Largest Contentful Paint)…
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’”. 😞
Another excellent article from Sia about performance, but also equity and the environment. 😍 Oh, and I really wish everyone knew this: Lighthouse…
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…
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! 😭
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a…
Testing performance on actual device should be mandatory for every project, as it makes so many issues obvious. The best analouge you can buy for…
In order to beat latency you should first try to cache at the CDN. If that does not work you can bring your origin closer to the end users. If that…
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…
There's a bug that might remove them when it shouldn't:
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! 🎉
We launched the
image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are…
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…
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…
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…
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
YES, please! 🙏
But #Lighthouse sees
Do you think it should be improved?
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…
<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 `` block that creates it is fully synchronous, which means that the discovery of the script is governed…
How do you deal with images that need to have a fluid width but fixed height?
I tend to start from the lowest
height ratio and increase, knowing larger images will have hidden parts above and below… 😔
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/
But most images are currently not or badly optimized. 😔
They would benefit a lot from an image CDN: resize, compression, modern formats, etc.
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…
a tool that automatically matches the fallback font to the custom font–because computers are good at that stuff. The tool allows you to select every…
Brian Louis Ramirez
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
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,…
Caching assets is a fantastic way to optimize the network overhead of your web application, there is still plenty of computational overhead associated…
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
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…
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…
preconnect is still not supported in #Firefox… 😔
The WebPageTest team has been working on improving the platform since Catchpoint acquired them, and now they're releasing awesome new features to…
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… 🤷♂️
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
sizes attributes, better formats, etc. 🤯
Here comes Taylor's 4th article in his great "Streets" series about web performance and front end architectures. Overall, SPAs’ reliance on client…
Without the legend, looks a lot like the page weight of most web sites when starting using an image CDN… 😅
the apex domain can’t take advantage of direct DNS routing on a global CDN like @Netlify’s
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…
#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 🤩
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…
But why is my preloaded/pushed font downloaded twice then? 😅
The #Mapbox sprite on my photo site weights 222 kB:
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
Thank you for weighing in @DonMacAskill! 🤩
Anyway, thanks again @zachleat for this great tool!
Early Hints are now activated on https://nicolas-hoizey.photo ! 🎉
I don't see much difference in #WebPageTest though, the site is already pretty fast… 😅
sizessays the image is full width
Could it be because the cache TTL is lower than the delay between 2 visits?
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…
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… 😅
Results are great!
Impact for users is obvious:
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved
sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
This is sad, I really like Netlify features. 😔
Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages. Just yesterday, I chose to inline…
I guess I've got a perfect illustration for a "WebPerf 101" course… 😉
JPEG XL competes with AVIF which has similar compression quality but fewer features overall
I'm not sure @jonsneyers would approve… 😅
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…
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… 🎉
This is a great talk! 65% of the developing world […] do not have a consistently fast internet connections (20% of the developed world). For them,…
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…
This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids,…
To make a fair comparison you really have to pay meticulous attention to encoder settings, normalizing quality, and ensuring that compared images…
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
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…
Barry shows here a few ways to prevent layout shifts and make your visitors happier. All of these techniques basically involve setting aside the correct…
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 … 😭
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… 😁
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. Imagine…
Using @__treo for small sites with low trafic can be frustrating… 😅
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…
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…
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.…
JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the…
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly…
Client-side A/B testing has been a performance loving developer’s worst friend for years. […] With either approach, you’re putting a pause button…
Now waiting for #Cloudinary to automagically enhance my sites with AVIF for all supported browsers… 😍
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.…
Brian Louis Ramirez
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,…
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
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! 💪
Here is a great new open source tool provided by the Cloud Four team! 👍 Lighthouse Parade is a Node.js command line tool that crawls a domain and…
That's the kind of #Dareboost report I like to receive on Monday! 💪
That's an article page with 4 videos and 3 images.
In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate…
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…
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…
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. Google…
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?
Nice overview of the issue encountered by users if your 404 error page weights too much, with actual data from HTTP Archive. Assuming that an optimised…
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…
@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.3, is TLS really enough to be sure it also works on
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
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…
New project: Speedlify 🐇
A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.
It took me just a few minutes to built my dashboard for multiple sites:
Looks like #Dareboost liked improvements made yesterday evening! 💪
Speed Index at 800 on 3G, despite a laaate 530 ms TTFB, not bad! 🤔
Paint timing metrics are too optimistic. In 85-95% of cases, they are recorded before any pixels are actually rendered to the screen.
For example, even on the same Windows 10, Edge 80 is 3 times faster than Edge 18:
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…
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…
I think that's the first time someone shares one of my articles on Hacker News:
Do I have to celebrate? Is it a rite of passage? 😅
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 6 is the first major release of the popular auditing tool since May 2019, introducing critical changes that will impact everyone relying…
Bryan L. Robinson
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…
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…
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […]…
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.
In this article, Boris shows how new practices around third party trackers hidden as first party assets, to "escape" GDPR and trackers blockers, can…
Used correctly, caching is a massive performance enhancement and bandwidth saver. Favour immutable content for any URL that can easily change, otherwise…
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…
Ramesh Periyathambi explains why eBay developed a dedicated "light" service to get critical informations about products, to speed up presentation…
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,…
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“,…
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…
As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best…
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…
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…
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…
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.…
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.
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.
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.
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”.
Les raccourcisseurs d'URL sont devenus incontournables sur le Web depuis quelques années, mais initialement pensés comme outils de facilitation de partage, 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.
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…
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…
Pour ceux qui n'étaient pas présents à Web UX en mai 2011, et avec pas mal de retard, voici mes slides, ainsi que la vidéo captée par l'équipe organisatrice.…
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…
Vous l'avez peut-être constaté par vous-même, le menu de navigation de ce site ne se fige plus en haut de l'écran quand vous descendez dans la page.…
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…
La technologie INA (Intelligent Network Acceleration) de BoostWorks utilisé dans le produit BoostWeb Optimizer « est une procédure sophistiquée de…
See all tags.