La vitesse est la facilité d'utilisation.

Pour le dire plus précisément, la vitesse du site Web est un élément majeur de la convivialité. L'interface la plus intuitive jamais créée par l'esprit de l'homme ne vous sera d'aucune utilité si l'utilisateur est expulsé au moment du chargement.

C'est tout. L'article est terminé ... Ok, il y a beaucoup plus à faire, mais cette première phrase représente environ la moitié de ce que vous devez savoir. Nous devons rendre nos sites Web rapides.

Je pourrais utiliser beaucoup d'expressions superlatives telles que "rapide" ou "extrêmement rapide", ou même "plus rapide qu'une balle rapide", mais elles seraient inadéquates. Il est plus simple de dire qu'il n'y a pas de "trop ​​vite".

Alors, qu'est-ce qu'on entend par "rapide"?

Nous devons prendre une minute pour parler de la vitesse à laquelle je me réfère. En bref, toute la vitesse. Plus précisément, trois types de vitesse:

1) temps de chargement

Ce serait le temps nécessaire pour que toutes les informations soient téléchargées sur les appareils de vos utilisateurs. Cela dépend principalement de la vitesse de la connexion Internet et de la taille réelle des fichiers.

Vous ne pouvez pas faire grand chose sur la connexion, mais vous pouvez faire beaucoup sur la taille du fichier.

2) temps de traitement

Une fois vos fichiers téléchargés, ils doivent être traités et rendus par le navigateur. Tout ce traitement et ce rendu dépendent de la qualité de votre code et de tout ce qui se passe sur le téléphone, la tablette ou l'ordinateur portable / bureau de l'utilisateur.

La seule chose que vous pouvez contrôler est votre propre code, mais cela fait une grande différence.

3) Vitesse perçue du site Web ou performance perçue

Et puis il y a le facteur psychologique. Les sites Web rapides peuvent paraître et se sentir comme s'ils marchaient lentement. Les applications lentes peuvent être un peu plus rapides avec l’application judiciaire de certaines astuces.

Cette partie concerne tout ce qui concerne l’étude de votre utilisateur et sa capacité à savoir ce qui se passe lorsqu’il interagit avec votre site Web ou votre application.

Vous devez faire attention aux trois aspects de la vitesse du site Web pour que votre site ait l’impression de progresser rapidement. Et plus le site est grand, plus il y a à optimiser.

Commençons, alors.

Accélérez votre CSS

Plusieurs fois, en particulier sur les petits projets expérimentaux que j'aime tant, je passe plus de temps sur le CSS que n'importe quelle autre partie du code. Souvent, il y a aussi plus de CSS écrit que HTML ou JavaScript. Donc, juste là, un indicateur de combien votre CSS peut affecter la taille du fichier.

Ensuite, bien sûr, il y a la question de la vitesse d'exécution de votre site Web sur le bureau, l'ordinateur portable, la tablette ou le téléphone de votre utilisateur. Une grande partie du "travail" ou du rendu d'une page Web est effectuée par le logiciel, avec un peu d'aide de votre GPU.

Il pourrait se charger rapidement, mais faites défiler lentement. La manière dont votre CSS est écrit a un effet direct sur la rapidité avec laquelle un périphérique particulier peut afficher la page Web une fois les fichiers téléchargés.

Lorsque vous optimisez un site Web pour qu'il fonctionne plus rapidement, le CSS est généralement un bon point de départ.

Code non utilisé

Le CSS qui se trouve dans votre feuille de style et ne fait rien rend vos fichiers inutilement plus volumineux. Ok, alors celui-ci peut sembler être une évidence; mais cela arrive toujours au meilleur de nous.

Vous supprimez du contenu et oubliez de supprimer l'ancien CSS. Vous modifiez la classe ou l'ID d'un élément de conteneur et oubliez de supprimer l'ancien CSS. Vous écrivez des CSS, réalisez qu'il y a une meilleure façon, et oubliez ... vous l'avez.

