Mauvais affichage sur Mobile, Tablette ou sur Bureau

Cet article est utile si vous rencontrez des problèmes lorsque la version mobile de votre site est affichée aux utilisateurs d'ordinateurs de bureau, ou vice versa.

Par défaut, WP Rocket créera deux ensembles de fichiers de cache, un pour les ordinateurs de bureau et un pour les appareils mobiles, comme indiqué dans la doc Mise en Cache pour Mobile.

Avec cette configuration, tout contenu spécifique aux appareils mobiles ou de bureau devrait être mis en cache et servi en conséquence.

Toutefois, si vous rencontrez des problèmes, veuillez vous référer aux sections suivantes pour trouver les problèmes possibles et les solutions.

Niveaux de mise en cache supplémentaires

Si vous utilisez d'autres niveaux de mise en cache sur votre site, telle que Varnish, NGINX, Cloudflare's Cache Everything etc., vous devez vous assurer que ces niveaux supplémentaires sont configurés pour distinguer les visiteurs mobiles des visiteurs sur ordinateur.

En outre, les problèmes suivants dans les options de WP Rocket peuvent se produire lorsqu'il y a d'autres couches de cache qui ne prennent pas en charge le cache spécifique au mobile :

• Supprimer les ressources CSS inutilisées : problème particuliers aux mobiles - Il se peut que la feuille de style CSS spécifique au mobile soit manquante.
• Optimiser les images critiques : Conflits connus - les mauvaise images optimisées peuvent être servies au mauvais type d'appareil.

De même, toute fonction personnalisée ou tierce dépendant de la fonction  wp_is_mobile()  peut être affectée.

Solution : il est recommandé de désactiver ces couches supplémentaires de cache, et de laisser WP Rocket gérer la mise en cache pour le bureau et le mobile.

Traiter les tablettes comme des appareils mobiles

Par défaut, le cache mobile ne fonctionne que pour les téléphones. Elle ne considère pas les tablettes comme "mobiles" dans le contexte de la mise en cache des pages. Par conséquent, le cache par défaut (pour les ordinateurs de bureau) sera utilisé pour les tablettes.

Comme il ne peut y avoir deux versions du cache - ordinateur et mobile - si vous avez un affichage particulier dédié aux tablettes, ce ne sera pas possible d’avoir un fichier particulier pour ce type de vue. 

Vous pouvez modifier ce comportement par défaut pour traiter les tablettes comme des mobiles avec ce plugincomplémentaire :

📥 Télécharger (.zip): WP Rocket | Set Tablets As Mobile
Développeurs : vous touverez le code de ce plugin sur GitHub.

Ce plugin peut être utile si votre thème ou un plugin utilise la fonction  wp_is_mobile, qui traite les tablettes comme des appareils mobiles. 
Notez également que les sous-options  Activer la mise en cache pour les appareils mobiles et Créer un fichier de cache à part pour les mobiles doivent être activées pour que ce petit plugin fonctionne.

Une  solution alternative est d’exclure ces appareils du cache, sur la base du user agent. 

Dans les Régles avancées de WP Rocket, localisez le champ  Ne jamais mettre en cache ces User Agents et ajoutez cette liste (un par ligne) : 

iPad
NexusTablet
SamsungTablet
HPTablet
AsusTablet
BlackBerryTablet
HTCtablet
MotorolaTablet
AcerTablet
ToshibaTablet
LGTablet
FujitsuTablet
LenovoTablet
DellTablet
SonyTablet
PhilipsTablet
HuaweiTablet

L'appareil n'est pas considéré comme mobile

WP Rocket ne servira le cache spécifique aux mobiles que pour les appareils mobiles ayant un agent utilisateur de cette liste.

Si un appareil a un agent utilisateur différent, WP Rocket servira la version du cache spécifique au bureau.

Solution: Malheureusement, il n'y a pas de solution connue pour ce type de limitation.

WP Rocket versions antérieures à 3.16

Si vous avez des soucis avec l’affichage de la version mobile affichée pour sur votre ordinateur, ou l'inverse, assurez-vous d’avoir bien coché l’option Créer un fichier de cache à part pour les mobiles. Elle se trouve dans l’onglet Cache des réglages de WP Rocket :

Avec ce réglage, pour chaque page, vous disposerez d'un fichier cache qui sera affiché aux utilisateurs de bureau et d'un fichier distinct qui sera servi aux utilisateurs mobiles.

Traiter les tablettes comme des appareils mobiles

Pour que le plugin d'aide WP Rocket | Set Tablets As Mobile puisse fonctionner, la sous-option Séparer les fichiers de cache pour les appareils mobiles doit être activée.