#webp

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

Troll hunter - Le Monolecte
▻https://blog.monolecte.fr/2021/02/14/troll-hunter
▻https://blog.monolecte.fr/wp-content/uploads/2021/02/eliandstevePT.webp

Sur internet, il n’y a personne et en même temps, il y a tout le monde. Tu peux éclater la gueule de quelqu’un à grands coups d’insultes ou de rhétorique tordue, tu peux harceler ou invisibiliser, tu peux démolir systématiquement une personne, son œuvre, sa pensée, sa vie, comme ça, bien tranquille derrière ton clavier, sans aucune espèce de conscience, sans ne jamais être exposé aux conséquences. Tu peux décharger ta frustration, ta colère, ta haine, ton trop-plein de merditude, sans l’impact sourd du gnon dans la bidoche, sans les cris qui pètent le tympan, sans le sang et les ratiches qui te sautent à la gueule. Tu peux boxer sans te niquer les jointures et sans risquer de te faire éclater la tronche ou réajuster le portrait.
Sauf que ce n’est pas aussi simple que ça.

« 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

Modif de mon script de détection de la compatibilité #WebP du navigateur dans mon #plugin #SPIP image_responsive :
►https://git.spip.net/spip-contrib-extensions/image_responsive

Jusqu’à présent, je me contentais d’un test synchrone en Javascript, avec un code assez simple. Le hic : Firefox compatible avec WebP n’était pas détecté comme compatible. Et re-hic avec les mises à jour récentes de MacOs et iOS, Safari a le même souci.

La nouvelle méthode : je fais le teste synchrone. Si le test synchrone dit que le navigateur est compatible, tant mieux, on s’arrête là, c’est oui.

Si le test synchrone échoue (peut-être Safari ou Firefox), alors je balance un test asynchrone. En attendant, pour cette première page, tant pis, les scripts considèrent que le navigateur n’est pas compatible, et on travaille avec JPEG ou PNG à la place de WebP.

Mais à la fin du teste asynchrone, je stocke le résultat (oui/non) en LocalStorage. Et ainsi, à la page suivante, je récupère directement le résultat du localstorage, et j’affiche ou non le WebP sans refaire de test de compatibilité. Et ça fonctionne nickel avec Safari et Firefox (à partir de la seconde page donc).

Et au passage, j’introduis exactement la même méthode pour le format #Avif (pour le coup, ça détecte bien Chrome, qui pourtant ne passe pas non plus le test synchrone – même bug bizarre sur le MimeType de image/avif qui est détecté comme image/png).

Is #WebP really better than #JPEG ? - siipo.la
▻https://siipo.la/blog/is-webp-really-better-than-jpeg

https://siipo.la/wp-content/uploads/is-webp-really-better-than-jpeg.png

Is WebP better than JPEG?

So, is WebP better than JPEG? It depends if you are using the reference libjpeg library or the improved MozJPEG encoder.

WebP seems to have about 10% better #compression compared to libjpeg in most cases, except with 1500px #images where the compression is about equal.

However, when compared to MozJPEG, WebP only performs better with small 500px images. With other image sizes the compression is equal or worse.

I think MozJPEG is the clear winner here with consistently about 10% better compression than libjpeg.

Since most of the time WebP is used alongside JPEG fallback, by using WebP you will essentially double your storage costs with little benefit.

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

RFC 8752 : Report from the IAB Workshop on Exploring Synergy between Content Aggregation and the Publisher Ecosystem (ESCAPE)

Ce #RFC est le compte-rendu d’un atelier de l’IAB qui s’est tenu en juillet 2019 au sujet du #WebPackaging, une proposition technique permettant de regrouper un ensemble de pages Web en un seul fichier, pouvant être distribué par des moyens non-Web, tout en étant authentifié. Cela pose des questions nombreuses sur le copyright, l’authentification, la gouvernance, le rôle des intermédiaires (WebPackaging peut changer le rapport de force entre créateurs de contenu et GAFA) , etc. Un concentré d’enjeux et défis actuels.

https://www.bortzmeyer.org/8752.html

Bien que pas mal de gens ici font du Web, je n’ai pas trouvé d’article sur le WebPackaging sur SeenThis, qui, en tant qu’intermédiaire, pourrait être intéressé. Alors je mets d’autres liens :

La page de l’atelier, avec les textes soumis : https://www.iab.org/activities/workshops/escape-workshop

