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
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").
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) :
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.
Uniquement sous imagick, mais on peut imaginer d’ajouter un fallback sous gd, faut juste trouver le bon trick pour obtenir un résultat similaire.
Lors de mes essaie j’ai joué avec la lib ▻https://github.com/ccpalettes/gd-indexed-color-converter mais ça n’utilise pas la même méthode « Floyd–Steinberg » VS « ordered dithering » et le résultat ne me convenait pas aussi bien côté rendu que poids de l’image générée, exemple :
PS : une piste par ici ▻https://github.com/kosinix/grafika/blob/master/src/Grafika/Gd/Filter/Dither.php#L135
J’ajoute les liens qui m’ont été utiles en vrac pour référence si jamais quelqu’un veut s’y recoller un jour :
▻https://github.com/lowtechmag/solar-plugins/blob/master/dither/dither.py
▻https://bisqwit.iki.fi/story/howto/dither/jy
▻https://en.wikipedia.org/wiki/Ordered_dithering
▻https://web.archive.org/web/20070927122512/http://www.efg2.com/Lab/Library/ImageProcessing/DHALF.TXT
▻https://imagej.net/Dithering
Et mon squelette de debug et ses fonctions qui contiennent mes essais non achevés pour le faire avec GD cf image_tramer_floydsteinberg() & image_tramer_gd() :
▻https://gist.github.com/brunob/055fac68c1283b6d89ee7a1e3f2a9fd6
tiens d’ailleurs ça se passe comment quand on utilise un filtre qui n’est pas multi-librairie, que pour une, mais qu’on est sur une autre ? ça fait rien, ou ça fait une erreur ?
Je ne comprends pas ta question @rastapopoulos ^^
un filtre qui n’est pas multi-librairie, que pour une, mais qu’on est sur une autre
Gné ?
bah librairie d’image, un filtre qui au final ne marche qu’avec telle librairie précise. La plupart des filtres fournis marchent avec toutes les librairies, donc on se dit qu’on peut tous les utiliser, mais ça fait quoi si on est sur une autre du coup ?
’k, ben ça ne fait rien à part renvoyer l’image d’origine cf le test if (method_exists('Imagick', 'orderedPosterizeImage')) {, pas de génération d’erreur donc, si c’était ta crainte.
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
Et leur autre librairie Turbolinks, ça a l’air à la fois tout con mais génial comme principe !
▻https://github.com/turbolinks/turbolinks
Avoir 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.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.”
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-o
et on peut l’optimiser encore en faisantfor (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).
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+)
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: immutable on 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.”