Comment Google Web Starter Kit sert-il une image adaptative pour mobile?
Mon site Web étrangement (dans le bon sens) sert des images plus petites lorsqu’elles sont visionnées sur mobile. Je voulais savoir quelle cause cela? Pour autant que je sache, ce n'est pas le comportement par défaut, je pense donc que ce doit être la tâche de Google Web Starter Kit. Voici les informations de débogage lors du débogage sur le périphérique. Toutes les images ont atteint la taille 231 B, quelle que soit leur taille. (Le débogage sur le bureau varie en fonction de la taille.)
J'ai essayé d'utiliser Google Web Starter Kit ( https://github.com/google/web-starter-kit ) récemment. Les outils qu’il contient sont composés de Ruby, Node.js, SASS et Gulp pour vous aider à "construire" un site Web. Avant la construction, vous pouvez bénéficier d’un rechargement automatique car le script Gulp surveillera tous les fichiers pour vous. Lors de la construction, il utilisera divers outils pour réduire au minimum HTML, CSS et compresser les images.
Selon cette page https://developers.google.com/web/fundamentals/tools/build/build_site , le gulp-imagemin a été utilisé. Donc, je suppose que imagemin fait l’optimisation mobile pour moi? Quel type de compression peut servir une image redimensionnée automatiquement sur le mobile? Et pourquoi est la taille 231 B? Est-ce lié à la taille de mon écran?
Compression du site Web
Le passe-partout que vous utilisez utilise nginx et ngx_http_gzip_module qui compressera les composants du site Web. Il est assez courant de trouver la plupart des sites Web utilisant la compression gzip.
Caching
Votre site met actuellement en cache ce qui signifie qu'il utilisera un statut de 4 non modifié associé à une date d'expiration. Votre site Web utilise actuellement des données d'expiration de 1 an, ce qui correspond à exactement 31536000 secondes , je préfère personnellement que 2 semaines (1209600 secondes) expire, mais cela dépend de la fréquence à laquelle vous changez de site Web et vous pouvez réellement définir différents délais d'expiration pour différentes extensions de fichier.
Cache-Control max-age=31536000
Connection keep-alive
Date Fri, 22 Aug 2014 07:50:28 GMT
Expires Sat, 22 Aug 2015 07:50:28 GMT
231B fermez la porte!
La raison pour laquelle vous voyez des requêtes ne dépassant pas 231 octets est que ces fichiers ont été mis en cache et stockés dans les fichiers temporaires de votre navigateur. Évidemment, tout le monde ne mettra pas ces fichiers en cache, il est donc important de voir comment first view réagit, cela peut être fait simplement en maintenant CTRL et en appuyant F5 tout en maintenant CTRL. Utiliser les touches ctrl et f5 indiquera à votre navigateur de vider le cache. Cela fonctionne dans la plupart des navigateurs modernes. En fait, je n’en ai pas encore trouvé un qui ne le fasse pas.
Test de fiabilité
Personnellement, je me soucie de ce que les utilisateurs réels expérimenteront plutôt que de ce que je vis. Vous pouvez émuler les visiteurs réels en utilisant WebPageTest , voici que j'avais déjà exécuté auparavant , je vous recommande de le tester à partir de plusieurs emplacements, tous à la même temps.
Gulp-imagemin
Ne semble pas que vous ayez Gulp Imagemin correctement configuré depuis que je affiche la même image de résolution sur la page d'accueil pour toutes les largeurs de navigateur. Vous devriez consulter à nouveau la documentation. En gros, le nom du fichier image et la résolution doivent changer lorsque le point de vue est déclenché.