La page du projet WebPackaging : https://github.com/WICG/webpackage

Le groupe de travail IETF : https://datatracker.ietf.org/wg/wpack/documents

#WebPackage

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

Sur la plupart des serveurs, j’ai besoin d’allonger la durée indiquée de conservation en cache des éléments intégrés aux pages, pour faire plaisir à PageSpeed Insights.

Je me note le code ici :

Par rapport à ce qu’on trouve usuellement en ligne, il y a aussi le WebP et le woff/woff2, que j’utilisent désormais systématiquement.

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

Let’s Make Our Bundle Size Even Smaller
▻https://hackernoon.com/lets-make-our-bundle-size-even-smaller-7a5727bb110?source=rss----3a8144e

https://cdn-images-1.medium.com/max/1024/1*SpAN7DL4gLUMumCj63WBGA.jpeg

If you ever developed a SPA (Single-Page-Application), where ever it was on Angular, #react, Vue or something else, You probably noticed that all the hard work you’ve put into your app goes to one minified .js file and one .css file. Those files contain all your dependencies and functionalities of the app.sometimes, those files could become quite big and increase the loading time of your app this something I stumbled upon during my work.With #webpack for example, the files are made after “Tree-shaking “ and Uglify.Tree-shaking is the process of removing all the unused function and variables from the code, which makes our app a lot smaller (basically we only use a small part of our dependencies and a large part of the code isn’t even being called).Uglify (as it sounds like) is the process of (...)

#javascript #npm #coding

Deploying a Node.js #twitter Bot on AWS Lambda using #webpack
▻https://hackernoon.com/deploying-a-node-js-twitter-bot-on-aws-lambda-using-webpack-df6e2e187a78

https://cdn-images-1.medium.com/max/1024/1*DieJz9sNLgCBgPlraWy85Q.png

I recently had an idea for a Twitter bot for the #LearnInPublic community, which I thought would be a fun project with half a day worth of work. Moreover, I wanted to use AWS Lambda function for the sake of learning. Why AWS Lambda? Because it’s practically free for maintaining a twitter bot and I got hands on experience with a seemingly complex tool used widely in the industry. You get 1,000,000 free requests and 400,000 seconds of compute time per month for AWS Lambda. My bot uses 0.02% of the above numbers.In the process I found a cool use-case Webpack. I had fun reading the webpack docs and figuring learning about the gotchas. Even though it was a very primitive use-case, felt like a true Sean Larkinn for a day. Here is a detailed article on how you could do the same.A little about (...)

#aws-lambda #nodejs #javascript

#carlo development on a Web server
▻https://hackernoon.com/carlo-development-on-a-web-server-626ee0aeae1c?source=rss----3a8144eabfe

Originally posted on blog.agney.inCarlo is a headful Node app framework for building desktop applications.How is it different from Electron, Proton Native?While these other frameworks, bring their own runtime into the equation, Carlo uses the Chrome instance already installed on a users computer.Why would you want it on a web server?Using #webpack to bundle all your files makes it easier to use the developer ecosystem that the javascript community already provides. Like Babel, SCSS or ESLint.What is about to be assumed?You already know how to setup a normal webpack server.Is there a shortcut?Yes, Electrojet CLI provides a single command to setup a carlo project using webpack:npm init electrojet <project-name> —template=carloHow do I set Carlo to listen to the webpack dev server?Carlo (...)

#blocked-by-client #dev-server #carlo-development

#webpack, #babel, and #react from Scratch — BUT WHY ?
▻https://hackernoon.com/webpack-babel-and-react-from-scratch-but-why-889a385ff32f?source=rss----

https://cdn-images-1.medium.com/max/640/1*KpImd6VctvHpmNeyeZKeWQ.png

Webpack, Babel, and React from Scratch — BUT WHY?Webpack, Babel, and ReactIn between graduate school and other things, I have been me digging deeper into the #javascript ecosystem. As a person who loves React, I got curious with create-react-app. With a simple npm install -g create-react-app on your command line, you will be able to install the most popular React starter pack. However, have you ever wondered how create-react-app works? Or how they make these apps run fast on the browser with relatively smaller network requests? Maybe perhaps how bundling and generating static files happens after running npm run build? These things are intriguing. Under the veil of magic these open source projects carry are simple lines of code that you and I can learn and understand.I decided to build a (...)

#node