Lancez plusieurs développeurs front-end dans le mix, et vous avez une recette pour une feuille de style, ou une collection d'entre elles, difficile à manier, si vous ne faites pas attention. Le code non utilisé ralentit le chargement de la page en raison de son existence même en tant que données. Cela ralentit le développement car cela peut induire les gens en train de lire la feuille de style.

Cela peut également signifier des temps de rendu plus lents, car il n'y a que plus de CSS pour que le navigateur puisse les voir pendant qu'il fait correspondre tous les CSS aux éléments HTML appropriés.

Que vous examiniez et supprimiez manuellement tous les anciens CSS, que vous utilisiez des outils automatisés pour vous aider à trouver les sélecteurs CSS inutilisés, ou que vous supprimiez des éléments au hasard jusqu'à ce que quelque chose ne fonctionne plus.

Sélecteurs CSS

En parlant de la manière dont le navigateur correspond au code CSS avec le code HTML approprié, il est temps d’examiner les sélecteurs CSS. Beaucoup de choses ont été écrites sur les sélecteurs les plus rapides, ceux qui sont lents, si vous devez vous soucier des plus lents, etc.

Le problème est que beaucoup de ces informations sont anciennes. En l'an 2000, Dave Hyatt (un développeur travaillant sur Safari et membre actif du groupe de travail CSS du W3C) a écrit ceci:

La triste vérité à propos des sélecteurs CSS3 est qu’ils ne doivent pas être utilisés du tout si vous vous souciez des performances de la page.

Si vous allez regarder le document Cette citation vient de, vous verrez qu’il parlait de sélecteurs comme : le premier enfant et d’autres pseudo-sélecteurs. Et il avait raison.

Il l'est toujours; mais au cours des quinze dernières années, les ordinateurs ont progressé un peu. De nos jours, les efforts supplémentaires de l’ordinateur pour rendre ce CSS ne devraient pas être remarqués par quiconque, sauf ceux utilisant le moins cher d’appareils mobiles bon marché.

C'est une préoccupation en soi, alors en réalité, cela dépendra du projet en cours, de votre profil démographique cible, etc. Autrement dit, utilisez votre meilleur jugement, et peut-être ne dépassez pas les pseudo-sélecteurs.

Sinon, à moins que vos pages n'atteignent la longueur d'un livre, les sélecteurs que vous utilisez devraient avoir très peu d'effet sur les performances de votre site. Cependant, jetez un coup d'œil au document ci-dessus et familiarisez-vous avec ce qui rend le plus rapide et ce qui ne le fait pas. Vous pouvez toujours trouver l'information utile.

Vous pouvez aussi voir Cet article de CSS-Tricks pour une approche légèrement plus récente du sujet.

Propriétés lourdes en ressources

Bien sûr, il y a aussi des propriétés CSS qui prennent plus de temps à rendre que d'autres. Les propriétés classiques telles que la largeur, la hauteur et la couleur sont toujours les plus rapides. Ceux qui ont tendance à prendre un peu plus de temps (et peuvent varier d’un navigateur à l’autre) ont tendance à être des propriétés CSS3 telles que box-shadow.

Le processus d'ajout d'une ombre portée à un élément est complexe, en ce qui concerne le rendu des pages Web. Ce qui est intéressant à noter est que, comme indiqué sur HTML5 Rocks La puissance de traitement requise peut varier considérablement en fonction des dimensions spécifiques de l'ombre portée.

Cet article indique que la même chose est vraie pour d'autres propriétés telles que border-radius et transform.

Encore une fois, cela aurait peu d'effet sur le rendu d'une page sur votre ordinateur de bureau ou portable moyen. Les appareils mobiles pourraient toutefois avoir un impact plus important et l'expérience pourrait en souffrir. Tout le monde déteste le défilement instable.

Cependant, cela doit être mis en balance avec le coût d'utilisation des images pour produire les mêmes effets. Quelqu'un se souvient-il des choses que nous avons faites pour obtenir des coins arrondis, il était une fois?

Il suffit de ne pas aller trop loin et vos styles doivent être rendus assez rapidement.

Animations CSS

