Préchargement des pages (cache manifest ?)

Bonjour

Je n'y connais rien en matière de préchargement de page mais on m'a parlé de cache manifest et encore une fois je ne connais pas du tout donc je ne sais pas comment cela s'utilise.

En fait, comme sur le site www.nytimes.com/chrome (donc à visualiser sous chrome) on peut voir que le site charge les différentes pages au fur et à mesure (on le voit au point qui devient gris foncé après chargement effectué).

Rien d'aussi compliqué mais je veux juste que mon site soit entièrement chargé afin que la navigation sur mobile soit plus fluide.

Quelqu'un pourrait il me renseigner ?

Merci d'avance

Lu
Modifié par Luleen (10 Aug 2011 - 15:14)

Bonjour.

Ce que le New York Times utilise ici n'a rien à voir avec le cache manifest (fichier qui sert à déclarer les éléments à stocker pour une utilisation hors-ligne), mais une technique JS appelée lazy loading, qui consiste à retarder le chargement de certaines ressources pour avoir un render initial plus rapide.

Pas mal de lib et plugin permettent d'obtenir ça, je te laisse voir ce qui te convient le mieux.

Ah d'accord je ne connaissais pas du tout.

Si tu connais une méthode de lazy loading légère en poid et en ressources je suis pas contre, j'ai vu tellement de librairies JS énormes pour pas grand chose...

Merci en tout cas ca va m'orienter pour la suite

Lu

En cherchant des informations sur le lazy loading, j'ai plutôt l'impression que c'est le contraire de ce que je recherche. C'est à dire qu'il va empêcher le navigateur de charger toutes les ressources pour un temps de chargement plus rapide et il va charger les images par exemple au fur et à mesure.

Moi c'est tout le contraire, je voudrais qu'en tâche de fond il charge les autres pages que le navigateur sera susceptible d'afficher.

Lu

En tache de fond? C'est pas exactement la même chose?

Ben de ce que j'ai lu, le lazy loading fait en sorte que les ressources ne soient chargées que si elles sont utilisées justement...

C'est plutôt une bonne chose si tu souhaite accélérer ton temps de chargement. Tu voudrais quelle comportement au juste? Que toute les images soient chargés, mais seulement après le onLoad?

Je ne veux pas améliorer le temps de chargement à proprement dit, je souhaite améliorer la fluidité de la navigation. Et pour se faire, charger le site entièrement dès que l'utilisateur arrive sur la page d'accueil, comme sur le site du nytimes

Je ne pense pas qu'ils utilisent le lazy loading dans la mesure où les rubriques ne sont pas accessibles avant d'être chargées (visualisé par un point gris foncé) et on voit que les points se foncent au fur et à mesure et on sait alors que les rubriques sont chargées et qu'on peut y accéder.

Je n'ai pas l'impression d'être claire

Autant pour moi, c'est moi qui avait mal percuté de quoi tu parlais.

En l’occurrence, j'ai l'impression qu'ils commencent par charger d'abord un site minimaliste, puis chaque rubrique par un appel Ajax.

A moins que tu aies énormément de contenu, pas sur que ça soit vraiment très utile.