Improving the #performance of #javascript Applications
▻https://hackernoon.com/improving-the-performance-of-javascript-applications-c05385185f9f?source

https://cdn-images-1.medium.com/max/1024/1*ofxl6lx71JEwAF6jOGSUww.jpeg

As developers we all tend to have our own views regarding technologies, languages and frameworks. We argue a lot about code style, indentation and best practices. However, If there is one thing that we can all agree on, it is that performance is of the upmost importance.As we know the average timespan of a person tends to get lower and lower. We focus on sending a loader or something as soon as we can so we can grab the user’s attention and prevent him from bouncing from our page. It doesn’t matter how good our code is if the user doesn’t get the chance to even load the app in the first place.Front-end development is incredibly dynamic. Thanks to that, we now have an abundance of incredible tools that can help us improve the performance of our web applications.While some of the concepts (...)

#webpack #optimization #react

The status of #javascript outside of the browser: 2018 & beyond.
▻https://hackernoon.com/the-status-of-javascript-outside-of-the-browser-2018-beyond-ee0b79ee059f

https://cdn-images-1.medium.com/max/357/1*0qz-rzy_5gcf9wjdBP99pw.png

The JavaScript doesn’t stay just only in inside of browser as many could think. It’s showing a great power in various area and sometimes it’s more potential from outside of the browser.Bear in mind: The content of this article is by May of 2018 and will not likely reflecting newest updates as well and may contain some personal perspectives.Node.jsAs the year of 2017, continuously demonstrated a shiny progress as it was. 250 million downloads happened on last year, and this is equivalent of 700K downloads per day!It’s growing tremendously every year, the monthly downloads of the year 2017 was increased as 70~80K more compared with the monthly downloads from 2016.node by numbersMany companies adopted Node.js last year. For those who needed to provide new digital experiences to customers in (...)

#nodejs #webpack #react-native #pwa

#react with #typescript and #webpack
▻https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6?source=rss----3a8144eabfe

https://cdn-images-1.medium.com/max/1024/1*sVEFEYd1sDqen7YrIrGgtw.png

The feeling, when you react, script and pack.Why am I writing thisAt the time of writing this article, the popularity of React has already shot off the roof, that of Typescript is on the rise and it is safe to say that Webpack is the most preferred modern module bundler for an application. However, there is still an underlying dearth of a good example of the best possible way to start a project in React with Typescript and Webpack. Having said that, there are good resources out there if you want to use create-react-app cli or any other react starter kit out there. But there are very few ones if you want to have control over the configurations of your application.The downside of using a cli like create-react-app are that you have to rely on the following tools the same way (...)

#web-development #javascript

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

Full Stack Web Application using #react, Node.js, Express and #webpack
▻https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd

https://cdn-images-1.medium.com/max/1024/1*y6C4nSvy2Woe0m7bWEn4BA.png

Create React App is a quick way to get started with React development and it requires no build configuration. But it completely hides the build config which makes it difficult to extend. It also requires some additional work to integrate it with an existing Node.js/Express backend application.In this guide, we will walk through the set up of a simple full stack React application with a Node.js and Express backend. Client side code is written in React and the backend API is written using Express. This application is configured with Airbnb’s ESLint rules and formatted through prettier.Source code for this application can be found here.Quick Start# Clone the repositorygit clone ▻https://github.com/crsandeep/simple-react-full-stack# Go inside the directorycd simple-react-full-stack# Install (...)

#javascript #expressjs #full-stack

A tale of #webpack 4 and how to finally configure it in the right way
▻https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e9

https://cdn-images-1.medium.com/max/1024/1*f2JinK5jRjYoLJ31kAKyLQ.jpeg

Spoiler: there is no right way. #justwebpackthingsOriginal photo: ▻https://www.instagram.com/p/BhPo4pqBytk/?taken-by=riittagirlThanks for giving my tutorial so much feedback. I am proud to say that Webpack has twitted about it the other day and it was officially approved my a couple of contributors!thanks!There are a million tutorials online, so you probably have seen a thousand different ways to configure Webpack file. And all of them will be working examples. Why is it so? Webpack itself has been evolving really fast and a lot of loaders and plugins have to keep up. This is a major reason why the #configuration files are so different: with a different version combination of the same tools things might work, or break.Let me just say one thing, and this is my sincere opinion: a lot of (...)

#javascript #css #postcss

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