Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #w
  • #we
  • #web
RSS: #webp

#webp

  • #webpackage
  • #webpackaging
  • #webpagetest
  • #webperformance
  • #webperf_
  • #webpresse
  • #webportage
  • #webp_image_webperf_clevermarks
0 | 25 | 50 | 75 | 100 | 125 | 150
  • @sandburg
    Sandburg @sandburg CC BY-SA 17/04/2023
    3
    @simplicissimus
    @olaf
    @rastapopoulos
    3

    Nappes d’eau souterraine au 1er avril 2023 et risques de sécheresse estivale

    https://i.ibb.co/p4h4KN2/Secheresse2023.png

    Article du BRGM
    ▻https://www.brgm.fr/fr/actualite/communique-presse/nappes-eau-souterraine-au-1er-avril-2023-risques-secheresse-estivale

    PS : les .webp sur Seenthis, il n’y avait pas un projet de les supporter ?

    Sandburg @sandburg CC BY-SA
    • @klaus
      klaus++ @klaus 17/04/2023
      @seenthis

      #webp @seenthis

      klaus++ @klaus
    • @simplicissimus
      Simplicissimus @simplicissimus 17/04/2023

      IMG/distant/bin/communique-n0708.bin https://www.brgm.fr/sites/default/files/styles/background_centered_full_width_desktop/public/images/2023-04/communique-nappes-eau-souterraine-2023-04-001_0.jpg.webp

      #webp +1000 !

      Simplicissimus @simplicissimus
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 27/09/2021
    3
    @jeanmarie
    @monolecte
    @ericw
    3

    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

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/09/2021

      #intégration #web #webperf

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @monolecte
    M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 14/02/2021
    4
    @marielle
    @rastapopoulos
    @spip
    @mad_meg
    4

    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.

    M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 14/02/2021

      Tiens, j’ai essayé un format .webp, ça affiche moyen…

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @vanderling
      Vanderling @vanderling 14/02/2021

      dessins & strips par O.Texier
      ►https://otexier.blogspot.com

      https://1.bp.blogspot.com/-1W1l1fRtk1E/X_w3ybHlV2I/AAAAAAAAMiA/BlO-BTjzOfcAQLA3mhiE7cozb1Jx5po2gCLcBGAsYHQ/w522-h640/Demain_inedit_118b.jpg

      #trolling

      Vanderling @vanderling
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/02/2021

      #modération #troll #société

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 14/02/2021
      @seenthis

      @seenthis, on peut rendre le format d’#image #webp affichable ici  ? Je teste pour la première fois. Les gens du #web_design, des avis sur ce format  ?

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 14/02/2021

      De mon côté, je travaille énormément avec le format WebP, mais uniquement comme alternative (automatisée) au Jpeg ou au PNG. Je ne fabrique jamais moi-même une image WebP depuis un logiciel sur ma machine, et je n’installe jamais une telle image WebP dans le CMS ou sur un site Web.

      En revanche, je configure mon CMS (en l’occurence SPIP avec mon plugin image_responsive) pour fabriquer automatiquement la version WebP à partir de la version Jpeg, et créer le code HTML qui permet de présenter les deux versions au navigateur. De cette façon les navigateurs compatibles chargent la version WebP (plus légère) et sinon c’est la JPEG qui est utilisée.

      Selon CanIuse, 92% des visiteurs seraient capables d’afficher Webp. C’est bien, mais c’est pas parfait. Mais la principale difficulté ici, c’est que si ton navigateur n’affiche pas WebP, et que ton code ne propose pas la version Jpeg, alors rien ne s’affiche (alors que dans les principes du HTML, on s’arrange pour que quelque chose s’affiche, même si c’est pas aussi joli qu’avec un navigateur dernier cri). Donc il vaut mieux laisser ton CMS fabriquer et diffuser l’image dans les deux formats, pour être certaine que ça s’affiche partout.

      ARNO* @arno ART LIBRE
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 15/02/2021
      @arno

      Merci, @arno.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 15/02/2021
      @monolecte

      @monolecte on a un ticket à ce sujet par ici ►https://github.com/seenthis/seenthis_squelettes/issues/13 et SPIP 3.3 prendra en charge le webp nativement cf ▻https://git.spip.net/spip/spip/commit/57914b92f9ca756c13bfe488a0e59eb2de0e6884

      Mais il faudra attendre qu’on travaille à la migration de seenthis en 3.3 :)

      b_b @b_b PUBLIC DOMAIN
    • @james
      James @james PUBLIC DOMAIN 16/02/2021
      @val_k

      Pour revenir au vrai sujet de ce seen, j’ai regardé hier soir les 5 épisodes de ce documentaire :

      ▻https://www.france.tv/documentaires/societe/trolls/2156419-episode-1.html

      via @val_k

      James @james PUBLIC DOMAIN
    • @mad_meg
      mad meg @mad_meg CC BY 16/02/2021
      @james

      Interessante cette série @james je viens juste de la visionner.
      L’omniprésence masculine me frappe en premier, le fait que leur cible privilégié soit les féministe. Dès le début il y a foule de paradoxe :
      – le fait qu’ils prétendent troller pour donner une lecon aux autres, faire de la pédagogie
      – le fait de dire qu’ils ont une éthique du troll et que leur troll est sérieux
      – le fait de dire qu’ils sont là uniquement pour rigolé mais ont besoin de justice tout en dénonçant les justiciers et réclamer la justice quand leur troll leur retombe dessus (surtout sur la gosse et l’épouse du troll en fait)
      – le fait de dénoncé les gens qui se prennent pour ce qu’ils ne sont pas - tout en se prenant pour sèneque dans son jardin...
      – le besoin de se divertir en mettant une ambiance de merde et rendre les autres fous
      – le fait de dire qu’ils ne vendent rien tout en vendant des videos, bouquins, expos, œuvres et gagnant de la notoriété ;
      – les exemple de personnes à troller énumérés ; mon gosse, ma femme, mon lapin et « je pisserai exprès sur moi pour toller les infirmières en ephad » ...
      à un moment il est question d’absence d’empathie - les trolls se revendique de ne pas en avoir et disent pouvoir etre un bon prof tout en ayant zero empathie...
      – le fait d’en vouloir à ceux qui ont de la notoriété en utilisant le troll, tout en utilisant le troll sois même ...
      – le fait de détruire la carrière de femmes journalistes, d’artistes pour le lol
      et tout ca on ne peu rien en dire car ces paradoxes sont du troll en soi, tout ce qui est dit par ces trolls peut etre dénié en disant que c’était du troll.
      La seul chose qui reste c’est le masculinisme, le surplomb, les dominants qui trompe l’ennuie en utilisant les autres et l’absence d’empathie.
      Tout est vanité...

      mad meg @mad_meg CC BY
    • @james
      James @james PUBLIC DOMAIN 16/02/2021

      J’ai pas donné mon avis, mais ça m’a sidéré...

      James @james PUBLIC DOMAIN
    Écrire un commentaire
  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 31/12/2020
    4
    @colporteur
    @marcimat
    @grommeleur
    @biggrizzly
    4

    « 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

    Stéphane Bortzmeyer @stephane CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 1/01/2021

      #webperf #développement #web #conception

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 13/12/2020
    1
    @spip
    1

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

    ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 3/07/2020
    4
    @jeanmarie
    @arno
    @george
    @kent1
    4

    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.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/07/2020
      @arno

      poke @arno

      RastaPopoulos @rastapopoulos CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 4/07/2020

      J’aimerais savoir comment on fait pour utiliser MozJpeg dans mon CMS de prédilection, celui-ci utilisant classiquement GD et LibJpeg pour fabriquer les images.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 4/07/2020

      Apparemment l’API est compatible et ya des paquets qui remplacent les liens symboliques (dans GD par ex) vers la lib de mozilla :
      ▻https://www.getpagespeed.com/server-setup/mozjpeg-as-drop-in-replacement-for-libjpeg-in-centos-redhat-amazon-lin

      Mais faut trouver comment faire suivant les systèmes…

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 2/05/2020
    2
    @tofulm
    @cy_altern
    2
    @tofulm

    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

    jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 2/05/2020

    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

    Stéphane Bortzmeyer @stephane CC BY-SA
    Écrire un commentaire
  • @tofulm
    tofulm @tofulm 2/05/2020
    4
    @biggrizzly
    @rastapopoulos
    @monolecte
    @jeanmarie
    4

    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

    tofulm @tofulm
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/05/2020

      #SEO #Google #webperf

      RastaPopoulos @rastapopoulos CC BY-NC
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 2/05/2020

      MER-CI !
      Je sais déjà à quel client je vais l’envoyer cet article :)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @drbouvierleduc
      tcharlss @drbouvierleduc CC BY 5/05/2020

      Il va falloir qu’ils mettent à jour une partie de leur documentation où ils affirment le contraire :p

      tcharlss @drbouvierleduc CC BY
    Écrire un commentaire
  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 2/02/2020
    1
    @monolecte
    1

    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

    Stéphane Bortzmeyer @stephane CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/02/2020

      #webperf #écologie #web #développement #intégration

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 3/02/2020

      »Use Accelerated Mobile Pages (AMP)« #LOL

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 1/02/2020
    5
    @rastapopoulos
    @jeanmarie
    @cy_altern
    @arno
    @spip
    5

    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

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 1/02/2020

      excellent !
      et c’est que pour imagemagick ou ça marche avec gd2 aussi ?

      #web #image #webperf

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 1/02/2020

      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 :

      https://pic.infini.fr/qS2sIxeT/l1LAArdV.png

      PS : une piste par ici ▻https://github.com/kosinix/grafika/blob/master/src/Grafika/Gd/Filter/Dither.php#L135

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 8/05/2020

      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

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/05/2020

      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 ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 8/05/2020
      @rastapopoulos

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

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/05/2020

      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 ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 8/05/2020

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

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/05/2020

      ok merci :)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/01/2021

      Pour référence, un article au sujet du tramage/dithering :

      ▻https://surma.dev/things/ditherpunk

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 29/08/2019
    3
    @tofulm
    @cy_altern
    @kent1
    3

    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 :

    ExpiresActive on

    ExpiresByType text/css A31557600
    ExpiresByType application/x-javascript A31557600
    ExpiresByType application/javascript A31557600
    ExpiresByType text/javascript A31557600

    ExpiresByType image/webp A31557600
    ExpiresByType image/jpeg A31557600
    ExpiresByType image/png A31557600
    ExpiresByType image/gif A31557600
    ExpiresByType image/svg+xml A31557600

    ExpiresByType application/x-shockwave-flash A31557600

    AddType application/font-woff .woff
    ExpiresByType application/font-woff A31557600
    AddType application/font-woff2 .woff2
    ExpiresByType application/font-woff2 A31557600

    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.

    ARNO* @arno ART LIBRE
    • @b_b
      b_b @b_b PUBLIC DOMAIN 30/08/2019
      @kent1

      Cadeau, un lien déjà cité ici mais toujours utile : ▻https://technique.arscenic.org/lamp-linux-apache-mysql-php/apache-le-serveur-http/optimisations/article/expire-headers

      ping @kent1

      b_b @b_b PUBLIC DOMAIN
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 30/08/2019

      #expire #cache #headers #apache #webP #woff #serveur

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 5/04/2019
    4
    @mukt
    @tofulm
    @recriweb
    @b_b
    4

    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

    RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 31/03/2019

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 22/02/2019

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 7/01/2019

    #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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 20/11/2018

    #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

    • #REACT
    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 13/07/2018

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 12/07/2018

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 29/05/2018

    #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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 15/05/2018

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 19/04/2018

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 12/04/2018

    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

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 15/03/2018

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 6/03/2018

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
0 | 25 | 50 | 75 | 100 | 125 | 150

Thèmes liés

  • #webperf
  • #clevermarks
  • #web
  • #javascript
  • company: google
  • #webpack
  • #développement
  • #google
  • #react
  • #intégration
  • company: amp
  • #publicité
  • #coût
  • company: github
  • #image
  • programminglanguage: javascript
  • technology: html
  • #amp
  • #mobile
  • #poids
  • #javascript
  • #roi
  • #ux
  • #facebook
  • #images
  • #seo
  • industryterm: web performance
  • technology: api
  • #css
  • #médias
  • #offline
  • #bonnes_pratiques
  • #rwd
  • company: facebook
  • #compression
  • #sémantique
  • city: boston
  • company: filament group inc.
  • company: twitter
  • #instant_articles