Looks like <link rel="preconnect" …>
will start working again in Firefox 115! 🥳
There are 175 contents with this tag:
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 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 @media
, srcset
and sizes
for <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>
and x
descriptors 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_tag
and image_url
filters 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 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
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…
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 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 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…
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…
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,…
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…
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…
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…
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…
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. 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 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…
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…
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…
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. 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… 🎉
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,…
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,…
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? 😅
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…
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!
After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED.…
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…
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…
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
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,…
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! 👍 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.
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…
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! 😍
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…
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?
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?
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.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…
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…
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=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…
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…
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…
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…
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,…
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“,…
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…
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…
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…
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, 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…
See all tags.