Chargement progressif, comment faire?

**Azzedesign** · 27/08/2018, 13h48

Bonjour,
J'ai développé mon site professionnel moi même (petit message pour les rageux et les trotteurs : je ne suis pas professionnel du développement, je fais de mon mieux avec ce que je trouve donc les messages constructifs essayant de m'expliquer comment faire mieux et plus propre sont les bienvenus mais les remarques du style "c'est de la merde" ou "tu sais pas faire" sans aucun apport ne sont pas désirable), j'ai voulu mettre en page principal un affichage de news et de vidéos de Youtube sensées sensibiliser les visiteurs à l'appel d'un professionnel (là aussi seuls les commentaires constructifs sont les bienvenus).
L'affichage des news et des "news vidéos" se fait en PHP par l'appel des informations rentrées dans une base de données. À l'heure actuelle les news ne sont pas très nombreuses et surtout pas contraignantes au chargement mais les vidéos Youtube sont plus 30 et assez longues à charger, youtube oblige plus rapides à charger sous chrome mais je trouve par exemple très fastidieux le chargement sous safari, et comme on ne peux se contenter de cibler le navigateur qui se privilégié dans sont site j'ai besoin d'une solution pas trop longue pour ne pas faire fuir les visiteur. J'ai commencé à faire un affichage de 5 news et 5 vidéos par page mais, pour privilégier une fluidité et ne pas obliger les visiteur à cliquer pour afficher les autres pages j'aurais voulu faire un affichage progressif u genre quand ont fait défiler les 5 news/vidéos affichées on an charge 2 ou 3 de plus et ainsi de suite.
Par ailleurs, sur des conseils, j'ai décider de changer l'affichage pour un slider pour chaque catégorie une fois que la méthode sera bonne (chargement des news/vidéos suivantes une fois la 4è visualisée à l'écran).

Pour cela, et comme je ne sais absolument pas comment faire, je demande votre aide pour me sommer une piste valable.
Merci d'avance.

Les pages sont :
- Index (pour l'actuelle)
- Et index2 (pour celle envisagée)

**SpaceFrog** · 27/08/2018, 15h39

Fais eun recherche sur google avec "javascript lazyload"

Invité · 27/08/2018, 15h44

Bonjour,

Envoyé par Azzedesign

...mais les remarques du style "c'est de la m...." ou...

Oh, ce n'est pas le style de la maison...

(Je ne me sens pas visé : je t'avais juste dit "ça fait vintage" )

Cela dit, je constate que tu as suivi mes conseils : la nouvelle version à l'air beaucoup mieux (ergonomiquement parlant) !

Et puisque tu utilises Slick slider, regarde les démos -> "Lazy Loading"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

à voir dans les settings :
lazyLoad

defaut : 'ondemand'
Set lazy loading technique. Accepts 'ondemand' or 'progressive'

N.B. Tant que j'y suis, voici de quoi améliorer la présentation...
AJOUTE dans news2.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.slick-track {
    display: -webkit-flex; display: flex; 
    -webkit-align-items: stretch; align-items: stretch; 
}
.slick-slide.news-block, .slick-slide.page-block {
    height: auto;
    margin: 0 10px;
}

**Azzedesign** · 27/08/2018, 22h29

Envoyé par jreaux62

Bonjour,

Oh, ce n'est pas le style de la maison...

(Je ne me sens pas visé : je t'avais juste dit "ça fait vintage" )

Non, je n'ai absolument pas dit cal, en faite, comme je l'avais expliqué la dernière fois, sur un autre forum que je ne citerais pas (bon aller un indice, le site commence par a), j'ai reçu un commentaire du style "tu ne connais pas le responsive toi?". Du coup vu que ça m'a refroidi et ne sachant pas si j'allais tomber ici sur les mêmes personnes que la fois précédente, j'a préféré préciser pour que les troll évitent leurs salades.

Bien sure en règle générale j'ai reçu des commentaires constructifs mais il vaut mieux prévenir que guérir.

Cela dit, je constate que tu as suivi mes conseils : la nouvelle version à l'air beaucoup mieux (ergonomiquement parlant) !

Merci.

Et puisque tu utilises Slick slider, regarde les démos -> "Lazy Loading"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

à voir dans les settings :
lazyLoad

defaut : 'ondemand'
Set lazy loading technique. Accepts 'ondemand' or 'progressive'

N.B. Tant que j'y suis, voici de quoi améliorer la présentation...
AJOUTE dans news2.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.slick-track {
    display: -webkit-flex; display: flex; 
    -webkit-align-items: stretch; align-items: stretch; 
}
.slick-slide.news-block, .slick-slide.page-block {
    height: auto;
    margin: 0 10px;
}

Bon,
J'ai essayé mais soit ça ne marche que dans le cas d'une image soit il y a un problème que je ne sais identifier. En effet ma page avec 5 vidéos met 13,73s pour 21,7Mo (en réalité je compte 35,9s) alors que pour 10 vidéos il met 1,5mn pour 40,3Mo (tests effectués dans Safari 11.1.2 sous macOs 10.12.6)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<script type="text/javascript">
	$(document).ready(function(){
		[...]
		$('.block-video').slick({
			lazyLoad: 'progressive',
			dots: true,
			infinite: true,
			speed: 300,
			slidesToShow: 2,
			slidesToScroll: 1,
			adaptiveHeight: true,
			autoplay: true,
			autoplaySpeed: 8000,
			responsive: [
				{
				breakpoint: 1180,
				settings: {
					lazyLoad: 'progressive',
					slidesToShow: 1,
					slidesToScroll: 1,
					infinite: true,
					dots: false,
					adaptiveHeight: true,
					autoplay: true,
					autoplaySpeed: 8000
					}
				},
				{
				breakpoint: 780,
				settings: {
					lazyLoad: 'progressive',
					slidesToShow: 1,
					slidesToScroll: 1,
					infinite: true,
					dots: false,
					arrows: false,
					adaptiveHeight: true,
					autoplay: true,
					autoplaySpeed: 8000
					}
				}
			]
		});
	});
</script>

Ne pas oublier que ma div contient plusieurs choses, par exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div class="news-block">
	<meta http-equiv="Content-Type" content="text/html;charset=utf8mb4_general_ci" >
  	<h3><a href="https://www.youtube.com/channel/UCSULDz1yaHLVQWHpm4g_GHA" target="_blank" class="lien_news">Pourquoi le triphasé ? - HS - Monsieur Bidouille</a></h3>
  	<div class="news-desc">
  	  	<div class="news-desc-date">Juin 2018</div>
  	  	  	<div class="news-desc-text">
  	  	  	  	<p>Une fois n'est pas coutume, nous vous présentons ici une vidéo qui n'émane pas d'un de nos fournisseurs. Non, en effet il s'agit plutôt d'une vidéo d'explication sur le triphasé faite par un youtubeur français. La vidéo étant de qualité nous avons pris la décision, avec son accord, de l'intégrer sur notre site.
Le lien d'information retourne sur la page Youtube de l'auteur de la vidéo.<p>
  	  	  	</div>
  	  	  	<div class="news-desc-video-container">
  	  	  	  	<div class="news-desc-video">
   	  	  	  	  	<iframe width="560" height="315" src="https://www.youtube.com/embed/JwOTA5a2mK0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
  	  	  	  	  </div>
  	  	  	</div>
  	  	  	<br>
  	  	  	<div class="news-lien">
  	  	  	  	<a href="https://www.youtube.com/channel/UCSULDz1yaHLVQWHpm4g_GHA" target="_blank" class="lien_news">En savoir plus</a>
  	  	  	</div>
  	  	</div>
  	</div>
</div>

Invité · 27/08/2018, 23h08

Houlà !
ton script est bien trop chargé !

Dans "responsive", on ne met QUE ce qui change (nombre de slides à afficher,...).
Quant au "lazyLoad", il faut mettre "progressive"

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>
	$(document).ready(function(){
		$('.block-news').slick({
		dots: true,
			infinite: true,
			speed: 300,
			slidesToShow: 3,
			slidesToScroll: 1,
			adaptiveHeight: true,
			autoplay: true,
			autoplaySpeed: 20000,
			responsive: [
				{
				breakpoint: 1480,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 1,
					dots: true
					}
				},
				{
				breakpoint: 1180,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					dots: true
					}
				},
				{
				breakpoint: 780,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					dots: false,
					arrows: false
					}
				}
			]
		});
		$('.block-video').slick({
			lazyLoad: 'progressive',
			dots: true,
			infinite: true,
			speed: 300,
			slidesToShow: 2,
			slidesToScroll: 1,
			adaptiveHeight: true,
			autoplay: true,
			autoplaySpeed: 8000,
			responsive: [
				{
				breakpoint: 1180,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					dots: false
					}
				},
				{
				breakpoint: 780,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					dots: false,
					arrows: false
					}
				}
			]
		});
	});
