Contents tagged “WebPerf”
There are 87 contents with this tag:
-
Nolan Lawson
Does shadow DOM improve style performance?
This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids, classes and data attributes:
-
To make a fair comparison you really have to pay meticulous attention to encoder settings, normalizing quality, and ensuring that compared images are in fact comparable.
-
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
-
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
I already had Glyphhanger installed on my computer, but I remember having similar issues, so Sara's article is welcome for anyone who wants to use it to optimize fonts weight, including future me.
-
How To Fix Cumulative Layout Shift (CLS) Issues
Barry shows here a few ways to prevent layout shifts and make your visitors happier.
-
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭
Any suggestion?
-
Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.
A 7 years old bug in #Firefox … 😭
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106
I know there are workarounds.
-
Performance-testing the Google I/O site
Jake continues his series of web performance audits, this time with the site for Google's I/O conference, and the result is a real shame.
-
Using @__treo for small sites with low trafic can be frustrating… 😅
-
Nolan Lawson
JavaScript performance beyond bundle size
There’s a huge focus recently on JavaScript bundle size: how big are your dependencies? Could you use a smaller one? Could you lazy-load it? But I believe we focus on bundle size first and foremost because it’s easy to measure.
-
I feel sorry for anyone trying to get into the field of web performance. Not only are there complex browser behaviours to understand, there’s also a veritable alphabet soup of initialisms to memorise. Here’s a really good post on web performance by Harry, but notice how the initialisms multiply like tribbles as the post progresses until we’re talking about using CWV metrics like LCP, FID, and CLS—alongside TTFB and SI—to look at PLPs, PDPs, and SRPs. And fair play to Harry; he expands each initialism the first time he introduces it.
-
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should already know. 😅
-
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
-
After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED. I had decreased the total page weight and number of requests to a tenth of what they were previously and somehow the numbers were showing that it was taking LONGER for videos to load on Feather. This could not be possible. Digging through the numbers more and after browser testing repeatedly, nothing made sense. I was just about to give up on the project, with my world view completely shattered, when my colleague discovered the answer: geography.
-
Legacy and Transition: Creating a New Universal Image Codec
JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the outset, you can also losslessly preserve legacy images while reaping more compression. In other words, JPEG XL offers only benefits from the start, whereas other approaches require sacrifices in storage to reduce bandwidth.
-
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT).
-
Understanding the True Cost of Client-Side A/B Testing
Client-side A/B testing has been a performance loving developer’s worst friend for years.
-
Now waiting for #Cloudinary to automagically enhance my sites with AVIF for all supported browsers… 😍
Oh wow. @firefox joins Chromium and adds AVIF support. That's going fast. 🐎
🔗 caniusecaniuse.com/?search=avifAZ
🔗 avif explainejakearchibald.com/2020/avif-has-landed/OGjw
-
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.
-
We humans are creatures of comfort. We like taking the easy route, the low-hanging fruit, the way that doesn’t make us think. […] In this article, I’ll show you how defaults can be used to save energy and thereby reduce CO₂ emissions in technology.
-
5 tests for the same page on PageSpeed Insights within 3 minutes, results range from 29 to 60. 🤷♂️
This is ridiculous, our clients rely on this "tool" promoted by Google to assess their performance. 😡
It should be much more stable and reliable!
-
We should use both
dns-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! 💪
-
Big picture performance analysis using Lighthouse Parade
Here is a great new open source tool provided by the Cloud Four team! 👍
-
That's the kind of #Dareboost report I like to receive on Monday! 💪
That's an article page with 4 videos and 3 images.
-
How To Convert Variable TTF Font Files to WOFF2
In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate between font variation settings.
-
Proxying Cloudinary Requests with Netlify
So we get reduced data cost, with no extra connection from the browser, and what appears to be pretty negligible cost at the CDN (the difference in response time for the final proxied images versus loading them without Cloudinary in place is barely noticeable in my tests)—and it all took just a few minutes to put into place.
-
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
-
Towards a Lightweight Jamstack
Not having to use a JavaScript framework also meant that HTML, not JSX or Vue components, is now front and center in the code you write. This helped me avoid the usual traps when writing React: the infamous div soup, inaccessible components, or non-semantic tags.
-
When the skeleton screen doesn’t match the outcome, we’ve created confusion and frustration that will overcome any benefit you might have gotten from trying to handle that delay in a better way.
-
When you have a search form on every page, with #Algolia's autocomplete, what is the current best way to load the full required JavaScript only when the input gets the focus?
-
How to Improve Core Web Vitals
Here's a great overview of both what will come soon in Google ranking algorithm, and how to detect and fix issues with these Core Web Vitals.
-
I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.
-
Looks like #Lighthouse now suggests me to preconnect to the Google Analytics domain…
…which I already do! 🤔
Anything wrong with my HTTP header?
-
Why you should be testing your 404 pages web performance
Nice overview of the issue encountered by users if your 404 error page weights too much, with actual data from HTTP Archive.
-
Nick Winkler
Performance vs. Functionality: Making the Right Site Speed Tradeoffs
Fortunes are made and lost based on how brands thread the needle between site speed and functionality. Despite this, the Retail Systems Research (RSR)’s survey reveals the average retailer’s website is still too slow, and their mobile sites are even slower.
-
@bagder hi Daniel, reading https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/ (yes, I'm late 😅)
If DNS B.example.com returns
192.168.0.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 strategy to justify using even better tools:
-
Using speedlify with #Netlify is great, because enhancing the sites performance will reduce the build times, therefore the monthly cost… 😁
-
This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍
New project: Speedlify 🐇
A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.
Demo:speedlify.netlify.app/ssg/c
Blog post:www.zachleat.com/web/speedlify/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 -
The Cost of Javascript Frameworks
In an ideal world, I believe a framework should go beyond developer experience value and provide concrete value for the people using our sites. Performance is just one part of that—accessibility and security both come to mind as well—but it’s an essential part.
-
If you're using Google Fonts service instead of self-hosting the fonts (even if they come from Google Fonts), Harry shows here the optimal performance and UX you can get with it, with lot of details, but a really simple solution.
-
I think that's the first time someone shares one of my articles on Hacker News:
https://news.ycombinator.com/item?id=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 on the scoring. Remember, the PageSpeed Score (which contributes to your SEO ranking) is the same as the Lighthouse Performance Score.
-
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look for inspiration in this code.
-
Eleventy’s New Performance Leaderboard
Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly it also doesn’t add anything extra either. This sort of developer empowerment over the final product has seemed to attract an amazing group of performance oriented developers using the project and I am so grateful to every one of you.
-
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.
-
Can we monitor User Happiness on the Web with performance tools?
I really like that SpeedCurve tried to innovate with this recent "User Happiness" metric. It aggregates multiple technical metrics to decide if users visiting the page are happy or not with it. But I see several issues in this metric.
-
Trackers on Your Domain, Revenue Risk
In this article, Boris shows how new practices around third party trackers hidden as first party assets, to "escape" GDPR and trackers blockers, can lead to security and performance issues, leading to potential business loss.
-
Caching best practices & max-age gotchas
Used correctly, caching is a massive performance enhancement and bandwidth saver. Favour immutable content for any URL that can easily change, otherwise play it safe with server revalidation. Only mix max-age and mutable content if you're feeling brave, and you're sure your content has no dependancies or dependents that could get out of sync.
-
Because while the web keeps getting heavier and we keep moving further away from page weight as a primary performance metric, the data I’ve seen so far indicates folks who want low-data experiences are far more common than we may think.
-
Improving the Speed and Accuracy of the Item Page with Light Service
Ramesh Periyathambi explains why eBay developed a dedicated "light" service to get critical informations about products, to speed up presentation of accurate content to buyers, and why it was worth the additional effort.
-
The Web Quality Checklist is intended for all professionals who create websites. It is designed in a collaborative way by a community of Web professionals, led by the French company Opquast (Open Quality Standards).
-
When should you be using Web Workers?
Surma explains very well how “low-end phones will mostly likely be used by the massive number of people coming online in the next couple of years“, and why we need to take that into account when we design our frontend Web architectures.
-
Progressive Font Enrichment: reinventing web font performance
In issue #11 of his great Web Fonts & Typography News newsletter, Jason Pamental shares the progress made by the W3C Web Fonts Working Group towards a new way to progressively serve fonts so that only the required new glyphs are downloaded every time new characters have to be rendered.
-
Tali Garsiel
How Browsers Work: Behind the scenes of modern web browsers
As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you’ll be glad you did.
-
great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural part of the web platform.
-
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
-
The average web page is 3MB. How much should we care?
You can have large, robust pages that still feel fast. But you should care about page bloat in terms of how it affects mobile users, especially mobile-only users who are dealing with bandwidth constraints or data limits.
-
What catches my eye are the gaps between TTFB and the paint metrics, and between the paint metrics and First CPU Idle. These gaps are caused by JavaScript dominating the browser main thread. This happens after TTFB when all the blocking scripts are executed – these have to finish before any rendering can happen.
-
Should I Use JavaScript to Load My Web Fonts?
the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.
-
Nikita Prokopov
As a general trend, we’re not getting faster software with more features. We’re getting faster hardware that runs slower software with the same features.
-
Using Cloudinary to convert an animated GIF to a video
I like animated GIFs, like most people these days I think, but they are really heavy, hurting the performance of web pages, and consuming data plans faster than should be needed. So we need to convert them to videos, which are much lighter, for the same visual result. Let's use Cloudinary.
-
Optimiser la performance des images responsives
J'ai eu l'honneur de présenter une petite conférence lors du meetup WebPerf de mars 2018, sur un sujet qui me passionne, puisqu'il combine deux de mes marottes en Web front : la performance et les images en Responsive Web Design. Je vous invite à découvrir mes slides et la vidéo.
-
So long Disqus, hello Webmention
Enough. I'm fed up with Disqus. It's been useful, easy to plug on this blog, but it's a mess for web performance, and I don't own my data, so… bye bye. Webmention is now a great alternative, with more people implementing it, so let's try to keep only that.
-
How much data should my Service Worker put upfront in the offline cache?
I love when Web site/apps work even when I'm offline. I've made my SVG game esviji work offline thanks to appcache just after attending Jake Archibald conference about why Application Cache is a Douchebag during the 2012 edition of the Paris Web conference. Fortunately, we have now Service Workers (in some browsers), which gives us more control over this kind of cache for offline browsing. But as Uncle Ben says, “With Great Power Comes Great Responsibility”.
-
Le gros impact des raccourcisseurs d'URL sur la performance
Les raccourcisseurs d'URL sont devenus incontournables sur le Web depuis quelques années, mais initialement pensés comme outils de facilitation de partage[1], ils ont beaucoup évolué et sont surtout devenus des outils de tracking. Du coup, les sites en abusent de plus en plus, alors que les plateformes où ces liens sont publiés, Twitter par exemple, rajoutent leur propre couche. L'impact sur la performance pour l'utilisateur final est désastreux.
-
Les bonnes pratiques webperf toujours sous la main
La collection «mémento» de chez Eyrolles vient de s'agrandir, avec l'ajout d'un petit nouveau dédié aux performances web, en termes de vitesse. Incontournable !
-
Réconcilier SEO et WebPerf au niveau des redirections de (sous)domaines
Le SEO et la performance Web sont deux disciplines très différentes liées à la mise en ligne de sites Web, avec des objectifs qui parfois peuvent être contradictoires. Mais des fois, ce qui paraît contradictoire ne l'est en fait pas si on y regarde de plus près, avec un peu de pragmatisme.
-
Performance Web, ma conférence à Web UX
Pour ceux qui n'étaient pas présents à Web UX en mai 2011, et avec pas mal de retard[1], voici mes slides, ainsi que la vidéo captée par l'équipe organisatrice.
-
Retrouvons nous à Web UX et Sud Web les 26 et 27 mai
Vous le savez sans doute si vous me lisez régulièrement, sur ce blog ou via mes tweets, je suis dingue de Web, et toujours intéressé par ses moyens de mise en œuvre, usages et acteurs, et donc très intéressé par tout événement permettant de mixer tout cela. Cette année, en plus de l'incontournable rendez-vous annuel Paris Web en octobre, vous pourrez me croiser fin mai à Nîmes pour Web UX et Sud Web.
-
La navigation ne se fige plus en haut de l'écran lors du scroll
Vous l'avez peut-être constaté par vous-même, le menu de navigation de ce site[1] ne se fige plus en haut de l'écran quand vous descendez dans la page. Ce fonctionnement que j'avais trouvé très sexy s'avère poser plusieurs problèmes, donc j'ai préféré le supprimer.
-
Surveillez vos erreurs 404, elles peuvent être très instructives
A l’heure où tout le monde ne jure que par l’optimisation du référencement — on dit Search Engine Optimization, ou SEO, pour faire branché — afin d’augmenter son trafic, et ainsi ses clients potentiels et/ou son revenu publicitaire, qui se soucie de vérifier ce qui se passe pour les internautes qui arrivent bien sur le site, mais sur une page qui n’existe pas, indiquée comme il se doit par une erreur HTTP 404[1] ?
-
Bouuuuh-stez votre site web !!!
La technologie INA (Intelligent Network Acceleration) de BoostWorks utilisé dans le produit BoostWeb Optimizer « est une procédure sophistiquée de mémorisation et de compression qui optimise les performances du réseau tout en préservant l'intégrité et la qualité des données ».
Kornel
Sara Soueidan
Barry Pollard
Jake Archibald
Jeremy Keith
Carolina Gilabert
Mark Llobrera
Chris Zacharias
Jon Sneyers
Simon Hearne
Tim Kadlec
Romaric Pascal
Brian Louis Ramirez
Emerson Loustau
Henry Desroches
Nicolas Goutay
Matt Hobbs
Zach Leatherman
Harry Roberts
Karolina Szczur
Bryan L. Robinson
Michelle Barker
Boris Schapira
Ramesh Periyathambi
Opquast
Surma
Jason Pamental
Eric Portis
Monica Dinculescu
Tammy Everts
Steve Souders
See all tags.