Maintenant, nous entrons dans un autre territoire. Les animations CSS peuvent être extrêmement rapides ou ralentir le navigateur au point que les plates-formes de jeu ont du mal à suivre.

C'est partiellement parce que toutes les animations ne sont pas rendues de la même manière. Une partie des tâches lourdes est effectuée par le matériel, alors que d’autres types d’animation doivent être entièrement rendus par les propres fonctions du navigateur. Ceci est particulièrement coûteux sur les appareils mobiles.

Dans un autre article Sur HTML5 Rocks, les propriétés CSS les plus rapides à animer sont la position , l' échelle , la rotation et l' opacité.

Consultez l'article pour un aperçu plus complet de ce qui peut être animé tout en maintenant le "coût" bas.

Utiliser des préprocesseurs CSS

Voici où je vous propose les conseils les plus pratiques que l’auteur puisse vous donner. Utilisez des préprocesseurs CSS tels que LESS, SASS et Stylus. Bien sûr, si vous les utilisez mal, vous pouvez générer des feuilles de style plus grandes que celles que vous avez prévues; mais les avantages potentiels en valent la peine.

Par exemple, si vous souhaitez réduire le nombre de requêtes HTTP envoyées au serveur (toujours une bonne idée), incluez toutes les réinitialisations, tous les frameworks dans un seul fichier LESS / SASS. Quand il compile, tout sera dans une seule feuille de style. De plus, la plupart des préprocesseurs offrent la possibilité de générer tous les fichiers CSS sous forme réduite.

De cette façon, vous pouvez utiliser autant de fichiers différents que nécessaire pour l'organisation du code, sans affecter indûment la taille du fichier.

Accélérer votre JavaScript

JavaScript peut être très lent. Pour être plus précis, JavaScript peut avoir un effet beaucoup plus direct sur la partie "traitement" de l'équation de vitesse que le CSS. Pire encore, JS peut être exponentiellement plus lourd en termes de taille de fichier pour réaliser des choses apparemment anodines.

C'est une double lenteur de lenteur douloureuse, et nos utilisateurs sont souvent les victimes, en particulier ceux des navigateurs mobiles. Ce n'est cependant pas la faute de la langue. La folie de notre JS est souvent directement proportionnelle à notre ignorance de la programmation en général.

Je suis un non-développeur. J'ai souvent utilisé des bibliothèques comme jQuery, ou des plug-ins JS autonomes individuels pour faire avancer les choses. Plus je dois faire, plus il me faut de plugins pour que tout fonctionne. Ces plugins et frameworks offrent des options et des fonctionnalités supplémentaires que je ne pourrai jamais utiliser.

Il y a le gonflement de la bande passante, juste là.

De plus, les plug-ins peuvent ne pas bien fonctionner ensemble. Ils pourraient se ralentir l'un l'autre, ou l'un pourrait empêcher un autre de fonctionner.

Il y a la puissance de traitement gaspillée, juste là.

Si vous voulez vraiment accélérer votre site Web, supprimez les millisecondes (ou les secondes entières, dans certains cas), voici ce que vous devez faire:

JavaScript devrait presque toujours être externe

À l'instar de CSS, il est préférable de conserver JS dans les fichiers externes et de le lier à votre code HTML. Vous ne pensez peut-être pas que ce soit un gros problème si vous n'avez pas beaucoup de code JS, et il ajoute une requête HTTP, mais voici la chose: les fichiers CSS et JS externes sont mis en cache par le navigateur.

Ainsi, lorsque cette même page est à nouveau demandée ou que d'autres pages de votre site utilisant le même CSS ou JS sont demandées, ces fichiers externes mis en cache sont utilisés au lieu d'être à nouveau téléchargés. Cela accélère le chargement du site et accélère le traitement. Cela vaut de temps en temps l'appel supplémentaire au serveur.

Incluez vos fichiers JS au bas de la page

En gros, la théorie est la suivante: le navigateur rend d'abord le contenu du haut du code source d'une page. C'est pourquoi les choses comme l'étiquette vont près du sommet.