</script>

Cela dit, le fait d'être en autoplay: true va faire défiler automatiquement le slider, et donc charger chaque vidéo au fur et à mesure de leur affichage (ce qui fait perdre une partie de l'intérêt du lazyLoad).

Mais bon : ça n'empêche pas de lire les news en attendant !

**Azzedesign** · 28/08/2018, 08h17

J'ai fait tout ça mais il attend toujours le chargement complet. Certaines heures on arrive à plus de 2 minutes sur un non chrome...
Que faire?

Invité · 28/08/2018, 09h37

Bonjour,

1- Tu confonds le temps d'affichage de la page avec le temps d'affichage complet de tous les éléments.

2- D'autre part, la durée dépend aussi de la qualité et vitesse de la connexion :

avec ton serveur (pour l'affichage de la page)
avec le serveur hébergeant les vidéos YouTube (pour l'affichage complet des vidéos externes)

3- question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="news-block">
	<meta http-equiv="Content-Type" content="text/html;charset=utf8mb4_general_ci" >
  	<h3><a href="https://www.youtube.com/channel/UCSULDz1yaHLVQWHpm4g_GHA" target="_blank" class="lien_news">Pourquoi le triphasé ? - HS - Monsieur Bidouille</a></h3>

Que fait cette balise <meta> en plein milieu de ton code ???
Elle n'a rien a faire là !

Je comprends que tu n'aies pas envie qu'on critique ton code, mais un code mal écrit / mal structuré peut aussi influer sur la vitesse de chargement.
Passe tes pages au validateur :

https://validator.w3.org/

Et, vu que tu utilise déjà la balise HTML5 <footer>, pourquoi ne pas remplacer <div id="bandeau" > par <header id="bandeau"> ?

**Azzedesign** · 28/08/2018, 21h58

Envoyé par jreaux62

Bonjour,

1- Tu confonds le temps d'affichage de la page avec le temps d'affichage complet de tous les éléments.

2- D'autre part, la durée dépend aussi de la qualité et vitesse de la connexion :

avec ton serveur (pour l'affichage de la page)
avec le serveur hébergeant les vidéos YouTube (pour l'affichage complet des vidéos externes)

Le seul problème c'est que le comportement n'est pas du tout le bon sous safari mac (la dernière version non beta) et que le site est inutilisable tant que tout n'est pas chargé, ce qui est étonnant...
Par ailleurs ça va vraiment plus vite sous chrome donc ce n'est pas le serveur ni ma connection. Perso je suis sure (vu que ça a déjà été dit) que google s'est débrouillé pour que chrome affiche les vidéos youtube beaucoup plus rapidement que les autres (ce n'est pas une question de 01 ou 0,2 fois hein mais plutôt 5 à 10 fois plus vite). Pour moi l'algo de youtube ralentit les autres navigateurs volontairement.

3- question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="news-block">
	<meta http-equiv="Content-Type" content="text/html;charset=utf8mb4_general_ci" >
  	<h3><a href="https://www.youtube.com/channel/UCSULDz1yaHLVQWHpm4g_GHA" target="_blank" class="lien_news">Pourquoi le triphasé ? - HS - Monsieur Bidouille</a></h3>

Que fait cette balise <meta> en plein milieu de ton code ???
Elle n'a rien a faire là !

Il me semble que c'est pour une histoire de lisibilité des données du SQL, je vais essayer sans pour voir si les caractères sont normaux.

Je comprends que tu n'aies pas envie qu'on critique ton code, mais un code mal écrit / mal structuré peut aussi influer sur la vitesse de chargement.
Passe tes pages au validateur :

https://validator.w3.org/

Et, vu que tu utilise déjà la balise HTML5 <footer>, pourquoi ne pas remplacer <div id="bandeau" > par <header id="bandeau"> ?

Ok, c'est une bonne idée de rectifier ça.
Fait.

**Azzedesign** · 28/08/2018, 22h09

Bon alors le comportement n'est mauvais que sous safari, je vais sans doute faire une page spéciale pour safari mais je dois tester avant sous safari mobile.

Chargement progressif, comment faire?

JavaScript

Discussions similaires

Partager

Partager