Eric Portis
View Transitions Break Incremental Rendering
Instead of showing users that this thing is the same as that thing, we’ve told them, perhaps with extra motion/panache, that even though these the…
Contents tagged “WebPerf”
There are 215 contents with this tag:
-
-
Web font file size study: a variable font addition
The sum is smaller than the parts. A variable font that has both normal and heavy (bold) weight (and also everything in between) is slightly smaller…
-
I wasted a day on CSS selector performance to make a website load 2ms faster
It was at this point that the second penny dropped and I realised I’d been duped by a graphing misunderstanding and my own enthusiasm for improving…
-
kliksphilip
JPEG VS AVIF - The Battle of Compression
In this super thorough study I test one single HD image and come to vast sweeping conclusions about JPEG XL and AVIF. But that's still one image comparison…
-
Cloudflare , Alex Krivit and Suleman Ahmad
Introducing Speed Brain: helping web pages load 45% faster
With the initial release of Speed Brain, we have designed a solution with important side effect prevention guardrails that completely removes the…
-
The Dev Tools Performance Monitor Panel
The Performance Monitor collects performance data in realtime and puts it on a graph. It’s handy for detecting performance problems at a high-level.…
-
Discovering Third Party Performance Risks
[…] a tool called Third Party Explorer, which leverages WebpageTest data to help analyze a third party’s impact on a page load. The idea behind this…
-
I've finally picked up my ticket to attend the #WeLoveSpeed conference on September 17 in Nantes, France.
I can't wait to attend some inspiring conferences, and meet lots of people passionate about #WebPerf, including some I've been in contact with for years only through social networks!
Check out this list of speakers and talks:
https://www.welovespeed.com/en/2024/speakers/ -
New to the world of web performance? Welcome! Here's everything you need to know to master website monitoring, analytics, and diagnostics. Learn how…
-
About https://techhub.social/@cloudcannon/112604279395366912
Alex […] shares how using CloudCannon for client sites boosts performance and efficiency 🚀
I love #CloudCannon's efficiency. 👍
But with an SSG, #WebPerf depends on the way you build pages. Good SSGs — as #Eleventy — don't force anything so performance is really just the result of developer's work.
The CMS should have no impact. 🤷♂️
-
Speculative Rules API – a new iteration in the pre-loading journey
The Speculative Rules API is the latest development in a long-standing narrative. The issues I’ve discussed were already inherent in previous solutions.…
-
Why Lighthouse Performance Score Doesn’t Work
There is some correlation between the [Lighthouse] Performance Score and how well your site will do for real users. Still, lab testing alone doesn’t…
-
Microsoft Edge Team
JavaScript must be downloaded, then run through a JIT compiler (even if you don’t use it), and then executed, and all this must be done before any…
-
Jeremy Wagner
New field insights for debugging INP
Interaction to Next Paint (INP) is a Core Web Vital that measures how responsive a page is to interactions. Due to INP's scope, it can be difficult…
-
Subsetting.xyz — Type foundries that allow font subsetting
Subsetting removes unused characters from a font to reduce file size. For example, you might not use math symbols like ≤ and ∫, and removing them…
-
SpeedCurve | NEW: RUM attribution and subparts for Interaction to Next Paint!
In addition to advanced settings, navigation types, and page attributes, we've just released more diagnostic detail for the latest flavor in Core…
-
Should I please Lighthouse with modern image formats, or my visitors with progressive rendering of large images in my photography site? 🤔
Of course, this would be much easier with genaralized JPEG XL support, both modern and allowing progressive… 🤷♂️
-
Most mentions of the magical CSS
object-fit: cover;in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option. -
Identifying Font Subsetting Opportunities with Web Font Analyzer
In this article, we’ll explore some potential issues around font loading and the performance benefits of a lesser used feature - font subsetting.…
-
Happy #INP day! 🎉
-
How many bytes is “normal” for a web font: a study using Google fonts
So here it is, folks, a web font file that supports extended Latin characters, your Às and your Ás and Â, Ã, Ä, Å... should weigh around 20K. Anything…
-
Jon Sneyers
This consolidates JPEG XL’s position as the best image codec currently available, for both lossless and lossy compression, across the quality range…
-
Mobile INP performance: The elephant in the room
Unfortunately, due to lack of Safari support for some performance metrics – including Core Web Vitals – iPhone performance continues to be a blind…
-
the Interop team
JPEG XL has not been selected for Interop 2024
Thank you for proposing JPEG XL image format for inclusion in Interop 2024. We wanted to let you know that this proposal was not selected to be part…
-
RLI (Recently Logged-In) Browser Cache Bypassing
On websites where both guests and authenticated users navigate the same pages, a recently logged in user runs the risk of seeing anonymous content…
-
Getting started with Web Performance 🚀
JavaScript is the most expensive resource in terms of performance on the web, and is a really common bottleneck when used too much. Where you can…
-
Sizes="auto" pretty much requires width and height attributes
sizes="auto"is a great new feature of HTML for lazy loaded responsive images. are we dealing with an with sizes=auto? Then its natural dimensions… -
Psychology of Speed: A Guide to Perceived Performance
When people mention web performance, they usually focus on development-first aspects like JavaScript frameworks and performance metrics. These are…
-
Netlify
This is an awesome new feature for Netlify! With Netlify Image CDN, you can transform images on demand without impacting build times. Netlify Image…
-
CrUX to Sea Level: Lessons in Distilling RUM
How you tell & present a story from user data can encourage organizational buy-in (or hinder it). Go from aggregate data & rough SQL to the polished…
-
Let's say a SPA first load has been optimized with SSR and the LCP image is loaded pretty fast because it's in the HTML.
But the JavaScript then builds a carousel in the DOM, which initially shows the very same image.
I guess there's a second render of the image. How can I check this easily?
Would it make sense that the LCP takes the late second render of the image, instead of the fast first one?
-
CDN Planet
How to Improve TTFB on Cloudflare with Speculation Rules
Speculation Rules prefetch improved TTFB on our […] website by ~300 ms for ~20% of eligible pageviews. This can be done everywhere, not only on Cloudflare.…
-
I love (some) boring #SpeedCurve graphs… 😅
-
What does the image decoding attribute actually do?
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…
-
Cropping Images with CSS While Keeping a Focal Point in the Center
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…
-
Cloudflare in “Faster website, more customers: Cloudflare Observatory can help your business grow”:
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!
-
New Recommendations for Ecommerce Images
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:
https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp
-
Looks like we will soon have JPEG XL in Safari! 🥳
-
Looks like
<link rel="preconnect" …>will start working again in Firefox 115! 🥳 -
Is there a viable animated GIF alternative yet or what?
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,…
-
Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using
chunits to define our page layout. This meant that our post content was equal to50chunits (or the width of fifty… -
General question about synthetic performance monitoring:
How do you define the device/network settings of your tests?
- Do you use low end devices / bad network to easily detect issues?
- Or do you try to be close to your RUM data, to have more predictability when you deploy changes?
I usualy do the former, but I think both could be useful.
-
I really like to see that all browser vendors agree with @scottjehl@mstdn.social that we need
@media,srcsetandsizesfor<video>as for<img>/<picture>! 🤩 -
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using
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<picture>? -
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
<picture>andxdescriptors for fluid images… 😞With a
<img maxdensity="2.5" …>attribute for example!If you agree, comment:
https://github.com/whatwg/html/issues/4421 -
The intersectionality of web performance
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.
-
Largest Contentul Paint change in Chrome 112 to ignore low-entropy images
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…
-
On Container Queries, Responsive Images, and JPEG-XL
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…
-
I'm so happy to go soon to We ❤️ Speed 2023, the list of speakers and talks is amazing! 😍
-
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." 😭
-
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)…
-
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. 😍 Oh, and I really wish everyone knew this: Lighthouse…
-
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…
-
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…
-
The Performance Inequality Gap, 2023
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…
-
Beating Latency on Scalemates.com
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…
-
⚠️ 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_tagandimage_urlfilters to help with generating responsive images. Before we dive in, what do these filters do? What are… -
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…
-
Jon Sneyers
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:
- Orange: https://nho-photo.netlify.app/
- Blue: https://progressive--nho-photo.netlify.app/
- Green: https://progressive-steep--nho-photo.netlify.app/
-
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-preloadFeedback welcome! 🙏
-
This is what happens when you
preloadthe 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 Shopifyhttps://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c79
YES, please! 🙏
-
widthandheightattributes on<img>help prevent layout shifts (CLS). Values should be unitless integers.But #Lighthouse sees
100%as100, thanksparseInt()…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…
-
Simon Hearne
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…
-
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
loadevent 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
width/heightratio 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.
-
Tom Greenwood
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…
-
Malte Ubl
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.
-
HTTP Archive
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,…
-
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…
-
Hubert Sablonnière
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! 😎 No more layout shifts! Compared…
-
Miško Hevery
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…
-
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…
-
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…
-
preconnectis still not supported in #Firefox… 😔 -
Tim Kadlec
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…
-
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/sizesattributes, better formats, etc. 🤯 -
Taylor Hunt
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. 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… 😅
#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
VaryHTTP 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
importancepriority 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…
-
My photography site is hosted on #Cloudflare, and they transform
preloadinto 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/sprite@2x.pngI 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…
- the photo is
564.5pxwide - but the
sizessays the image is full width - so the browser downloads an image
414 %bigger
- the photo is
-
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…
-
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
srcsetandsizesattributes 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. Just yesterday, I chose to inline…
-
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…
-
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… 🎉
-
Simon Hearne
An Inclusive Web is Fast by Default
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,…
-
Tim Kadlec
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…
-
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,…
-
Kornel
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? 😅
-
Sara Soueidan
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…
-
How To Fix Cumulative Layout Shift (CLS) Issues
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…
-
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. Imagine…
-
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…
-
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…
-
Carolina Gilabert
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…
-
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!
-
Chris Zacharias
After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED.…
-
Jon Sneyers
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…
-
Simon Hearne
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). In this post we will explore the surprisingly…
-
Tim Kadlec
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. […] With either approach, you’re putting a pause button…
-
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
-
Romaric Pascal
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.…
-
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
dns-prefetchandpreconnect(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! 💪
-
Emerson Loustau
Big picture performance analysis using Lighthouse Parade
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.
-
Henry Desroches
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…
-
Tim Kadlec
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…
-
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! 😍
-
Nicolas Goutay
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…
-
Tim Kadlec
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…
-
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?
-
Simon Hearne
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. 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?
-
Matt Hobbs
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. Assuming that an optimised…
-
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…
-
@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.2and192.168.0.3, is TLS really enough to be sure it also works on192.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…
-
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/LIt 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 -
Tim Kadlec
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…
-
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:
https://news.ycombinator.com/item?id=23232748Do 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…
-
Bryan L. Robinson
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…
-
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…
-
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […]…
-
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…
-
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…
-
Tim Kadlec
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
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…
-
Opquast
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
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“,…
-
Jason Pamental
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…
-
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…
-
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…
-
Monica Dinculescu
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…
-
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…
-
Steve Souders
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…
-
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…
-
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, 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…
-
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, 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…
-
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 ne se fige plus en haut de l'écran quand vous descendez dans la page.…
-
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…
-
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…
Stoyan Stefanov
Trys Mudford
Dave Rupert
Paul Calvano
SpeedCurve
Boris Schapira
Karolina Szczur
Jeff Frankl
Cliff Crocker
Tim Vereecke
Alistair Shepherd
David Ross
Barry Pollard
Johannes Odland
Jason Grigsby
Tyler Sticka
Paul Hebert
Jeremy Keith
Toni Sagristà
Tammy Everts
Sia Karamalegos
Kevin Farrugia
Matthias Ott
Alex Russell
Harry Roberts
Jake Archibald
Philip Walton
Zach Leatherman
Nolan Lawson
Mark Llobrera
Michelle Barker
Nikita Prokopov
See all tags.