En JavaScript basé sur navigateur, les interfaces sont prévisibles. "Single-threaded", avec un script de rendu transactionnel: écran vide - chargement - interface. Le développeur Artyom Belov de Cxense, se concentrant sur la loi de Pareto, a expliqué comment, ayant passé 20% du temps, rendant l'application 80% plus rapide grâce aux techniques de "design réactif" - pas encore formulées, mais déjà utilisées dans des produits privilégiant l'UX.
Mais quant aux mecs les plus aguerris qui ne sortent pas de Webpack et font souffrir Webpack, et non l'inverse? Ils branchent des plugins. Mais comme nous sommes au début du développement de cette technique, l'écosystème nous propose un plug-in qui prend votre HTML, génère du HTML avec CSS intégré basé sur celui-ci, fournit un QR code pour la publicité ... Sérieusement? Après cela, vous pouvez prendre et à travers "! Important" interrompre les styles ... Peut-être que cela vaut la peine de poser une question, pourquoi suis-je toujours dans le front-end.
- Bonjour à tous, je suis Artyom Belov. De nos jours, le mot réactif peut être mal compris: il y a un grand pourcentage de personnes qui ont appris React avant d'apprendre JavaScript. Par conséquent, prononcer de tels mots racine est un peu ambigu. Mais pour moi, c'est encore la physique, la loi de conservation de l'élan.
Commençons par le problème. C'est notre perfectionnisme professionnel. Après tout, nous ne montrons pas l'interface avant qu'elle ne soit pas "parfaite" - à notre avis. Et je ne sais pas ce qui va gagner dans la nomination pour le contenu informatif: un écran de navigateur blanc ou un spinner avec l'inscription "N'hésitez pas à attendre éternellement"; ce n'est pas clair pour moi.
Mais une chose est sûre: le rendu, comme la réponse d'une application, n'est pas une transaction. L'affichage d'une interface n'est pas une unité logique, vous devez donc la battre par lots.
Et à l'avant, en général, nous nous aidons, nous mentons.
Fondamentalement, lorsque nous parlons du «temps de chargement» de notre application, nous ne disons pas complètement l'expression - «temps de chargement moyen». Bien que vous n'ayez pas besoin d'avoir sept travées dans le front pour rendre le téléchargement de la deuxième application instantané, utilisez Service Worker.
Et il est triste que Lighthouse encourage le fait que la demande ne puisse montrer aucun signe de vie et seulement dans les deux ou trois dernières images de l'audit dire: "En fait, je me suis préparé à dessiner"
Et obtenir moins de 100 points dans le test d'application pour les performances n'est pas le plus difficile. Google l'a remarqué, merci.
Et un concept aussi complet que «Time to Interactive» a été décomposé en étapes, à savoir: «First Interactive», «Time to Consistently Interactive» et «First Input Delay». Si avec les deux premiers termes utilisant Google Translate, vous pouvez comprendre comment interagir et s'améliorer, alors ce dernier peut être expliqué en regardant le fil principal du navigateur.
Un exemple. Si, immédiatement après le chargement de l'interface, l'utilisateur clique sur le champ de texte, une pause peut se produire avant que le champ de texte affiche un curseur avec la possibilité d'entrer. C'est parce que le thread principal était occupé, et l'interface au moment du clic semblait prête pour l'interaction.
Tout se résume au fait que les métriques dans Lighthouse ont presque le même temps d'exécution - alors qu'elles doivent être équilibrées.
"La première peinture significative" doit être aussi rapide que possible, "La première peinture satisfaisante" doit être derrière elle, et "Time to Consistently Interactive" ne doit pas avoir un tel delta de l'écran blanc du navigateur jusqu'à ce que l'interface soit complètement prête.
Bien sûr, il y a des experts qui diront que cela se fait simplement:
«Nous devons diviser l'application en itinéraires dans Webpack et effectuer un rendu côté serveur. Oui, il y a du travail pendant une demi-heure! "
Mais ce n'est pas tout à fait vrai ... Cher expert, ne mentionne pas que chaque nouvelle route fait la même chose - le chargement. Et encore une fois, toutes les métriques de Lighthous ont un petit delta entre elles, car l'itinéraire est généralement important.
Et parfois, vous ne travaillez pas dans une grande entreprise prospère, et le rendu côté serveur n’est pas là. Et, profitant de votre position officielle, vous démarrez la R&D avec un objectif clair: obtenir un rendu progressif. Comme un JPEG progressif, qui est dans le paragraphe 167 de "Covodry" de Lebedev.
En principe, le plan de R&D semble très simple ... Vous devez en quelque sorte réaliser un profit. Et n'oubliez pas l'essentiel - l'heure et les dates qui aiment brûler. Et, en tenant le manifeste d'un programmeur minimaliste entre vos mains, vous devez vous rappeler: passez 20% du temps sur 80% du résultat.
J'ai des outils. Par exemple, lag-radar.
Certes, je ne suis pas entré dans Santa Barbara, qui a volé l'idée, Dan Abramov à quelqu'un ou vice versa ... Lors de la dernière présentation de JSConf Iceland 2018, un concept assez intéressant a été montré: le radar est vert jusqu'à ce qu'il détecte un retard dans la bande de roulement principale, et lorsqu'ils sont sensibles, le radar devient jaune et lorsqu'il est critique, il devient rouge.
Et en appuyant sur Cmd + Shift + P sur un Mac - ou Ctrl + Shift + P sur un Windows - j'ai regardé le pourcentage de couverture du code. Et puis il a regardé le paquet.
Et encore une fois pour couvrir, et encore pour regrouper. Et il a simplement décidé d'accepter la situation. Je n'ai rien à retirer d'ici. En effet, dans les projets, beaucoup utilisent des outils qui sont de facto des standards. Par exemple, Ivan Akulov, avec Google Chrome Labs, a créé il y a longtemps un référentiel pour l'optimisation du webpack, webpack-libs-optimisations. Et pourquoi devrais-je répéter cela, parler de Code Split, de Lazy Load? C'est ce qui est des standards connus et progressifs en 2018.
Et répondant à la question "Que peut-on télécharger en une demi-seconde?" - JS et voici le gagnant. Par exemple, vous pouvez télécharger 100 kilo-octets de JPG et consacrer 0,04 à son traitement, mais JS le fait, car cela prend beaucoup plus de temps pour le traiter, 20 fois.
Parce que vous devez vous rappeler ce qui se passe au démarrage de l'application.
Après le téléchargement, la chose que vous souhaitez recomposer commence: téléchargez à un moment donné, et analysez, compilez et exécutez du code à un autre moment.
J'ai regardé ce que la balise <script /> nous offre. Il existe de nombreuses options et j'ai pensé à utiliser un indice.
Hmm, il n'y a pas de télécommande dans la chambre, pas de téléphone. Je prends 50:50. Nous avons encore les options "différer" et type = "module".
Ils se chargent sans bloquer l'analyse, mais se traitent et s'exécutent plus tard, lorsque l'application est la plus prête pour cela - libérant le thread principal.
Mais il n'y a pas de bonne option, et les paroles du grand homme Ben Schwartz sont rappelées. Non pas qu'il l'ait dit en russe, mais:
Pour l'éviter, j'ai besoin de JS, donc la demande initiale est la seule méthode pour me débarrasser des demandes inutiles.
Eh bien, vous devez configurer à nouveau Webpack. Ce n'est pas toujours la connexion des plugins.
En regardant l'ensemble dans le contexte, je ne comprends pas vraiment comment je répète tel ou tel fragment de code entre les fichiers.
Probablement, ils doivent être retirés dans la demande critique?
En utilisant ConcatenationPlugin (), nous effaçons le manifeste Webpack, c'est-à-dire une liste de tous les fichiers des modules Webpack, puis incorporons ce JSON, éliminant ainsi cette demande inutile. Déterminez ensuite s'il existe du code asynchrone qui peut être incorporé. Et enfin, intégrez les cerveaux de Webpack directement dans la page afin de ne pas attendre que tous les modules se chargent. Oui, prenez le morceau d'exécution et intégrez-le en HTML.
En général, l'intégration des cerveaux Webpack ne donne pas l'augmentation la plus enchanteresse, mais parlons maintenant de CSS critique.
Mais ... nous avons réalisé que Critical CSS est destiné aux gars qui n'ont pas d'application de page unique. Après tout, sans un itinéraire HTML complet, les outils ne pourront pas créer de CSS critique.
Et c'est bien qu'il y ait un Marionnettiste qui pourrait.
Après tout, ce qui lui a été présenté - le dossier «puppeteer-examples» sur GitHub a été saisi dans les projets. Et c'est ainsi que le projet Rendertron a vu le jour. Certes, afin d'obtenir au moins une sorte d'erreur de sa part, vous devez insérer l'adresse, appuyez sur Entrée ... et c'est tout.
Heureusement, il existe d'autres packages npm qui fonctionnent. Ils sont apparemment sur le marché depuis plus longtemps.
Après avoir installé et construit le package, avec la boucle habituelle, je peux restituer le HTML de mon application sur le serveur local, et ainsi obtenir le HTML critique, si nécessaire pour créer un CSS critique.
Le bootstrap HTML, au lieu d'attendre un rendu, a donné une augmentation, comme prévu, mais il est trop tôt pour s'y attarder. Continuons le chemin vers CSS critique.
Merci encore à Eddie Osmani d'avoir pris soin de l'écosystème et d'avoir créé HtmlCriticalWebpackPlugin (), où pour la configuration, vous devez répondre à quelques questions: où enregistrer le CSS critique et sous quelle forme?
Oh, vous pouvez voir la ligne suspecte «painthouse». C'est un moment très intéressant où Eddie Osmani utilise un package tiers qui a, il s'avère, même une interface Web.
Mais pour être honnête, j'ai honte d'utiliser l'interface Web, c'est apparemment pour les concepteurs de mise en page qui n'ont pas de ligne de commande. Mais tout est simple, comme dans l'annonce Yuppy des années 90: il suffit de cliquer sur «Créer».
Et cela ne donne pas la croissance la plus enchanteresse, mais très sensible pour la première coloration de l'application.
Avec une trace du monde, et l'application tourne légèrement lorsque les polices commencent à danser. Cette ligne est connue sous le nom de 3 secondes. Et la section commence dans laquelle nous, le front-end, perdons rarement, à savoir le jeu avec les polices.
Recettes pour télécharger des polices. Ici, l'affichage des polices nous aidera. Après avoir compris qu'ici, vous n'avez pas besoin de bouger tout de suite, nous décidons d'abord: un flash de texte invisible, FOIT, ou un flash de texte sans style, FOUT, nous fait peur.
Et - le spoiler - le plus terrible pour nous est le flash de texte invisible, car il provoque un plus grand nombre de redessins.
Si en bref, en regardant quelles propriétés d'affichage de police existent, il est juste de choisir le swap ou le repli pour vous-même. Dans l'ensemble, parmi les cinq propriétés, vous pouvez choisir la bonne pour vous-même, il n'y a pas de bonne option.
De plus, j'ai entendu dire qu'il existe un projet Font Style Matcher qui me permettra de sélectionner une police système de secours décente pour ma police Comic Sans et de ne pas la charger avec Google Fonts. Bien que ce ne soit pas tout à fait vrai ...
Il y a des gens comme Zach Zezerman qui ont inventé le concept FOFT.
Ce qui n'est pratiquement pas visible dans le navigateur.
Cela est dû au fait que lorsque vous téléchargez une police romaine de style standard et que le navigateur est déjà si intelligent qu'il peut créer une police "fausse" en gras, en italique, soulignée et barrée en fonction du style standard. Cela donne un flash, mais presque aucun. Pour ce faire, implémentez la police dite de préchargement.
Mais que se passe-t-il si je dis que la police peut être intégrée dans CSS? Et c'est vrai, et ça donne aussi un gain!
Cela ressemble à une combinaison de techniques. Vous avez juste besoin d'incorporer la police romaine directement dans CSS. Ainsi, pour gagner de la croissance à la première connaissance principale de l'utilisateur avec l'application, puis charger les casques restants si nécessaire, mais pas immédiatement.
Et donc, après tant de manipulations, «Time to Consistently Interactive» a encore un delta important par rapport aux autres indicateurs. J'ai seulement amélioré la coloration de l'application. Ce n'est pas mal, mais pas ce que je recherchais. À mon avis, je dois attraper une sorte de problème. Et elle a été attrapée, et par la queue. Après tout:
Il est assez évident pourquoi cela n'est pas implémenté dans de nombreux navigateurs. Un saut de parchemin, et comment déterminer ce dont vous avez besoin et ce que vous n'avez pas besoin de charger, n'est pas le plus simple. Peut-être que cela donnera un tour.
Mais encore une fois, les experts vous le diront - il y a une charge paresseuse.
Mais rappelez-vous comment vous interagissez avec lui. Vous ne pouvez pas couvrir 100% des cas.
Oui, et si vous suivez le chemin de l'optimisation et terminez tous les points de contrôle dans le livre d'Eddie Osmani «Essential Image Optimization», vous restez également avec des problèmes non résolus ...
Mais j'ai vu qu'Eddie Osmani aime mentionner Reddit dans ses almanachs et ses articles sur le Medium. Je me souvenais qu'un ami travaillait pour moi là-bas et l'appelant pour des conseils, il m'a rappelé qu'il y avait une chose telle que la performance Percieved, et cette définition était dans les couloirs de mon esprit.
Ici, d'ailleurs, les designers nous aident. C'est quand ce n'est pas le moment de jouer, mais la façon dont vous présentez votre application. Et la très bonne tactique pour cela est «les espaces réservés de contenu».
Par exemple, YouTube peut le faire.
YouTube parvient à lire la vidéo avant que tous les composants de support aient été téléchargés. Cela se fait, en regardant vers l'avenir, en raison des espaces réservés au contenu, tels que les dés animés gris.
Et que nous offre l'écosystème en ce moment? Rien de spécial. CodePen Voyons leurs implémentations.
C'est tout à fait une carte qui se déroule dans n'importe quel modèle de conception. Voyons voir ...
Nous devons déclarer quelques variables sur 30 lignes, déclarer un gramme de propriété sur 50 lignes, quelques animations et nous obtenons 100 lignes de code ... C'est 10 sur 10 sur l'échelle Lea Viru.
Mais quant aux mecs les plus aguerris qui ne sortent pas de Webpack et font souffrir Webpack, et non l'inverse? Ils branchent des plugins. Mais comme nous sommes au début du développement de cette technique, l'écosystème nous propose un plug-in qui prend votre HTML, génère du HTML avec CSS intégré sur la base, donne un QR code pour la publicité, apparemment ... Sérieusement? Après cela, vous pouvez prendre et à travers "! Important" interrompre les styles ... Peut-être que cela vaut la peine de poser une question, pourquoi suis-je toujours dans le frontend.
Mais il y a une équipe de personnes pour qui les blagues sur leur produit ne sont tout simplement pas drôles. PostCSS.
Vous pouvez toujours compter sur eux. En particulier, vous pouvez implémenter cette technique - «espaces réservés contants» - sur le concept CSS «multi background». C'est quand une seule propriété «d'arrière-plan» peut contenir plusieurs valeurs dans une virgule.
CanIUse juste des réponses, oui.
Cela ressemble à ce qui suit, qui nous est familier. Familier - grâce à Medium.
Un dégradé linéaire est appliqué à votre image, qui s'affiche le plus rapidement possible, et une image en taille réelle apparaîtra au-dessus, plus tard. Dans le code, cela ressemble à ceci.
La première demande de priorité commence à charger l'image, bien sûr, lourde. Et instantanément, lorsque vous obtenez CSS, un dégradé linéaire apparaît. Mais le dégradé linéaire n'est pas aussi droit et lisse que l'assouplissement.
Par conséquent, le code devrait être récupéré par un autre plugin, ce qui rendra le dégradé linéaire plus fluide.
Mais avec un peu de dégradé vous allez faire des superpositions pour qu'elles couvrent tous les cas.
Dans ce cas, cela ne fonctionnera pas correctement, car l'image est trop complexe pour créer une abstraction avec juste un dégradé linéaire. Mais ici, sqip fonctionnera.
Il s'agit d'un module CLI pour créer un espace réservé pour votre image et l'attacher en utilisant la technique des arrière-plans multiples.
Bien sûr, l'image en taille réelle se chargera beaucoup plus longtemps et l'espace réservé de sqip en raison de son poids sera affiché beaucoup plus rapidement.
Mais ce n'est pas tout à fait ce que je cherche. J'aimerais que des images lourdes viennent quand j'en ai besoin, et non quand le navigateur le veut. Et je dois diviser cela en deux fichiers CSS, en mettre un dans le <head>, où seront les images claires, puis charger les images lourdes dans le <body>.
Mais qu'en est-il des images restantes, par exemple, dans JS?
La manipulation avec SVG, en particulier, semble décevante. Vous semblez vouloir redessiner le SVG, mais grâce à un CSS familier, il n'est pas sous votre contrôle.
Apparemment, selon les nouvelles tendances, le SVG devra devenir un composant.
Avec l'aide du package qui a été adopté par Dan Abramov dans "create-react-app" - c'est "svgr".
Il s'agit d'un outil CLI qui insère simplement SVG dans votre JS, et vous pouvez travailler avec lui en tant que composant. Ce sont en fait trois lignes de code.
Mais les concepteurs ne sont apparemment pas conscients que de nombreux frameworks devraient avoir un élément racine du composant. Je ne lui demanderai pas "d'exporter" SVG depuis Sketch d'une "manière spéciale"?
En raison d'un certain nombre de problèmes mineurs, il faut faire attention aux projets étrangement populaires.
Par exemple, certains «react-icon-base» qui s'offrent en remplacement de la balise <SVG>. À savoir, le package, pour ainsi dire, nous dit: au lieu de la balise <SVG>, enveloppez votre code SVG en moi, après quoi j'appliquerai les propriétés: fill, text, stroke et que ce soit, moi-même, parce que j'ai la logique qui sert " bridge "de CSS.
Et à l'aide d'une simple commande, vous pouvez créer votre modèle svgr pour votre projet.
Pour être honnête, je ne sais pas pourquoi ce projet est uniquement pour React.
Ensuite, vous pouvez importer les icônes qui ne sont pas envahies par du sucre syntaxique, quelle que soit votre convenance.
Et enfin, éloignez-vous de la balise obsolète, peut-être <img>, vers l'approche de composant dont tout le monde parle.
Et en faveur de quoi? Par exemple, pour que vous essayiez la pseudo-classe «: export» dans vos fichiers SCSS \ SASS.
Je suis très probablement certain que cela fonctionne également dans le Webpack de votre version. La pseudo-classe «: export» décharge les variables que vous déclarez dans SCSS. Ensuite, vous pouvez les importer en code JS. Et c'est tout, et vous n'avez pas besoin de faire pousser des vélos, comme une sorte de fichier JSON avec toutes les couleurs et tout.
Svgr vous permet de réduire la première coloration de l'application. Mais pas si honnête, car le code a simplement migré de CSS vers JS.
Mais deuxièmement, nous avons oublié sqip, quelle sera la croissance après son application?
Ayant de simples compétences en importation dynamique, nous appliquons la technique suivante. Nous chargeons la version allégée de l'image, espace réservé sqip, et l'afficheons dans l'interface. Ensuite, dans l'importation dynamique, dans .then (), nous attendrons l'icône en taille réelle sans bloquer l'interaction avec l'interface.
Cela conduit au fait que nous obtenons le sujet pour nous SVG, que nous pouvons remplacer avec des arguments, comme un vrai composant JS.
Et enfin, cela donne une augmentation des métriques nécessaires du "interactif". Et vous répondez ainsi à la principale question qui se pose dans les articles d'Eddie Osmani: "Est-ce qu'il se passe quelque chose en général?" Vous y répondez bien plus tôt: "Oui, cela se produit."
Mais j'ai l'impression que je n'ai que des icônes dans l'application. Il existe également des champs de formulaire, par exemple.
Voici une solution que vous pouvez google dès maintenant. Par exemple, «react-content-placeholder» et «vue-content-placeholder». Mais arrêtez-vous, ici nous vous proposons de dessiner manuellement les espaces réservés SVG des composants.
Il existe également une version Web où vous pouvez faire glisser et créer des espaces réservés par glisser-déposer. Ce sera exactement comme vos vrais composants.
Mais s’il s’agit de charger cinq fois des composants de style - non! - et le système stylisé que j'utilise.
Et faites-en une règle que vous devez respecter strictement le système de conception. Et non les icônes et les images doivent être correctement exportées, mais un système de conception doit réglementer ce processus. La largeur du champ de texte ne doit pas être codée en dur, mais le système de conception, en haut, doit régler cela.
Et le plus difficile, enfin, est de coller un opérateur ternaire qui affiche notre espace réservé le plus simple, qui permettra à l'utilisateur de savoir qu'il est finalement arrivé à l'adresse, puis de télécharger le composant complet uniquement lorsque nous en avons besoin.
En général, il devrait y avoir une démo, mais je ne suis pas venu ici pour un rapport publicitaire. Mais les autres gars que vous connaissez tous sont dignes de respect.
Et si j'étais aux Oscars, je prendrais une enveloppe et dirais quelque chose comme: «Pour l'incroyable ingéniosité dans la mise en œuvre de l'espace réservé au contenu, à savoir dans la mise en œuvre de l'animation en utilisant un gif 10x10 pixels, au lieu d'écrire des styles CSS, le titre est décerné "experts en animation, avec les salutations du passé, Instagram!"
J'espère qu'ils ne mettent pas en retrait les GIF transparents à un pixel, et que la propriété border n'est pas un double tableau.
Et je voudrais vous rappeler: comptez sur une véritable surveillance des utilisateurs, RUM.
Pour les vrais utilisateurs de vos projets et des métriques pertinentes. , , , first input delay.
, , common-, .
, , .
, , JPG , .
, . , .
Et le dernier. , , , , , - loadable-. ́, , . , — , . — , . , , , Webpack. , … great loading component? , - ? ?
, , , , . .
