web-dev-qa-db-fra.com

Combien de temps le temps de chargement initial les utilisateurs sont-ils prêts à endurer si cela signifie un accès plus rapide plus tard?

Je crée un site Web où je publie 10 messages lorsque l'utilisateur arrive sur le site Web, puis j'en récupère +10 de plus s'ils cliquent sur le bouton pour le faire.

Je produis chaque article en deux parties - la principale et la seconde. Le principal est juste un petit message (sans informations supplémentaires, etc.) et le second est où les utilisateurs peuvent voir toutes les informations en plein écran. J'ai utilisé du JavaScript pour basculer css lorsque l'utilisateur clique sur le message principal.

Le fait est que chaque publication a une deuxième section qui est cachée et vous ne pouvez la voir que lorsque vous appuyez sur une publication particulière.

Vaut-il la peine d'attendre 1 ou 2 secondes à l'avance de l'utilisateur pendant que le contenu est téléchargé afin d'y avoir accès instantanément plus tard, ou est-il préférable de charger la page initiale dès que possible et d'avoir des filateurs à chaque clic pendant demander plus de contenu?

interfacecssusersjquery
5
StuckBetweenTrees

Je décompose la partie UX de ceci en deux choses:

  • Javascript fonctionnant dans le navigateur
  • vitesse de CSS vs vitesse de jQuery
  • chargement mobile

Le premier est facile: les gens ne désactivent pas vraiment CSS, mais ils désactivent Javascript, vous avez donc plus de chances d'avoir un site Web compatible si vous évitez Javascript et utilisez CSS.

Cependant , presque personne ne désactive Javascript - le gouvernement britannique a noté que seulement 1,1% des utilisateurs ne font pas fonctionner Javascript . C'est un montant encore plus petit si vous créez un site Web pour des utilisateurs généralement adeptes du Web.

Pour la deuxième partie, Jakob Nielson a prouvé la réponse humaine au chargement dans son recherche sur le temps de chargement . Si vous êtes AJAX s'exécute plus rapidement que 1 seconde, votre utilisateur devrait se sentir bien. Plus vite que 0,1 seconde et ils se sentiront bien (CSS).

Enfin, si vous concevez pour mobile, vous aurez besoin du moins de charges possible, en raison des connexions Internet intermittentes. Encore une fois, CSS est déjà chargé dans la page, c'est donc un avantage.

4
Jacktionman

"Tout dépend de la façon dont vous chargez votre contenu et comment vous vous retrouvez avec grâce."

Votre réponse réside probablement dans les deux, alors parlons d'abord de:

Le HTML5 HTML5

HTML5 Shiv permet l'utilisation d'éléments de sectionnement HTML5 dans Internet Explorer hérité et fournit un style HTML5 de base pour Internet Explorer 6-9, Safari 4.x (et iPhone 3.x) et Firefox 3.x.

Que font ces fichiers?

html5shiv.js

  • Cela inclut la technique de base createElement () shiv, ainsi que les monkeypatches pour document.createElement et document.createDocumentFragment pour IE6-8. Cela s'applique également style de base pour les éléments HTML5 pour IE6-9, Safari 4.x et FF 3.x.

html5shiv-printshiv.js

  • Cela inclut tout ce qui précède, ainsi qu'un mécanisme permettant aux éléments HTML5 d'être stylisés et de contenir des enfants tout en étant imprimés en IE 6-8.

À qui puis-je me fâcher maintenant?

HTML5 Shiv est maintenu par Alexander Farkas , Jonathan Neal et Paul Irish , avec de nombreuses contributions de John-David Dalton . Il est également distribué avec Modernizr , et les deux projets de code Google, html5shiv et html5shim , maintenus par Remy Sharp .

Si vous rencontrez des problèmes dans ces implémentations, vous pouvez les signaler ici! :)

Pour l'histoire complète de HTML5 Shiv et toutes les personnes impliquées dans sa création, lisez: L'histoire de HTML5 Shiv.

Plus tard, il mentionne ...

Modernizr est développé par les mêmes personnes que html5shiv Et peut inclure la dernière version dans toutes les versions personnalisées créées sur modernizr.com.


Maintenant, puisque Alexander l'a mentionné, parlons de:

Modernizr

Modernizr est une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3 dans le navigateur de l'utilisateur.

Pourquoi utiliser Modernizr?

Profiter des nouvelles technologies Web intéressantes est très amusant, jusqu'à ce que vous deviez prendre en charge les navigateurs en retard. Modernizr vous permet d'écrire facilement du JavaScript et du CSS conditionnels pour gérer chaque situation, qu'un navigateur supporte ou non une fonctionnalité. Il est parfait pour effectuer facilement une amélioration progressive.