Les fichiers JavaScript, cependant, peuvent tout ralentir en empêchant le navigateur de rendre votre code HTML jusqu'à ce qu'ils soient chargés. Étant donné que la plupart des effets et plug-ins JS les plus couramment utilisés ne doivent fonctionner que lorsque le reste de la page est à l'écran, c'est loin d'être idéal.

Améliorez l'expérience de l'utilisateur et réduisez le temps de chargement perçu en liant ces fichiers externes au bas de la page, juste avant le tag.

Au moment où un utilisateur parvient à interagir avec tout ce qui nécessite JS, il doit être prêt à fonctionner.

Évitez les frameworks et autres dépendances si vous le pouvez

Si vous concevez une application à part entière, vous pouvez et peut-être devez ignorer cette section. Une infrastructure de qualité, flexible et légère peut donner aux développeurs un avantage considérable. Pour les sites Web de taille petite à moyenne, cependant, l'inclusion d'un framework JavaScript peut être exagérée. Sur ces sites Web, JS sera principalement utilisé dans le back-end du CMS pour administrer le contenu. Sur le front-end, vous pouvez avoir un curseur d’image ou une disposition en maçonnerie ou deux. Si vous êtes vraiment chic, vous pourriez avoir une saisie automatique dans la barre de recherche.

La plupart des contenus n'ont pas besoin d'être imaginés et animés comme ceci. JavaScript devrait, autant que possible, être réservé à l'amélioration de l'expérience utilisateur. S'appuyer simplement sur un site pour créer un site peut entraîner un site lent et lent, en particulier sur les appareils mobiles.

D'une certaine manière, tous les frameworks de code sont identiques, que ce soit JavaScript, PHP, Python, HTML ou CSS: chaque fonctionnalité est un tas de code. Lorsque vous choisissez un framework ou un plug-in pour un travail, demandez-vous si vous allez utiliser toutes les fonctionnalités qu'il propose ou même la plupart d'entre elles.

Sinon, le cadre est-il modulaire? Pouvez-vous choisir et choisir uniquement les pièces dont vous avez réellement besoin? Si oui, et vous pensez que le compromis de la taille des fichiers en vaut la peine, alors allez-y! Sinon, il est préférable de voir ce que vous pouvez retirer plus que ce que vous pouvez utiliser.

Désactivez JavaScript

Pas en permanence! Pensez-y de cette façon, JS a-t-il caché du contenu ou des fonctionnalités sur votre site? Les gens peuvent-ils y accéder sans avoir JS activé dans leurs navigateurs?

Si oui, alors super. Cependant, si les gens ne peuvent pas voir les informations importantes, vous contacter ou naviguer correctement sans JavaScript, alors vous avez un problème. Bien sûr, vous pouvez compter sur la plupart des gens qui le font encore, mais vous avez toujours ces cas-là.

Comment cela se rapporte-t-il à la vitesse du site Web? Imaginez la lenteur de la navigation si une partie de votre site Web ne fonctionne tout simplement pas.

Embaucher un développeur

Non sérieusement, si vous n'êtes pas un développeur et que vous avez le budget pour un, allez-en un, même pour des petits travaux simples. À long terme, il est moins coûteux d’embaucher une personne expérimentée pour bien faire les choses, une fois.

Si les choses tournent mal (et nous parlons d’ordinateurs ici, alors quelque chose ne va pas), ils trouveront plus rapidement ce qui ne va pas. Ils auront l'expérience de trouver ce genre de problèmes et de les résoudre. Si rien d'autre, ils seront mieux à googler ces sujets particuliers.

Plus important encore, ils sauront faire ce qui doit être fait avec moins de code. Moins de code (généralement) s'exécute plus rapidement et (toujours) plus rapidement. C'est le conseil le plus simple que je puisse donner.

