#webperf

Web Vitals
▻https://web.dev/patterns/web-vitals-patterns

Des modèles « optimisés Google » pour les composants fréquents des pages web (slider, image et vidéo, infinite scroll...)

A propos de Web Vitals , le dernier avatar de Big brother pour imposer ses diktats sur l’architecture/référencement des sites web :

Overview
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.
Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

#web_vitals #slider #image_responsive #Infinite_scroll #google

« Le Web, tout le monde s’en sert et beaucoup en sont très contents. Mais, même parmi ceux et celles qui sont ravi·es de l’utiliser, il y a souvent des critiques. Elles portent sur de nombreux aspects et je ne vais pas essayer de lister ici toutes ces critiques. Je vais parler d’un problème souvent ressenti : le Web n’est-il pas devenu trop compliqué ? »

►https://framablog.org/2020/12/30/le-web-est-il-devenu-trop-complique

#Avenir_du_Web #obésiciel #sobriété_numérique #Dillo #NoScript #bloqueur_de_publicité #Gemini

We Analyzed 11.8 Million Google Search Results Here’s What We Learned About SEO

Analyse très intéressante sur le #référencement.

Important:
–Domain Rating
–Short URLs
–Page authority
–Comprehensive content
–Backlinks

Not Important:
–Schema
–Site speed
–Word count
–Title tags

https://backlinko.com/search-engine-ranking

Via le seen de @tofulm : https://seenthis.net/messages/849786

https://backlinko.com/wp-content/uploads/2020/03/search-engine-ranking-hero.png

#SEO #Google #webperf

Google confirme : le temps de chargement des pages est un critère de pertinence de très faible poids

https://www.abondance.com/20200430-42659-google-confirme-le-temps-de-chargement-des-pages-est-un-cr

Après John Mueller le mois dernier, c’est cette semaine au tour d’un autre porte-parole SEO, en l’occurrence Gary Illyes, de confirmer le poids très faible qu’a le critère du temps de chargement des pages dans l’algorithme de pertinence de Google

17 ways to make your website more energy efficient

▻https://www.wholegraindigital.com/blog/website-energy-efficiency

Mostly good advices for webmasters but be careful, some advices are questionable. Most are correct but will not be followed by corporations ("less tracking").

#energy #website_creation #webmaster

Suite à la discussion à propos du site LOW←TECH MAGAZINE et du format d’image qu’il utilise cf ►https://seenthis.net/messages/809252 je me suis amusé avec imagick pour ajouter un filtre image_tramer pour #SPIP :

▻https://zone.spip.net/trac/spip-zone/changeset/120905

Ça permet donc de générer des images « tramées » en mode « ordered dithering » qu’on peut ensuite décorer à coup de css mix-blend-mode: hard-light; sur une couleur d’arrière plan.

Exemples d’images générées par le filtre (en mode natif sans couleur d’arrière plan) :

https://pic.infini.fr/zRAG8dXL/owTTKtWF.jpg

PS : les trois premières images ont les mêmes dimensions que l’originale, je les ai affiché en mode pleine largeur uniquement pour mieux montrer les détails de l’effet obtenu par le filtre.

#spip_blog

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.

#webperf #web #développement #monitoring

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.”

#WebPerf_clevermarks_Asia

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. »

#webperf_SEO_thirdParty_TagCommander_clevermarks

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.”

#webperf_FinancialTimes_clevermarks_news_media_revenue

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.”

#webperf_history_clevermarks

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.”

#webperf_JavaScript_component_CPU_clevermarks

奇云测 — 测试你的网站速度
▻http://ce.cloud.360.cn
#webperf_audit_supervision_China_QQ

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 ?.”

#skeleton_screen_UX_webperf_clevermarks

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»

#JavaScript_framework_HTML_clevermarks

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.”

#a11y_webperf_checklist_Web_CSS_JavaScript_HTML_clevermarks

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.js

Highly 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.”

#webperf_weight_data_cost_clevermarks

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?”

#webperf_clevermarks

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.”

#webperf_statistics_clevermarks

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.”

#webperf_Google_mobile_clevermarks

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.”

#www_no_www_DNS_CDN_DDoS_security_domain_clevermarks

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).

https://4.bp.blogspot.com/-mOlb1GnMAK0/WCoH7V-XB8I/AAAAAAAABaM/1luwC-0T4fgM9V_OZtNFUwKSEsR5qcJzwCLcB/s640/4.png

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.01299

Par contre, j’ai pas encore trouvé comment ils ont implémenté ça (c’est déjà utilisé sur l’appli Android de google+)

#machine_learning #webperf

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”

#webperf_cache_ServiceWorker_clevermarks