Google Chrome proposait ce genre de feature dans leurs dernières annonces je crois... Mais c'était tout géré par le navigateur, tu peux peut-être chercher sur google de ce côté là et voir si ce n'est pas inspiré de solution JS à la base. (Je crois qu'ils appelaient ça le prerendering, mais je ne suis plus sûr)

Qui plus est, je ne suis pas convaincu que ce soit un avantage sur mobile où on est chargé au mb de données.
Modifié par Vaxilart (11 Aug 2011 - 20:32)

Bien vu pour le prerendering

Sinon, je ne voyais pas le lien avec le cache manifest. Si on t'a orienté là-dessus, c'était amha dans le but de précharger à l'avance les ressources des autres pages que ta home.

Tu trouveras ici un tuto plutôt complet sur l'écriture et l'utilisation du fichier manifest

Luleen a écrit :
En tout cas j'ai essayé en utilisant le mode hors connexion et ca n'a pas l'air de fonctionner, ou bien c'est parce que j'ai mis dans mon CACHE des includes php ?

Tu as vérifié le fichier généré? Par défaut PHP ne parse que les fichiers avec une extension .php (de tête, j'ai un doute).

Tu dois rajouter un truc du genre dans ton .htaccess (idem, à vérifier)

AddType application/x-httpd-php .mf

Vaxilart a écrit :
Qui plus est, je ne suis pas convaincu que ce soit un avantage sur mobile où on est chargé au mb de données.

Pas mieux, télécharger toutes les ressources d'un site si tu ne vas en voir qu'une page.

De même pour la technique utilisé par le NYT (charger par avance chaque section par Ajax). Pas sur que ça apporte grand chose à part le côté tape-à-l’œil, si ce n'est des soucis potentiels d'accessibilité, de référencement et autres trucs bien casse-gueule à gérer : gestion des urls (même si ici ça semble plutôt bien foutu) et grosse dépendance au JS entre autres.

Je suis bien au courant de tous les soucis du préchargement qui peut parfois se révéler obsolète mais on me le demande alors je fais ce qu'on me dis...

Le but étant de charger une bonne fois et qu'après ce soit fluide, mais les informations étant elles même dynamiques je sais pas si c'est possible. Enfin je vais me renseigner du côté du pré rendering etc mais je sens que je vais galérer.

Florien_R, qu'entends tu par le fichier généré ? Est ce que le cache manifest est censé générer un fichier ?

Mon .htacess contenait la ligne suivante :

AddType text/cache-manifest manifest

Je vais rajouter la tienne et voir ce que cela donne.

Encore une question qui va peut être vous sembler idiote mais là par exemple dans mon cache manifest, je lui demande de charger des page php. Est ce que cela charge aussi les ressources qui sont nécessaires à la page php en question ?

Je vais plancher sur le tuto que tu m'as envoyé, on va voir si j'arrive à tout comprendre

Merci !

Lu

Il faut

1) Nommer le fichier de manifeste avec l'extension *.appcache, par exemple offline.appcache

2) Être sûr de renvoyer l'en-tête HTTP Content-type: text/cache-manifest

Du côté d'Apache et avec un fichier .htaccess :

AddType text/cache-manifest .appcache

(c'est la seule ligne possible et valide d'après la spécification actuelle)

3) Ajouter l'attribut manifest dans la racine <html> :

<html manifest="offline.appcache">

4) Constituer un fichier de manifeste, listant les ressources

Exemple de manifeste offline.appcache :

CACHE MANIFEST
# VERSION 1

CACHE:
styles.css
script.js
image.jpg

+ voir la documentation ou d'autres tutos pour savoir comment ce fichier doit être organisé, et comment il est géré par le navigateur (support : Chrome/Firefox/Opera éventuellement)
Modifié par dew (19 Aug 2011 - 15:05)

Je lis partout qu'il faut mettre les ressources, mais si je mets dans fichiers php dans le manifest ca ne fonctionnera donc pas ?

En tout cas merci de m'aider à résoudre ce soucis.

Lu

AMHA ça doit être possible de créer un fichier php "appcache", il faut juste ne pas oublier d'envoyer les bons header (text/cache-manifest).

Je ne veux pas créer un fichier php appcache, je veux que les ressources chargées soient des fichiers php mais je n'ai pas l'impression que cela fonctionne...

Lu

Re,

Poste nous ton manifest, sans code on ne peux pas aller bien loin.

Rien de particulier :

CACHE MANIFEST
 
# Version 0.1

CACHE : 
index.php
includes/aside-fav.reco.php
includes/aside-reco.php
includes/login.php
includes/logout.php
includes/top.php
includes/nouveautes.php
includes/mes-favoris.php
includes/action.php

NETWORK:

FALLBACK:

Tu as bien déclaré ton manifest dans ta balise html?

<html manifest="LE_NOM_DE_TON_MANIFEST">

Modifié par Florian_R (25 Aug 2011 - 12:16)