(Si vous êtes développeur ou que vous apprenez, j'ai compilé une liste de didacticiels qui se trouvera au bas de cet article. Certains guides pour débutants vous aideront à écrire du JavaScript rapidement.)

Images et compression

Lorsque vous sortez la vidéo de l'équation, la plus grande chose sur un site donné dépend des images. Les images ont tendance à être grandes, volumineuses et lentes comme elles ne sont pas optimisées.

Maintenant, avec la prolifération des écrans de rétine nous obligeant à utiliser des images plus grandes si nous voulons que les choses soient bien sur tous les appareils, le problème ne sera pas plus facile à résoudre. Et pire encore, c'est un problème facile à oublier jusqu'à ce que vous finissiez par dépenser plus que prévu sur la bande passante.

Lorsque chaque octet compte, nous ne pouvons pas nous permettre d’oublier.

La bonne nouvelle est que ce problème n’est pas nouveau. Pourquoi est-ce bien? Cela signifie qu'il y a des tonnes de solutions potentielles à choisir, et vous pouvez en utiliser plusieurs à la fois. En fait, c'est généralement une bonne idée.

Ainsi, jusqu’à ce que les fournisseurs d’accès et les hébergeurs commencent à nous offrir une bande passante gratuite illimitée (ne retenez pas votre souffle), voici ce que vous pouvez faire:

Faites plus avec du code que des images

En termes simples, faites-en le maximum, visuellement, avec CSS et JavaScript avant de vous tourner vers les images. Le code sera toujours moins cher à transférer que les images, donc respectez-le autant que possible. Malgré la puissance de traitement consommée par les ombres portées basées sur CSS, les dégradés, etc., tiennent compte des compromis.

Gardez également à l'esprit que les images SVG comptent, en l'occurrence, sous le nom de "code", car elles ne sont que: du code XML rendu sous la forme d'une image. Ainsi, ils devraient être utilisés chaque fois que vous avez besoin de quelque chose de vecteur.

Utiliser des images réactives

Maintenant, revenons à ces écrans de rétine, que faisons-nous à leur sujet? Comment pouvons-nous économiser sur la bande passante là-bas?

C'est là que nous nous tournons vers l'élément et la propriété set d'image . Ils sont relativement nouveaux et ne sont pas entièrement pris en charge, mais ils permettent aux navigateurs de choisir la taille d'image appropriée pour le périphérique utilisé.

Ainsi, bien que cela ne vous économise pas de bande passante pour quelqu'un qui consulte votre site sur son iMac, ce n'est pas aussi important, car il est fort probable qu'il ait accès au haut débit. Quelqu'un sur son téléphone, quant à lui, obtient une version réduite de la même image, les empêchant d’attendre trop longtemps.

Choisissez le bon format pour le travail

De nombreux problèmes de taille d'image sont résolus lorsque vous apprenez quel format d'image utiliser dans une situation donnée. Je pourrais parler des formats d'image spécifiques, du fonctionnement de la compression, etc., mais vous n'avez besoin que de quelques remarques:

  1. Pour les graphiques complexes, tels que les photos, utilisez le format JPEG.
  2. Pour des graphiques plus simples qui utilisent peu de couleurs, comme les icônes et les logos, utilisez SVG et / ou PNG.
  3. GIF est uniquement pour l'animation, et seulement lorsque vous ne seriez pas mieux servi en animant quelque chose avec CSS3 ou JavaScript. Les GIF animés fonctionnent mieux comme contenu que comme éléments d'interface.

C'est vraiment tout. Si vous faites cela et jouez avec les paramètres d’optimisation lorsque vous enregistrez les images, vous pouvez souvent obtenir une qualité plutôt correcte à des tailles de fichiers relativement petites.

Avoir hâte de

Cependant, il existe un nouveau format appelé WebP, qui est pris en charge automatiquement par Chrome et Opera. Google réclamations les fichiers WebP sont 26% plus petits que les fichiers PNG et 25-34% plus petits en fonction de plusieurs facteurs.

C'est une excellente nouvelle, sauf pour deux choses: Firefox et IE. Maintenant, si cela ne vous dérange pas d'utiliser des solutions de rechange et un script supplémentaire, vous pouvez utiliser le format WebP maintenant, aujourd'hui. Il suffit de télécharger WebPJS et tu es bon

WebPJS utilise JavaScript et un peu de Flash ( soupir… mais uniquement pour Internet Explorer) pour que cela fonctionne, mais cela fonctionne. Vous pourriez le considérer si vous avez besoin de distribuer rapidement des images plus volumineuses, l’inconvénient étant que cela ne fonctionnera pas sans le JS.

Compression

Il existe deux types de compression que vous pouvez utiliser sur vos images. Premièrement, nous avons une compression avec perte . Ceci est utilisé sur les formats avec perte tels que JPEG. Il vous permet de compresser n'importe quelle image autant que vous le souhaitez, sachant que la qualité sera de plus en plus mauvaise. Les choses vont se pixéliser et perdre leur définition.

La compression sans perte est utilisée sur des formats tels que PNG et peut réduire la taille de leurs fichiers dans une certaine mesure. Cependant, il a ses limites. Il y a toujours un moment où il est impossible de réduire la taille d'une image sans perte de qualité.

Si vous disposez de Photoshop ou d'un éditeur d'image avancé de même type, il est souvent préférable de les utiliser pour compresser vos images afin de voir à quoi ressemblera la sortie lorsque vous aurez terminé.

(Selon mon expérience, les outils automatiques, en particulier les outils en ligne, ont tendance à compresser les choses un peu trop loin. Néanmoins, je vais énumérer les meilleurs outils de compression que j'ai trouvés dans la section des liens ci-dessous.)

Mettre en œuvre la compression et le redimensionnement de l'image dans votre CMS

Si vous utilisez un CMS tel que WordPress, il redimensionne automatiquement les images trop volumineuses. Il est également facile de trouver des plugins qui les compresseront automatiquement pour vous.

Attention, je recommande uniquement la compression automatique dans les cas où vous savez que vous allez télécharger des lots, et beaucoup d’images de qualité similaire dans le même but. Un blog photo est un exemple.

Si vous gérez un site où les utilisateurs téléchargent leurs propres images, le redimensionnement et la compression automatiques sont indispensables, et c'est la raison pour laquelle tous les réseaux sociaux le font.

Conseils généraux

Voici quelques conseils qui ne correspondaient à aucune des trois catégories ci-dessus.

Tout réduire

"Réduire" votre code signifie simplement que tous les espaces supplémentaires et les sauts de ligne sont supprimés. Cela peut réduire considérablement la taille du fichier.

Cela peut sembler beaucoup de travail, mais il existe des outils pour réduire automatiquement CSS et JS, et garder les fichiers minifiés séparés pour vos fichiers sources, pour des raisons assez évidentes.

Comme mentionné précédemment, divers préprocesseurs CSS peuvent générer tout votre code sous une forme réduite en premier lieu.

Tout compresser

Si votre serveur est configuré correctement, tout votre code peut être envoyé au navigateur dans un format compressé. Les fichiers texte se compressent très bien, ce qui réduit considérablement la taille des fichiers envoyés.

Maintenant, votre serveur doit prendre un instant ou deux pour compresser les fichiers qu'il envoie, et le navigateur de l'utilisateur doit les décompresser, mais cela vaut généralement le compromis de la bande passante.

Pour une explication complète de la façon dont cela fonctionne, voir Comment optimiser votre site avec la compression GZIP .

Cachez votre site

La mise en cache du navigateur se fait automatiquement dans une certaine mesure grâce aux navigateurs modernes. Un navigateur se rend sur un site et stocke temporairement les images et les autres informations qu'il y trouve.

De cette manière, si le même utilisateur revient dans un délai donné, le navigateur n’a pas à demander à nouveau les mêmes images. Il ne fait que charger ceux qu'il possède déjà et demande toutes les nouvelles images qu'il pourrait ne pas avoir.

Il y a cependant quelque chose que vous pouvez faire pour dire aux navigateurs quoi mettre en cache et pendant combien de temps, comme on le voit dans ce guide .

Mise en cache du serveur

Et puis il y a la mise en cache du serveur. La mise en cache des serveurs ne prend que votre site et en place une sorte de "copie" entre vos utilisateurs et votre serveur actuel. Pourquoi vous déranger?

Eh bien, il est particulièrement utile pour les personnes qui utilisent des systèmes de gestion de contenu à grande échelle. Lorsque vos utilisateurs accèdent à une copie temporaire de votre site au lieu de la version réelle, le nombre d'appels à votre base de données est réduit. Les informations sont affichées et chargées plus rapidement car il n'est pas nécessaire de les traiter à chaque fois.

Selon sa configuration, la mise en cache du serveur peut également réduire les coûts de bande passante en général. Fondamentalement, plus votre site est grand, plus vous devez chercher à le mettre en cache.

Et maintenant, la section que vous attendiez tous: la liste des liens! Nous avons des tutoriels et des guides, principalement, et quelques outils de compression d'images à recommander.

informations générales

Du réseau de développeurs Yahoo

Yahoo! peut-être pas aussi important que par le passé, mais leur réseau de développeurs a beaucoup de bonnes choses. Cela inclut leur Meilleures pratiques pour accélérer votre site Web , qui couvre certaines des choses de base que vous pouvez faire. Certains couvrent le même terrain que cet article, mais il y en a d'autres.

Dans l'introduction, j'ai mentionné la vitesse perçue du site, également connue sous le nom de performance perçue. Si vous souhaitez en savoir plus à ce sujet, consultez Un guide pour débutants sur la performance perçue: 4 façons de rendre votre site mobile comme une application native .

CSS

Effeckt.css

Effeckt.css est un ensemble d'animations CSS conçues pour un rendu rapide, quelle que soit la plate-forme sur laquelle se trouve l'utilisateur.

Optimiser la diffusion CSS

Ce est un guide pour vous assurer que votre CSS est téléchargé et traité aussi rapidement que possible par le navigateur.

JavaScript

24 meilleures pratiques JavaScript pour les débutants

Quand tu viens de commencer, apprendre à coder correctement peut être un coup de pouce aussi rapide que des astuces aléatoires que vous pourriez apprendre. Un mauvais code coûte plus cher en termes de temps de traitement, alors apprenez à faire les choses correctement.

Écriture rapide, JavaScript efficace en mémoire

Voici un guide de base qui se concentre plus spécifiquement sur l'écriture de JavaScript qui s'exécute rapidement.

Astuces de performance pour JavaScript dans V8

Comme le titre le dit, ce est tout conseil ciblé spécifiquement sur JavaScript V8.

5 conseils pour des sélecteurs jQuery plus efficaces

Et parfois, vous allez probablement finir par utiliser jQuery. Si vous faites cela, vous devriez au moins savoir comment écrire des sélecteurs jQuery qui ne vous ralentiront pas. Et voici où Sitepoint vous a couvert .

Images

Guide du débutant sur les formats de fichier image

Lis ça pour plus d'informations sur les formats d'image sur le Web. L'information est un peu ancienne, mais toujours valide, et bonne à savoir.

Optimisation d'image

Ce est un guide plus technique pour l'optimisation de l'image fourni par le réseau de développeurs Google.

Compressor.io

Compressor.io est l'un des outils les plus impressionnants que j'ai personnellement rencontrés. C'est une application en ligne, vous devrez donc télécharger tous les fichiers que vous souhaitez compresser, mais cela peut faire des merveilles pour les fichiers JPG. Il offre à la fois des options de compression sans perte et sans perte, chacune avec des résultats étonnants, et peut également traiter les lots.

Trimage

Trimage se spécialise dans la compression sans perte, mais il peut être installé sur votre propre ordinateur, sous Windows, Mac ou Linux. Comme il s'installe sur votre ordinateur (et oui, il est fourni avec diverses options de ligne de commande ainsi qu’une interface graphique), il peut être exécuté automatiquement dans le cadre d’un workflow de développement.

Conclusion

Comme toujours, il reste beaucoup à apprendre. Mais grâce aux informations que nous vous avons fournies et aux ressources auxquelles nous avons accès, vous serez sur la bonne voie pour créer des sites et des applications qui ne gênent pas vos utilisateurs.

Et c'est la première étape pour les impressionner.