Welcome to the wonderful world of Web Performance
▻https://www.sitespeed.io
Suite d’outils libres pour monitorer la performance des sites, tout installable en docker ou npm.
-
-
Design for mobile: why we need to think beyond the West
▻https://www.creativebloq.com/mobile/design-mobile-why-we-need-think-beyond-west-81412655“We tend to measure performance by our own standards, or by some average fairly close to them. Then it hits you, next time you go on holiday: the super fast site you built the other week suddenly performs poorly and takes way too long to load.”
-
Comment Rue du commerce optimise sa performance web... et son SEO
▻https://www.journaldunet.com/solutions/dsi/1207646-comment-rue-du-commerce-optimise-sa-webperf-et-son-seo« Dans l’optique de faire progresser encore sa webperf, Rue du commerce compte actionner plusieurs autres leviers dans les mois qui viennent. Via l’outil TagCommander, le site marchand optimisera l’ordonnancement du chargement des tags et surtout supprimera ceux qui se révèlent inutiles et alourdissent les pages. »
-
Financial Times increases engagement with personalisation, speed
▻https://www.inma.org/blogs/ideas/post.cfm/financial-times-increases-engagement-with-personalisation-speed“Through a rough a series of A/B tests, we slowed the site down to see how site speed correlates to loss of engagement and revenue. Test results showed that for every one second increase in speed, our engagement score increased by 5%. In subscription and ads inventory, this translates into millions in revenue. Speed therefore became a principal element of the site.”
-
A brief history of web performance ROI
▻https://www.soasta.com/blog/web-performance-monitoring-roi“While there’s still a lot to be learned, I thought it would be interesting to take an historical look at what we’ve learned over the past few years, the big questions we’ve asked during this journey, and some questions I plan to explore moving forward.”
-
Bad Month for the Main Thread
▻https://daverupert.com/2018/01/bad-month-for-the-main-thread“I believe we need an alternative to All-in-JS on the client. I am bought into the idea of Single-File Components, but want that with more focus on HTML as the foundation than JavaScript.”
-
-
Building Skeleton Screens with CSS
▻https://mxb.at/blog/css-skeleton-screens“For a web app, this concept might include displaying “mockups” of text, images or other content elements - called skeleton screens 💀.”
-
The Origin of Stimulus
▻https://github.com/stimulusjs/stimulus/blob/master/ORIGIN.md«contemporary mainstream approaches are needlessly convoluted, […] we can do more, faster, with far less»
-
sympathique !
▻https://bl.ocks.org/Fil/be9e7ba360e2f6797e6071351fa122a6
Hello stimulusjs - Philippe Rivière -
Et leur autre librairie Turbolinks, ça a l’air à la fois tout con mais génial comme principe !
▻https://github.com/turbolinks/turbolinksAvoir un des avantages des applis « one page » (le chargement rapide) MAIS en gardant la conception habituelle page par page, et donc l’accessibilité, et l’ancienne méthode de chargement complet si ça ne marche pas.
#javascript #framework #HTML #webperf (au moins perçue)
-
-
inclusive-design-checklist: Aims to be the biggest checklist of inclusive design considerations ever
▻https://github.com/Heydon/inclusive-design-checklist“Aims to be the biggest checklist of inclusive design considerations for the web ever. Includes items for accessibility, performance, device support, interoperability, and language.”
-
Mes 72 meilleures idées pour améliorer votre référencement (SEO)
▻http://www.webrankinfo.com/dossiers/techniques/idees-seo
#seo -
Lozad.js
▻https://github.com/ApoorvSaxena/lozad.jsHighly performant, light ~0.5kb and configurable #lazy_loader in pure JS with no dependencies for #images, #iframes and more, using #IntersectionObserver API
Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.
Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
En lien avec ▻https://seenthis.net/messages/619904
-
The average web page is 3MB. How much should we care?
▻https://speedcurve.com/blog/web-performance-page-bloat“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.”
-
How to lose weight (in the browser)
▻https://browserdiet.com“And what if we got together a bunch of experts who work on large sites to create a definitive front-end performance guide? And not just one of those boring guides made for robots, what if we did something fun?”
-
-
for (i = 0; i < arr.length; i++) {
// Bad - size needs to be recalculated 1000 times
}
for (i = 0, len = arr.length; i < len; i++) {
// Good - size is calculated only 1 time and then stored
} -
Et déjà traduit en français, tant qu’à faire :
▻https://browserdiet.com/fr -
l’exemple choisi est inélégant et probablement inutile
▻https://stackoverflow.com/questions/5752906/is-reading-the-length-property-of-an-array-really-that-expensive-an-oet on peut l’optimiser encore en faisant
for (var i = arr.length; i-->0) { pouet } -
-
-
Web Performance Optimization Stats
▻https://wpostats.com“Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.”
-
Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
▻https://www.thinkwithgoogle.com/articles/mobile-page-speed-new-industry-benchmarks.html“When it comes to mobile pages, speed and size matter. Marketers must keep consumers engaged on mobile and focus on building mobile-first experiences.”
-
To WWW or not WWW
▻https://www.netlify.com/blog/2017/02/28/to-www-or-not-www“The ideal setup that we recommend is to use www or any other subdomain as the canonical domain for your website, but still use a DNS host that supports some form of CNAME on the apex domain.”
-
Enhance ! RAISR Sharp Images with Machine Learning
▻https://research.googleblog.com/2016/11/enhance-raisr-sharp-images-with-machine.html
Arriver à afficher une image haute résolution avec un exemplaire plus petit et un filtre sur mesure, calculé à l’aide du « machine learning » (avec l’image originale comme modèle).
(haut : original, bas : optimisée)On peut voir ça comme un mélange de compression de données et d’effet photoshop : les images ainsi traitées semblent avoir plus de piqué que les originales.
La méthode est économique en temps de calcul.Papier scientifique (punaise, les maths c’est loin, j’ai du mal à lire les équations) :
▻https://arxiv.org/abs/1606.01299Par contre, j’ai pas encore trouvé comment ils ont implémenté ça (c’est déjà utilisé sur l’appli Android de google+)
-
Saving you bandwidth on Google+ through machine learning
▻https://blog.google/products/google-plus/saving-you-bandwidth-through-machine-learning
-
-
Caching best practices & max-age gotchas
▻https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-“you can hack around poor caching in your service worker, but you’re way better off fixing the root of the problem. Getting your caching right makes things easier in service worker land, but also benefits browsers that don’t support service worker”
-
Cache-Control: immutable
▻https://bugzilla.mozilla.org/show_bug.cgi?id=1267474#c67“With Firefox and
Cache-Control: immutableon the BBC Web site we’re now seeing ~31% fewer 304’s served from our CDN edge on a subset of our static assets” -
Our best practices are killing mobile [perceived] web performance
▻http://molily.de/mobile-web-performance“The [BBC News] site started with good intentions but unfortunately ended up with bad results. The overall performance and usability suffers from the lazy-loading more than it benefits.”
-
“good performance brings users back” at Instagram
▻http://engineering.instagram.com/posts/193415561023919/performance-&-usage-at-Instagram“During the A/B test, we saw app-wide impressions across all mobile platforms increase by 0.7%, and likes increase by 0.4%. This was driven by increases of impressions on all surfaces – for instance, “Explore Photos” impressions increased over 3%, and user profile scrolls increased 2.7%. These trends continued over time, confirming that good performance brings users back.”
-
Tiens, le SPAM arrive sur @seenthis ?
-
-
Maybe we could tone down the #JavaScript / fuzzy notepad
▻https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascriptI’m having a really weird browser issue, where scripts on some pages just won’t run until about 20 seconds have passed.
Whatever you’re about to suggest, yes, I’ve thought of it, and no, it’s not the problem. I mention this not in the hope that someone will help me debug it, but because it’s made me acutely aware of a few… quirks… of frontend #Web #development.
-
Toujours faire du HTML+serveur classique qui marche toujours correctement, PUIS rajouter des fonctionnalités Javascript client pour ceux qui l’ont.
I’m not saying that genuine web apps like Google Maps shouldn’t exist — although even Google Maps had a script-free fallback for many years, until the current WebGL version! I’m saying that something has gone very wrong when basic features that already work in plain HTML suddenly no longer work without JavaScript. 40MB of JavaScript, in fact, according to about:memory — that’s live data, not download size. That might not sound like a lot (for a page dedicated to showing a 140-character message?), but it’s not uncommon for me to accumulate a dozen open Twitter tabs, and now I have half a gig dedicated solely to, at worst, 6KB of text.
#webperf #accessibilité #progressive_enhancement #amélioration_progressive #sémantique
-
-
WordPress active AMP par défaut sur les blogs | Presse-Citron
▻http://www.presse-citron.net/wordpress-active-amp-par-defaut-sur-les-blogs"Dans un billet, la plateforme de blog explique : « A compter d’aujourd’hui, les sites WordPress.com supportent Accelerated Mobile Pages (AMP) – une nouvelle initiative insufflée par Google pour améliorer de manière significative la vitesse de chargement de vos pages sur tablettes et mobile. La meilleure partie ? Les utilisateurs de WordPress.com n’ont rien à faire. AMP fonctionne automatiquement, générant une version allégée et rapide de vos publications ». Pour les sites qui utilisent le code de WordPress.org, Automattic propose également un plug-in qui permet de générer ces pages automatiquement."
-
Content Performance Policy
►http://yoavweiss.github.io/ContentPerformancePolicyTherefore, there’s an increasing need for a mechanism that would give authors control over their sites, and give them the opportunity to opt-out of various features of the Web platform that are inherently slow or from behaviors that are known to irritate users and result in bad mobile user experience. These same mechanisms can be used for guarantees for content embedders as well as content blockers, and enable them to make smart descisions based on the known performance characteristics of the content.