Comment ça marche

Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; il crée ensuite un objet JavaScript avec les résultats et ajoute des classes à l'élément html pour que vous puissiez saisir votre CSS. Modernizr prend en charge des dizaines de tests et inclut éventuellement YepNope.js pour le chargement conditionnel des externes . Js et . css ressources.

Consultez la liste complète des fonctionnalités que Modernizr détecte, ou en savoir plus sur chargement conditionnel des ressources avec Modernizr .


Maintenant, encore une fois, puisque nous parlons de Modernizr et Paul Irish , parlons de:

HTML5 Boilerplate

HTML5 Boilerplate est un modèle frontal professionnel pour la création d'applications ou de sites Web rapides, robustes et adaptables.

Ce projet est le produit de nombreuses années de développement itératif et de connaissances communautaires combinées. Il n'impose pas de philosophie ou de cadre de développement spécifique, vous êtes donc libre de concevoir votre code comme vous le souhaitez.

Caractéristiques

  • Prêt pour HTML5. Utilisez les nouveaux éléments en toute confiance.
  • Compatible multi-navigateurs (Chrome, Firefox, IE8 +, Opera, Safari).
  • Conçu avec une amélioration progressive à l'esprit.
  • Inclut Normalize.css pour les normalisations CSS et les corrections de bugs courants.
  • Le dernier jQuery via CDN, avec un repli local.
  • La dernière version Modernizr pour la détection des fonctionnalités.
  • Requêtes média CSS d'espace réservé.
  • Assistants CSS utiles.
  • CSS d'impression par défaut, performances optimisées.
  • Protection contre toute instruction console parasite provoquant des erreurs JavaScript dans les anciens navigateurs.
  • Un extrait optimisé de Google Analytics.
  • Mise en cache du serveur Apache, compression et autres paramètres de configuration par défaut pour les performances de niveau A.
  • "Suppression de la clé conviviale." Facile à retirer les pièces dont vous n'avez pas besoin.
  • Documentation en ligne complète et accompagnante.

HTML5 Boilerplate v4 fournit un support de navigateur hérité (IE 6+, Firefox 3.6+, Safari 4+), mais n'est plus développé activement.

Documentation

Jetez un œil à la table des matières de la documentation . Cette documentation est fournie avec le projet, ce qui la rend facilement accessible pour une lecture hors ligne et fournit un point de départ utile pour toute documentation que vous souhaitez écrire sur votre projet.


Et comme HTML5 Boilerplate n'est plus développé activement, je vais simplement:

Initialzr

Initializr est un générateur de modèles HTML5 pour vous aider à démarrer avec un nouveau projet basé sur HTML5 Boilerplate. Il génère pour vous un modèle propre et personnalisable avec exactement ce dont vous avez besoin pour commencer!

Initialzr Steps


En supposant que vous êtes toujours avec moi et lisez tout ce qui précède, c'est:

Heure des questions et réponses

Q. Quelle est la meilleure pratique en ce qui concerne l'emplacement de vos scripts sur votre page?

Passez la souris sur le bloc de devis ci-dessous pour voir la réponse:

A. En bas de votre page, à droite avant la balise fermante .

Q. Pourquoi demandez-vous?

Passez la souris sur le bloc de devis ci-dessous pour voir la réponse:

A. Eh bien, clair et simple, afin que vos utilisateurs ne regardent pas un écran vide pendant que vos scripts n'ont pas terminé le téléchargement et/ou encore courir en raison d'un ou plusieurs d'entre eux suspendus.

Souvenez-vous, JavaScript est synchrone.

Cela permet à votre utilisateur de regarder le rendu du contenu, et pendant que votre utilisateur regarde le rendu du contenu, vos scripts sont téléchargés, un ou plusieurs à la fois selon le navigateur, de sorte que par le une fois que votre contenu a fini de s'afficher et que votre utilisateur veut interagir, vos scripts ont été téléchargés et exécutés de sorte que la page soit prête à interagir avec.

Cette meilleure pratique nous a été enseignée par Paul Irish et l'équipe de HTML5 ★ BOILERPLATE et pour autant que je sache, ils ont été les premiers à créer un modèle, un bootstrap ou passe-partout, comme vous l'appelez de nos jours.


Résumé

  1. Utilisez Modernizr:

    • Il est développé par les mêmes personnes que HTML5 Shiv.

    • Il utilise la détection des fonctionnalités et fournit une solution de rechange gracieuse aux navigateurs qui échouent aux tests tandis que les navigateurs qui passent réussissent à ressentir la plénitude de votre imagination.

  2. Placez vos scripts (autres que Modernizr) en BAS de votre page :

    • Permet à l'utilisateur de voir le rendu du contenu pendant le chargement des scripts en arrière-plan.

  3. Je n'ai pas eu l'occasion d'en parler, mais pour l'avenir :

2
Code Maverick