Construire et concevoir un site Web WordPress professionnel - Optimisez votre site Web pour un meilleur référencement | Partie 5

1. Introduction - UI vs UX cX vs CX: Salut et bienvenue dans la section d'optimisation hors du cours. Maintenant, c'est une section super importante où nous allons parler de choses telles que la vitesse de chargement des pages . Maintenant, si la vitesse de chargement de votre page est trop lente, vos visiteurs ne vont même pas rester dans le coin pour découvrir votre site Web. Donc, peu importe à quel point vous avez décidé. Et maintenant, même, si vous avez une vitesse de chargement très rapide, mais que vous avez un design terrible, les visiteurs ne vont pas rester de toute façon. Donc, l'important est d'optimiser tout et de trouver ce merveilleux équilibre pour s'assurer que tout fonctionne. Donc, dans cette conférence, nous allons aller de l'avant et passer par quelques acronymes vraiment importants, ce qu'ils sont, comment les utiliser et comment se connecter à ces expressions et les garder à l'esprit pendant que vous concevez votre site Web dans l'ensemble, droite, Jusqu'à présent, nous avons fait la page d'accueil. Maintenant, nous allons l'optimiser et ces stations d'optimisation, nous allons garder à l'esprit tout au long du parcours. Donc, nous savons toujours ce qui est important et sur quoi nous concentrer. Alors commençons maintenant, une expression que vous allez entendre ah, beaucoup comme vous faites vos recherches et que vous continuez à développer votre site Web et vos compétences d' édition et de conception de site Web est quelque chose que vous appelez. J' ai également connu sous le nom d'interface utilisateur. Donc, l'interface utilisateur est fondamentalement ce que nous avons fait. C' est le design. Donc, si nous regardons notre site en ce moment, une partie de l'interface utilisateur est tout cela que nous regardons, comme l'arrière-plan ici, par exemple, comme la police qui réutilise les couleurs qui utilisaient le fait que nous avons fait ces menus collants et lui avons donné une ombre. Les couleurs ici, le fait qu'on nous ait pensé à avoir cette obscurité avec cette lumière et ensuite faire ça Ah, un peu sombre. Tu fais ça un peu plus léger. Tout cela fait partie du design, quoi il va ressembler et comment il est expérimenté avec les différentes couleurs. Et c'est une partie de l'interface utilisateur. Nous pourrions donc résumer l'interface utilisateur en tant que partie de l'esthétique. droite ? À quoi ressemble le site Web. Mais il y a aussi quelque chose d'autre. Il y a quelque chose qui s'appelle utilisé, connu comme acronyme d'habitude que vous x droit. Nous pouvons les voir en gras. Donc, l'expérience utilisateur est fondamentalement la façon dont votre site Web fonctionne, n'est-ce pas ? Ainsi, une partie de l'expérience utilisateur est, par exemple, ce qui se passe quand ils arrivent à la page d'accueil. Quelle est la prochaine étape ? Qu' ils vont faire le sujet que nous devons apprendre plus bouton qui va les amener au début ici, biper l'ordre de ces pages, le fait qu'on ait un menu collant. Ainsi, chaque fois qu'ils défilent vers le bas, ils peuvent accéder instantanément à ces pages. Tout cela fait partie de l'expérience utilisée, comment le site fonctionne et comment ils peuvent accéder à différentes choses. Fondamentalement, comment le site se sent, et aussi une partie de l'expérience utilisateur est votre site Web remplit-il Aggie ? charge-t-il lentement ? Par exemple, si je fais défiler vers le haut, les choses deviennent-elles floues ? Ne prend pas trop de temps pour que cette couleur apparaisse. Tout cela fait partie de leur expérience. Maintenant, si ça se sent coincé, par exemple, ou Laghi, ça va vraiment minimiser l'expérience hors du site, non ? Si nous avons une vitesse de chargement lente qui va minimiser une grande partie de l'expérience utilisateur ce site Web afin que nous puissions résumer l'expérience utilisateur comme le fonctionnement du site Web, comment les pages sont disposées, pourquoi elles sont disposées de cette façon. La fonction de recherche, la façon dont ils ont été mis les sections, pourquoi nous avons mis les sections de cette façon. Nous avons donc réalisé que l'interface utilisateur et l'expérience utilisateur se mélangent en quelque sorte, mais ce ne sont pas les mêmes. Alors, où sont les interfaces utilisateur sur le design lui-même ? L' expérience utilisateur a également une partie de la conception, mais il est plus sur la façon dont il fonctionne également de sorte qu'il fonctionne rapidement, sans effort et d'une manière réfléchie, par exemple, que nous avons le fond mawr apprendre qu'il les emmène à la page de début ici que nous avons un menu collant, etcetera. Tout cela fait partie du fonctionnement du site Web et donc de l'expérience utilisateur . Et puis nous avons aussi quelque chose qui est l'acronyme S C X, également connu sous le nom d'expérience client, et l'expérience client qui est beaucoup plus sur votre entreprise, comment les gens perçoivent votre entreprise, n'est-ce pas ? Ainsi, par exemple, si vous avez de telles choses, comme vous avez sur e-mail, ouvert ou si vous avez une génération de leads, ou peut-être que vous offrez des choses gratuites sur votre site Web. Ils obtiennent un très bon sentiment de toute l'expérience sur votre site Web de votre entreprise qu'Issa part de l'expérience client. Maintenant, nous pourrions résumer cela comme étant les uns hors de l'interface utilisateur, l'expérience utilisateur avec votre entreprise. droite. Donc, si vous avez un site Web vraiment beau, vous avez une excellente expérience utilisateur sur ce site Web et votre entreprise offre une excellente solution à leur problème. Alors tu vas avoir une très grande expérience client, non ? Nous pourrions donc résumer cela comme l'expérience commerciale globale de vos clients que vos visiteurs ont hors de votre entreprise et que votre entreprise est bien sûr représentée par votre site Web. Maintenant, nous allons aller de l'avant et nous concentrer sur l'interface utilisateur et l'expérience utilisateur parce que c'est un cours WordPress masterclass, non ? L' expérience client va venir naturellement au moment où vous commencez à développer votre entreprise parce que différentes entreprises auront des outils différents, des besoins différents. Mais nous allons nous assurer que le site Web remplit tout avec la conception et tout avec l'expérience utilisateur, comme nous avons juste et allons continuer à le faire maintenant. Le résultat de l'optimisation de tout sera, par exemple, que nous allons avoir amélioré S E o. Donc, lorsque nos pages se chargent plus rapidement, cela signifie aussi que les moteurs de recherche seront heureux que vous allez classer plus haut. Cela signifie également que les clients vont rester sur votre site Web. Maintenant, c'est ce qu'on appelle la rétention. Et quand vous avez une forte rétention en d'autres termes, client soutenu pendant longtemps sur votre site Web, les moteurs de recherche vont vous aimer encore plus. Et cela signifie que vous allez vous classer plus haut et plus haut. Comment vous allez obtenir de plus en plus de visiteurs, et c'est de cela qu'il s'agit. Et enfin, une fois que vous avez une excellente interface utilisateur, excellente expérience utilisateur et enfin l'expérience personnalisée atteint vraiment des sommets. Alors vous allez avoir des conversions maintenant, des conversions. Ce n'est qu'un mot qui signifie littéralement changement. Donc, une conversion pour un bloc pourrait être que vous avez un visiteur se transforme en un lecteur. Maintenant, si vous avez un commerce électronique, cela pourrait signifier que vous avez un visiteur se transforme en un acheteur ou que vous pourriez , par exemple , un visiteur se transformer en une piste , etc. Selon ce que vous voulez qu'ils changent en convertissent, ça va être le résultat, non ? C' est de cela que nous avons parlé. Le but sur le site Web de la page d'accueil et tout. Et parce que nous faisons des cours, nous voulons que les gens viennent sur notre site, s' habituent à nous, se réchauffent et suivent nos cours. Donc, quand quelqu'un achète un de nos cours, ça va être une conversion pour nous. Et pour obtenir cela, nous devons clouer l'interface utilisateur. Vous moi, l'expérience utilisateur ux et le client expérience le c X. Donc, les gars, pas quand on saura ça, on passera à la prochaine conférence. Et parce que nous avons fait tant d'interface utilisateur à la conception En d'autres termes, nous allons commencer par améliorer l'expérience utilisateur et regarder comment notre site Web fonctionne avec la vitesse de chargement, par exemple. Donc c'est super important. Rendez-vous à la prochaine conférence, où nous allons optimiser le U X et ensuite aller plus loin dans le faire. Je te vois là 2. Testez votre site Web de l'accéléré: Très bien, gars, dans cette conférence, nous allons aller de l'avant et apprendre à tester notre site web rapidement. Maintenant, c'est très important parce que la vitesse de chargement de votre site Web détermine comment vos visiteurs vivent votre site Web, rappelez-vous ? Utilisé pour l'expérience. Maintenant, il y a quelques statistiques assez folles qui montrent que si votre site Web prend cinq secondes ou plus à charger, alors jusqu'à 70% de réduction sur vos visiteurs partiront. Et de même, si votre site Web prend deux secondes pour charger, alors jusqu'à 34% de vos visiteurs laisseront ça, les gars, c'est deux secondes que les gens ne sont pas prêts à attendre qu'il charge. C' est dingue. Nous devons donc continuer à nous assurer que notre site Web se charge rapidement. Sinon, si on perd tout le trafic, ils ne feront pas l'expérience de tout ce beau design. Droit ? Donc on va aller de l'avant et utiliser un outil appelé le temps, et ça sera hors de cause. La ressource est que vous pouvez tout simplement aller de l'avant et y accéder. Ils le sont et nous allons aller de l'avant et voir combien de temps il faut pour qu'un site Web se charge et voir ce qui le retarde. Si ça prend beaucoup de temps Maintenant ce que je vais faire ici est en fait utilisé pour Tab. Donc, je vais utiliser un pour le site que j'ai créé, à droite, droite, Et puis un autre onglet avec le même temps de mise en place où vous pouvez aller de l'avant et vérifier le temps de chargement de vos concurrents ou tout simplement quelqu'un que vous avez basé votre conception sur parce que cela va vous donner un bon indice de ce que vous manquez quand il s'agit de temps de chargement quand il s'agit souvent de souris. Donc ce que je vais faire, c'est aller de l'avant et prendre notre u R l comme ça. Je vais y faire face, et ensuite je vais aller de l'avant, enlever ça et juste le coller dedans. On y va, et je vais cliquer sur commencer les tests. Je vais quitter cet endroit au hasard, commencer à tester, et je vais aller sur le site de Pat Flynn qui allait utiliser son site Web parce que nous l'avons tellement secoué et basé sur beaucoup de choses pour la science sur son site, Je vais aller chercher son Oural. Copie-le. Revenez ici, supprimez-le, collez-le dans, puis cliquez sur. Commencez les tests. Je vais laisser ça au hasard, ce n'est pas tout à fait juste, mais ce n'est pas le cas. Quoi qu'il en soit, on veut juste un tableau comparatif. Les chances sont ici, un budget beaucoup plus élevé et les gens qui travaillent pour lui pour optimiser son site Web au niveau suivant . Maintenant, nous n'avons probablement pas ça. On veut encore quelque chose à comparer. D' accord, les gars. Donc, les résultats sont arrivés, et honnêtement, ce n'est pas trop beau. Donc, en regardant cela, nous pouvons voir qui sont le temps de chargement basé sur Sidney, Australie maintenant, Mais de toute façon, sont le temps de chargement est plus de quatre secondes. Maintenant, c'est des millisecondes, donc ça veut dire que chaque 1000 est une seconde. Le temps de chargement d'un site Web est donc de 4,2 secondes. Tu te rappelles combien on a perdu en deux secondes ? Tu imagines combien on va perdre les trois ? Et maintenant, même quatre. On est presque à cinq secondes. Ce qui veut dire qu'on touche probablement à 70 % de réduction sur le trafic perdu. C' est un énorme disjoncteur, et nous allons avoir besoin d'optimiser ça. Nous voyons que nous avons beaucoup de demandes, demandes étant qu'il y a certaines choses qui doivent charger entre le CSS et JavaScript . On n'a pas besoin d'aller en détail là-dessus. Juste qu'il y a beaucoup de choses qui se passent sur notre site Web. y a probablement pas d'aide avec le temps de chargement et la taille totale de notre site Web est 2,7 mégaoctets. Les gars, c'est trop gros maintenant. Honnêtement, l'objectif est d'obtenir en dessous d'un mégaoctet pour votre site. Ok, donc 2.7 c'est juste trop gros. Et on va devoir réparer ça. Si vous le rendez vraiment professionnel, vous pourriez même réussir à faire moins de 500 kilo-octets. Maintenant que 0,5 mégaoctets, nous pouvons voir que nous avons une faible note de performance pour les quatre sur 100 sur la base des statistiques précédentes. Mais notre capacité d'utilisation mobile est vraiment élevée, et c'est grâce au thème Ocean WP et à l'élémentaire hors cours, ce qui rend déjà mobile réactif pour nous. Alors merci pour ça. Et puis nous voyons où est basé ce test. Allons-y et secouons le site Web de Pat Flynn. Maintenant, nous pouvons voir qu'il a un chargement beaucoup plus rapide à partir d'un temps de chargement beaucoup, beaucoup, beaucoup plus rapide droit, donc il est temps de chargement est de 0,3 seconde, presque 0,4 seconde, mais de toute façon, c' est en dessous d'une seconde. Il est également intéressant de noter qu'il est en train de charger depuis les États-Unis pendant que nous chargeons depuis l'Australie . Il y a donc une différence, mais la différence est toujours énorme. Il est beaucoup moins demandé qui a également aidé. Mais regarde ça. C' est vital. La taille totale de son site Web est de 630 kilo-octets. Maintenant que 0,6 mégaoctets. Nous devons donc abaisser radicalement décisive notre site Web pour l'accélérer. En regardant sa note de performance, on peut voir qu'il ne dépasse pas la balance ici non plus. Il n'a pas 100 gars sur 100 que vous ne voulez pas nécessairement atteindre l'échelle de performance parce que plus votre performance est élevée, généralement plus votre design doit souffrir, pas vrai, vrai, parce que plus la qualité est élevée images votre utilisation, le plus interactif en vedette, vous utilisez toutes ces choses qui prennent du temps à charger. Donc, ce que vous voulez faire est de trouver un équilibre entre l'expérience utilisateur et l'interface utilisateur . Donc 73 pourrait être vraiment, vraiment bon nombre parce que nous savons que son site Web est magnifiquement le signe et il y a beaucoup de fonctionnalités merveilleuses qui se passent ici. Donc, le fait qu'il puisse avoir tous ces descendants merveilleux la charge si rapidement qui est incroyable. Rappelez-vous que lorsque vous faites le test, vous ne voulez pas aller trop dans la performance et faire souffrir le design. Tout est au sujet de l'équilibre. Ici. La facilité d'utilisation mobile va très haut aussi. Revenons à notre propre site ici maintenant. La chose intéressante est que si nous faisons défiler vers le bas, nous pouvons réellement voir quel est le problème sur notre site Web. droite. Donc, ce que nous voyons ici, c'est que nous avons un problème avec l'optimisation de nos images. Ils ne sont pas optimisés. En d'autres termes, nous avons quelque chose appelé rendu bloquant JavaScript et CSS dans le contenu ci-dessus du pli, rappelez-vous , au-dessus du pli, qui va être tout cela. Et tout ici est en dessous du pli. Et puis nous avons réduit le temps de réponse du serveur et l'effet de levier, parcourir ou encaisser quoi ? Nous allons aller de l'avant et faire des gars dans les conférences à venir il est de passer par tous ces et de les corriger et de s'assurer que notre site Web charge beaucoup, beaucoup plus vite et optimiser tout OK, parce que cela va rendre notre utilisateur expérience souffrent beaucoup. Ça va faire souffrir notre PDG S beaucoup. Fondamentalement, vous ne serez pas en mesure d'avoir une entreprise durable avec ce genre de site lent. Ok, donc nous devons corriger ça. Et honnêtement, c'est assez excitant à faire. C' est une étape vitale. Ne manquez pas cette section du cours. se voit à la prochaine conférence, les gars. 3. Vitesse de chargement d'image: Très bien, mes amis, dans cette conférence, nous allons aller de l'avant et résoudre des problèmes ensemble comme nous l'avons fait pendant un moment. Maintenant, nous allons aller de l'avant et optimiser notre vitesse de chargement d'image parce que nous n'avons pas l'air si impressionnant en ce moment. Au test, on vient de le faire. Donc, comme vous pouvez le voir, si vous faites défiler ci-dessous, nous obtenons quelques recommandations en cours ici que nous avons dans la section performance. Nous avons l'optimisation des images, éliminant le blocage du rendu, réduit les os de service, réduit les os de service levier de temps, encaissement du navigateur, puis un à la taille de la facilité d'utilisation mobile cible de robinet de manière appropriée. Maintenant, on va les parcourir, mais on va le faire pas à pas. Alors commençons par celle-là. Optimisation des images. Donc si je clique ici, ça va me dire combien d'espace je pourrais dire si j'étais juste un peu plus intelligent. Et aussi laquelle des images qu'ils coûtent réellement des problèmes afin que nous puissions voir. Par exemple, nous avons ces sont marketing 17 cours dans une image est en fait il pourrait être réduit de 97%. C' est énorme. Et nous avons aussi l'Amazonie. Il pourrait être réduit de 97 %. Nous avons l'image Shopify 97% Et ce sont toutes ces images que nous venons de mettre en place moment, elles prennent beaucoup d'espace dans inutilement Maintenant. Nous avons aussi d'autres images comme il dit qu'ils sont des gens du ciel et de la personne, et ce sont en fait les images de fond que j'ai décidé de ne pas nommer. Mais je me souviens de leurs noms. Ce sont donc les images d'arrière-plan qui pourraient être optimisées tout aussi bien. Et enfin, nous avons l'édition d'image recadrée, et c'est en fait le nom de notre logo. Mais comme vous pouvez le voir, cela va seulement dire que c'était 4,9 kilo-octets. Donc, je ne vais pas m'embêter à l'optimisation de celui-ci. Mais tout ce qui précède ici, nous allons aller de l'avant et optimiser chacun d'entre eux puis exécuter un nouveau test et obtenir cette taille juste, parce que ce sa façon d'être veut être sous un mégaoctet et certainement en dessous de deux secondes pour le temps de chargement. Alors allons de l'avant et allons à notre page d'accueil. Et si vous êtes ici et que vous voulez commencer à éditer avec L un mentor ou nous devons faire est de cliquer sur éditer avec L. A mentor. Donc ce que nous allons faire maintenant, c'est que nous allons commencer à optimiser toutes ces images utilisées . Et nous parlons de cette image de fond, ce fond, tous ces trois et cette image de fond, non ? Et on va le faire en les mettant tous dans un dossier pour qu'on sache où on les a. Et puis nous allons aller sur ce site appelé compresseur d'images dot com. Aussi connu comme souvent mon sil, Comment j'aime ce nom. Donc c'est, bien sûr, dans la ressource est maintenant tout ce que nous allons aller de l'avant et faire ici est de cliquer sur télécharger des fichiers comme ça, et ensuite nous allons aller à toutes nos images, les sélectionner et cliquer sur des chaussures. Donc c'est vraiment un processus remis, et maintenant ça va commencer à compresser les images pour nous dans cette seconde. Mais la belle chose ici, c'est qu'on peut personnaliser notre propre compression, non ? Donc, par exemple, nous avons Amazon en ce moment qui est sélectionné ici. Et si je fais défiler vers le bas, je peux voir l'aspect original et l'apparence quand il est compressé. Je peux également voir combien de pour cent je économise ce que les nouvelles tailles. Mais voici la chose intéressante ici. Je peux voir la quantité de couleurs utilisées en ce moment et aussi remarquer qu'il n'y a pas beaucoup de cultures en ce moment. Donc ce que je vais faire, c'est tirer ça pour dire, Faisons 80 colliers et on peut dire qu'il n'y a aucune différence dans les images. Mais il y a une différence dans cette taille, donc je vais continuer. Passons à 70, à droite ? Et il n'y a toujours pas d'égalité perceptible. Vraiment, ça change ici. Alors je vais descendre encore plus loin. Allons dire 55. Je repousse les limites à la légère. Faisons 53, ça a toujours l'air bien. Je vais aller encore plus loin. Faisons 40. Ok, donc j'ai vraiment compressé ce gros moment en ce moment. Même si je suppose qu'il n'y a toujours pas de perte notable de qualité, je vais devenir vraiment fou, en fait, et aller avec 20 et il est toujours à la recherche. D' accord, mais si je suppose là-dedans, oui, comme on peut le voir, le blanc commence à souffrir un peu. Donc je vais passer à dire 40 et on aura une belle ou blanche là-bas. Donc je vais rester avec celui-ci avec les quatre à l'université parce que ça va juste être une taille de vignette de toute façon, donc je vais cliquer sur appliquer. Nous sommes donc passés de 68 à 76 % de compression. Vraiment bien. Maintenant, ce n'est qu'une miniature, donc vous pouvez vous en sortir avec la souffrance de qualité MAWR ici. Mais celle-ci est une image super importante parce que c'est notre image de fond. Nous devons donc être un peu plus prudents ici. Donc, nous avons la qualité en ce moment et juste pour vous montrer ce qui se passe si vous allez trop loin, si je pouvais tirer ça vers le bas pour dire, vous savez, allons-y avec 35, vous pouvez voir qu'il y a un manque assez perceptible de qualité qui va sur ici maintenant, surtout si je poursuis signifie que ça devient plus répandu et parce que c'est un peu plus sensible sur une affaire, parce qu'il va y avoir une grande image de fond. On ne veut pas aller trop loin ici. Comme vous pouvez le voir, tout est flou en arrière-plan ici Essayons 60 et voyons ce qui se passe. Donc six a l'air plutôt bien. Je vais poursuivre en justice. signifie que vous pouvez voir qu'il y a certainement un peu de perte de qualité si supposer dans ce genre. Mais en fait, je vais aller le porter à 65. Je pense que ça a l'air vraiment sympa. Alors, qu'est-ce que tu veux faire ? Vous pouvez aussi voir qu'il y a un peu de la décoloration de l'appelant. Je vais aller à 70 ici. Donc, ce que vous voulez faire ici, c'est juste garder à l'œil sur la qualité. Assurez-vous que la perte n'est pas trop gros droits, surtout sur ces images importantes. On va aller de l'avant et les appliquer, et on va le faire pour toutes les images. Et puis nous allons nous assurer que nous allons les télécharger sur notre page d'accueil et jeter un oeil pour qu'il n'y ait pas de perte notable de qualité. Bien sûr, nous ne voulons pas sacrifier la qualité d'image réelle, qualité perceptible pour obtenir une meilleure vitesse de chargement. Il va y avoir un bel équilibre, mais on veut avoir moins d'un mégaoctets, donc je vais continuer à optimiser ces images. Allons vers le bas à environ, disons 65 puis bientôt, nous pouvons voir qu'il y a certainement un changement de qualités. Je vais aller avec 70 sur ceux-là, et ensuite je vais postuler, et on va voir quel genre de résultats ces rendements. Maintenant, vous pouvez, par exemple, voir, nous sommes passés de 252 kilo-octets à 71 kilo-octets. Il y a une énorme, énorme, énorme différence. Donc, on économise une taille de sciage. Et maintenant, si jamais nous allions trop loin, ce que nous allons remarquer lors du téléchargement, tout ce que nous devons vraiment faire est de retourner votre téléchargement, leur original, et ensuite être plus gentil sur la compression lui-même. Donc je vais descendre à 70 sur celui-ci s. Et bien, il y aurait. Je vais frapper. Appliquer. Il s'agit d'une vignette. Je n'ai pas besoin d'être très sensible Allons voir, disons , 59. Vous pouvez voir qu'il y a des souffrances de qualité juste là. Mais une fois de plus, ce sera une miniature. Je crois que ça ira. Je vais aller de l'avant et utiliser ceci de 501 kilo-octet à 116. C' est énorme. Et enfin, je vais ne pas faire de Shopify. Et c'est aussi une image très simple, même s'il y a d'autres choses en arrière-plan. Donc, je vais faire défiler vers le bas. Faisons 60. On y va, et je vais juste appuyer sur appliquer ici. Donc maintenant, quand j'en ai fini, je l'ai appliqué à tout le monde et nous pouvons voir qu'il n'y a pas de véritable perte de qualité perceptible. Rien de grand. Je vais télécharger tout cela en cliquant simplement sur télécharger tout. Et puis je vais aller de l'avant et les extraire. Donc voici toutes les images en ce moment que je viens d'utiliser. Et voici le compresseur d'image. C' est un fichier sip. Je vais juste double-cliquer dessus. Et là, j'ai les nouvelles fautes. C' est juste dans ce dossier appelé Image Compressor. Bon, donc c'est vraiment, vraiment bon. Maintenant, on va aller sur le site. On va télécharger tout ça, et ensuite on va faire un nouveau test et voir les résultats. Ok, donc commençons par l'image de fond ici. Je vais cliquer ici. On va éditer cette section, passer au style, et ensuite on a l'image juste ici. Je vais passer à télécharger le fichier. Je vais sélectionner le compresseur d'images. C' est juste ici. Et puis nous allons utiliser cette image du ciel à nouveau et nous pouvons voir que la taille est maintenant 134. Et rappelez-vous, nous avons encore écrasé qui est la compression des fichiers pour nous afin de télécharger est dans la section 131. Il applique cette compression de vie à cela. Mais regardez cette comparaison. Nous avons 131 kilo-octets ici et le précédent, même avec smushed comprimé était 422 est une énorme différence, les gars. Et c'est parce que nous utilisons la compression avec perte droite ? Avec smart, on peut Onley utiliser une compression sans perte à moins qu'on n'achète ce branchement. Et bien sûr, si vous voulez rendre votre vie un peu plus rapide et plus facile, vous pouvez acheter smush la prime. Mais honnêtement, ce n'est pas si grand que d'utiliser cet outil. Je pense que ça marche Superbe. Donc, cela a l'air vraiment sympa et va aller de l'avant et cliquez sur insérer des médias et ici nous l'avons . Alors laissez-moi aller de l'avant et cliquez sur les changements d'aperçu ici et ici nous l'avons. Et comme vous pouvez le voir, il n'y a pas de grande différence de qualité. Donc si je veux juste te montrer la différence entre eux, je vais aller de l'avant et les comparer côte à côte. Donc si j'ouvre ces deux-là, c'est l'image originale, non ? C' est celui qui était de 422 kilo-octets, et puis celui-ci est celui qui est presque quatre fois plus petit en taille que vous pouvez vendre. Si nous regardons l'ombre ici pendant que je saute entre eux, il y a une légère différence de couleur sur toujours aussi légère différence de couleur. Et vous pouvez remarquer cela demandé, Eh bien, quand vous regardez l'arrière-plan droit, mais il n'y a pas grand-chose qui se passe là-dessus. Cela vaut la peine d'économiser toute la taille, économisant tout le temps de chargement. Donc, fondamentalement, même si nous utilisons la perte, ce n'est pas une perte de qualité réelle. Alors continuons à optimiser. Je vais y aller. Je vais faire défiler jusqu'ici, cliquer sur éditer cette section, passer au style, aller vers le bas à l'image ici, cliquer sur l'image, et je vais télécharger des fichiers, Sélectionnez. Et puis je vais cliquer sur l'image avec les filles assis ici. Maintenant, ça fait 76 kilo-octets. Et si vous avez un coup d'oeil sur les aperçus, c'est 293. Donc, c'est une énorme, énorme, énorme différence. Maintenant, mes calculs sont trop mauvais pour vous donner un bon calcul. C' est mieux, mais il y a une grande différence. Droit ? Donc, de 293 à 74 au Ghana, pourrait-il insérer des médias ici et là nous l'avons. Il n'y a pas non plus de perte notable de qualité. Maintenant, je vais aller de l'avant et je vais tous les télécharger. Et puis on va vérifier la page, non ? Donc je vais faire la même chose. Apparaissent, allez à la section, allez à style. Je vais cliquer sur l'image ici, télécharger des fichiers, sélectionner des images, cliquer sur des chaussures. Donc, c'est 71 kilo-octet. La précédente était 252. Énorme différence. Cliquez sur Insérer un média. On y va. Maintenant, je vais aller de l'avant et changer ceux-ci. C' est ce que je vais juste Kulick ici et je vais cliquer sur cette image, puis télécharger fichiers sélectionnés et puis je vais télécharger le bon et les chaussures et le média d'insertion. Je vais continuer à faire ça sur tous, d' accord ? Je viens donc de changer tous ces trois aussi. Maintenant, il y a une autre chose qui est super important pour vous de savoir à propos de ce que je n'ai pas fait quand j'utilisais ces images plus tôt. Et c'est, si vous cliquez sur l'immature, vous pouvez voir que j'utilise la taille complète de l'image. n'y a aucune raison de le faire, parce que nous sommes en train de le compresser à une si petite taille. Donc, quand nous avons regardé le test et qu'il a dit que vous pouvez économiser après et avoir une réduction de 97% , ce que cela signifie par cela est que je peux en fait, au lieu d'utiliser une image complète, cela prend beaucoup de taille et d'espace . Je peux juste aller de l'avant et cliquer sur le médium, par exemple, et il n'y a aucune perte de qualité que ce soit parce que j'ai en fait cette petite taille. Mais il se recadre en utilisant cette fonctionnalité de sorte qu'il devient automatiquement encore plus petit Maintenant vous allez remarquer si vous allez trop loin. Parce que si j'ai utilisé la vignette ici, par exemple, vous pouvez voir que ça ruine l'image. Droit ? Mais si j'ai utilisé le moyen 300 fois, 300 ou moyen grand ou j'ai utilisé un grand, vous pouvez dire que la seule vraie différence est le temps de chargement, parce que la qualité est à peu près la même. Donc je vais aller avec le moyen 300 fois, 300 parce que c'est tout ce qu'il nous faut. La même chose ici. Moyen 300. La même chose ici. Moyen. 300 fois, 300. Et maintenant, nous avons tout mis à jour. Je vais aller de l'avant et cliquer sur la mise à jour juste ici et maintenant je vais descendre et cliquer sur changements d' aperçu, et nous allons voir à quoi ressemble le site Web et comme vous pouvez le voir, avez-vous vu ce temps de chargement ? C' était une grande différence. Des gars comme nous venons de finir ici comme ça et j'adore ça, et si vous faites défiler vers le bas, vous verrez qu'il n'y a pas de véritable perte de qualité. En fait, cette image pourrait avoir un peu beaucoup de qualité, mais pas trop mal, à mon avis, à mon avis, faire défiler vers le bas ce n'est pas une perte notable de qualités. Donc, la seule chose que vous pourriez vouloir faire serait d'augmenter la qualité de cette image , car ici, elle est un peu plus perceptible. Mais celui-ci n'a pas de perte notable de qualité. Que se passe-t-il ? Donc, je suis super heureux avec les résultats de cela. Mais ce que nous allons faire maintenant, c'est faire un nouveau test de vitesse et comparer les résultats. Donc je vais ouvrir dans un nouvel onglet, aller à temps qui viennent outils gratuits, test de vitesse. Et maintenant je vais juste monter sur notre site et commencer à tester. D' accord, les gars. Donc, les résultats sont arrivés. Et comme nous pouvons le voir, il y a une grande différence dans les résultats en ce moment. Donc, les résultats précédents, nous avons regardé quelque chose comme ça. Nous regardons un temps de chargement à 4,2 secondes. Maintenant, nous regardons un temps de chargement à 2,3 secondes. C' est presque la moitié encore trop, mais radicalement différent en ce moment, si nous regardons la taille totale, c'est en fait 1,1 mégaoctet. C' est une énorme différence par rapport à 2.7 maintenant, à mon avis, 1,1 mégaoctet est encore un peu trop parce que je veux être en dessous d'un mégaoctet. Donc, ce que je vais faire, c'est en fait les mettre à travers la compression. Quelques d'entre eux, par exemple. Je vais compresser cela plus loin tout en comprimant aussi un peu plus loin tout en augmentant peut-être la qualité de celui-ci, et puis je vais faire un test à nouveau et m'assurer que je suis en dessous d'un mégaoctet. Ok, mais c'est comme ça que vous optimisez vos images. Assurez-vous que votre site Web se charge beaucoup plus rapidement, mais il y a encore plus de problèmes, est-ce pas ? Donc, si nous regardons vers le bas, nous pouvons voir que nous avons le blocage de rendu d'élimination qui est en place ensuite, et nous allons passer par cela dans la prochaine conférence. Donc si je vais maintenant continuer et descendre pour optimiser les images, nous allons pouvoir voir quel est le problème, parce que apparemment nous pouvons économiser beaucoup d'espace pour voler. Si on économise autant, on va baisser de façon assez radicale sur la taille totale. Donc, comme nous pouvons le voir, nous pourrions encore avoir une énorme réduction dans le marketing numérique, le logo Amazon et le logo Shopify, n'est-ce pas ? On ne va pas s'inquiéter de ça parce que c'est sûr, si peu. Mais ici, nous pourrions en fait économiser plus de 100 sur 100 sur 200. Donc, ce que je remarque ici, c'est que ce sont des P et G réels. Droit ? Alors quoi, je vais aller de l'avant et faire avant de passer à éliminer le blocage de rendu, c'est que je vais aller de l'avant et vous montrer dans la prochaine conférence comment vous pouvez transformer les images PNG en J cochon afin d'économiser ah beaucoup de taille et nous allons aller bien en dessous de l'un mégaoctets. Ok, donc si vous savez déjà comment faire ça et que vous êtes amusant avec l'image de ma station, vous pouvez passer à la prochaine conférence. Mais si vous avez P et G faux et que vous avez besoin de redimensionner encore plus loin pour aller au-dessous de ça que de me rejoindre et de me suivre dans la prochaine conférence, et nous allons nous occuper de ce problème de taille, Casey, dans la prochaine conférence, les gars 4. Conversion PNG en JPG: d' accord. Dans cette conférence, nous allons aller de l'avant et convertir nos fichiers PNG en J cochon. Maintenant, si nous faisons défiler vers le bas, nous avons remarqué aux images optimisées ici qu'il y a ah beaucoup hors taille à réduire encore. Maintenant, on ne va pas gagner dans cette réduction parce qu'on n'utilise pas la pleine taille ces vignettes, est-ce pas ? Rappelez-vous ces air pleine échelle quand ils sont téléchargés, mais à la façon dont nous les utilisons pour nos produits ou pour nos cours, nous les fabriquons 300 par 300. Mais il va sans dire qu' il y a encore beaucoup d'espace que nous pouvons économiser. Donc on va aller de l'avant et transformer nos fichiers PNG, qui sont ces trois fichiers en J pack. Parce que généralement cela peut même faire la taille d'environ la moitié. Donc, nous avons vraiment besoin de cela à ce stade parce que nous voulons passer à moins d'un mégaoctet. Donc je vais y aller et aller au PNG sur le site de communication de points de cochon. C' est dans la ressource est hors cours, et je vais cliquer sur télécharger des fichiers, et puis je vais choisir mon fichier, qui est l'Amazon, le numérique et les Shopify. cliquez sur les chaussures et puis je vais juste aller de l'avant et cliquez sur télécharger. Tout va bien, donc j'ai ajouté dans le fichier sip et je vais juste double-cliquer dessus comme ça, ils allaient y aller. Et maintenant je peux supprimer le fichier malade, et je vais aller de l'avant et prendre ces images, mettre dans le même dossier ci-dessous, vais supprimer ce dossier, et je vais vraiment aller de l'avant et supprimer ces images PNG maintenant parce que nous n'avons pas besoin d'eux. Ici, nous avons notre nouveau cochon J. Et si tu les regardes par exemple, celui-là et celui-là, je vais juste les ouvrir. Vous pouvez voir qu'il n'y a littéralement aucune perte de qualité. Maintenant, la seule chose que je remarque, c'est qu'il y a une sorte de différence. Si vous regardez de très près l'or sur la puce en arrière, il semble que quelque chose se passe quand je change. Donc c'est une extrême mineure, surtout si on va utiliser ça 300 par 300 donc on n'en a pas besoin. On va aller de l'avant et enlever les PNG Amazon et on y va. Ils sont partis maintenant. Je vais en fait les mettre à travers la compression une fois de plus parce qu'avec le J peg remarquerait que si on les comprime encore plus d'informations, on va aller de l'avant et faire ça maintenant. Donc je vais retourner au compresseur d'images ou optimiser Cilla comme il est aussi connu comme j'aime ce nom. Et je peux télécharger des fichiers ici. Et puis je vais les choisir, qui sont maintenant dans J cochon là-bas. Et puis le Shopify un bon et long peut choisir. Je vais faire défiler vers le bas, et maintenant nous pouvons réduire la qualité un peu déjà. Donc, je vais juste l'essayer. Peut-être en cliquant sur 25. Nous pouvons voir qu'ils sont clairement une perte de qualité. Mais nous devons nous rappeler, ça va être 300 par 300 donc il y aura un très, très peu de changement à ça. Donc, je suis un 25. Vous pouvez voir l'original refusé à 52, ce qui est une énorme différence. Je crois que le précédent sera assis autour de 100 donc ont vraiment abaissé la taille en faisant cela dans un J peg et la qualité 25. Maintenant, encore une fois, vous pouvez réellement voir qu'il y a une qualité perdue en cours. Il n'y a aucun doute là-dessus. Mais on va utiliser ça comme une miniature, donc je crois que ça ira bien. Je vais en fait utiliser ce 25 rapide et appliquer. Je vais faire la même chose ici. On va le ramener à 25 pour voir ce qui se passe. Oui, il y a aussi une perte de qualité ici. Mais je vais appliquer ça parce qu'ils seront si petits. La même chose ici. Cliquez sur Appliquer. Et si c'est juste trop mauvais, si ça ne marche pas, alors il tire à nouveau l'original et refait le processus. Je ne vais pas cliquer sur télécharger tout. Voici le fichier sip. Je vais double-cliquer sur ce fichier de gorgées ici. Et puis nous avons la compression d'image, d' accord. Je vais enlever celui-là. Je vais les sortir et les mettre dedans. Mettons-le en bas ici. Et je ne veux pas mélanger ça, donc je vais juste leur donner un nouveau nom rapidement. Bon, maintenant ils ont tous un nouveau nom. C' est vraiment sympa. Je vais aller de l'avant et retourner sur le site. Je vais aller chez nous ici, et je vais cliquer sur éditer avec L. A mentor. Maintenant devrait également vous faire savoir que j'ai pris la liberté d'utiliser les images d'arrière-plan précédentes et en fait les compressés un peu plus loin. Je crois que j'ai utilisé au début 70 ou 75. Maintenant, je suis descendu et les ai compressés à 60 et en comparant toujours l'original avec la compresse, ce que vous pouvez toujours faire. y a toujours pas de perte de qualité chez qui que ce soit en dehors des photos. Pas même en fait ce contexte que je pensais avoir une perte. Il ne l'a pas fait. Donc c'est une bonne nouvelle. Donc on va aller de l'avant et je vais cliquer sur celui-ci ici, puis cliquer ici, cliquer sur télécharger des fichiers, sélectionner des fichiers. Ça va être un peu plus facile à trouver maintenant parce qu'il a un nouveau nom, non ? Donc maintenant celui-ci est en fait 26 kilo-octet. C' est super minuscule, et on peut voir ça comprimé avec smarts, ce qui arrive automatiquement. Il devient 25 kilo-octets et nous pouvons voir le précédent. J' avais 116 raison, parce que c'était un PNG. Donc nous avons économisé beaucoup de taille en faisant beaucoup de taille à ces gars. Donc je vais aller de l'avant et cliquer sur Insérer Media. Et comme vous pouvez le dire, il n'y a pas de perte de qualité parce qu'il est si minuscule. Je vais faire la même chose ici, cliquer dessus, cliquer dessus télécharger le fichier, sélectionner le fichier. Je vais aller au magasin si je suis cochon comprimé. Maintenant, celui-ci a 12 ans. Ça pourrait devenir 11 ans. Non, il est toujours 12 et le précédent était 82. Donc énorme différence de taille qui se passe ici, et je vais faire la même chose avec cette Amazon, qui est le dernier téléchargement Trouver la compresse J cochon, qui est 14 pourrait devenir 13, c'est comme un pari, vous savez, Je devine juste comme ça. Non, il est encore 14 ans. La précédente était de 75. Grande différence de taille. Maintenant, 14 75. Ils ne sont pas gros, mais ce genre de gestion sur beaucoup d'images qui va vous faire économiser beaucoup d'espace. Si tu penses que 14 à 75 en maths n'est pas si impressionnant. Mais je pense que l'épargne, comme quatre ou cinq fois décisive, est une énorme différence. en ce sens. Donc, comme nous pouvons le voir, il n'y a pas de perte de qualité réellement visible parce qu'ils sont si petits. Je vais aller de l'avant et cliquer sur les mises à jour. C' était donc nos résultats la première fois que nous avons fait le test. Ensuite, nous avons refait le test. Nous avions 1,1 mégaoctet. Maintenant, nous allons faire le test une fois de plus et le comparer au dernier quand nous aurons optimisé le cochon P et G T J. Je vais aller au temps, cliquer sur les outils gratuits, aller au test de vitesse, et je vais écrire sur notre site, puis commencer à tester. Et rappelez-vous, nous restons à regarder cette taille en ce moment et vérifiez ceci. Les gars, vraiment, très bonnes nouvelles. Cette taille est absolument incroyable. Donc, nous sommes maintenant descendus à 465 kilo-octets alors qu'avant nous étions en réalité à 1,1 méga-octets . Donc, nous avons eu une grosse réduction après tout, de les tourner de P et G à J peg, même avec la compression et tout ce qui se passe. Donc, cela nous a économisé beaucoup d'espace, et nous avons optimisé toute notre page d'accueil en ce moment et regardez la vitesse de chargement étaient en fait le chargement à une seconde. C' est la moitié de la règle des deux secondes. Maintenant, il y a encore beaucoup de bonnes choses à faire. Par exemple, nous voulons toujours éliminer le JavaScript bloquant le rendu, ce que nous allons faire lors de la prochaine conférence. Mais même si Onley l'a fait en ce moment, nous avions une vitesse de chargement d'une seconde et un site total hors dessous de 0,5 mégaoctet. Alors ce serait incroyable. Encore une fois, en regardant Pat complètement et il est plus grand. Mais il y a aussi plus de choses sur son site Web. Mais cela est au-delà de l'incroyable. Donc, même s'il a une plus grande taille est toujours chargement plus rapide et c'est parce qu'il a moins demande et qu'il a bien pris soin de son site Web et nous faisons la même chose. Donc, nous allons continuer et optimiser davantage notre site Web. Mais nous avons réussi à réduire la taille totale en optimisant nos images et en regardant les vôtres dès maintenant, vous pourriez toujours avoir celle-ci. Words a optimisé les images car il y a encore du travail. Si nous voulons que vous fassiez, par exemple, nous avons toujours le logo que nous pourrions compresser. Fait intéressant, il est toujours dit que nous pourrions économiser de l'espace sur ces images directement sur les images de personnes , même si c'est si petit, dit-il, nous pourrions économiser de l'espace sur le numérique sur l'Amazon et sur le Shopify, et cela peut être vrai. Nous pourrions probablement le compresser de plus en plus loin et de plus en plus. Mais honnêtement, c'est une très bonne taille. Comme je vous l'ai dit tout à l'heure, si vous pouviez obtenir 0,5 mégaoctets, ça va être incroyable. Cela peut être difficile à garder si vous continuez à développer et ajouter plus de choses à votre page d'accueil, mais c'est toujours une taille vraiment, vraiment bonne. Vous voulez être en dessous d'un mégaoctet. Si vous pouvez aller en Syrie 10,5 mégaoctets, c'est incroyable, et vous ne voulez pas devenir fou là-dessus non plus. Rappelez-vous, tout est question de l'équilibre entre l'interface utilisateur et l'utilisation de l'expérience, et je pense que maintenant nous les avons compressés plus que suffisant, et je suis super heureux. Donc deux choses à retenir. Tournez vos P et G en J pick et les compresser tous. Si vous avez écrasé cela va être facile smushed la version premium, c'est. Mais si vous ne le faites pas, vous pourriez aussi bien utiliser les outils. Et la ressource est juste prend un peu plus de temps, mais il est complètement gratuit. Alors passons à autre chose. Installez le problème suivant, voir dans la prochaine conférence les gars. 5. Supprimer le blocage du rendu de JavaScript et CSS: D' accord, les gars. Donc, dans cette conférence, nous allons aller de l'avant et passer au prochain numéro que nous avons avec notre site Web afin de le rendre plus performant et plus rapide. Maintenant, la prochaine chose pour nous de passer à son sous l'onglet de performance et il est celui-ci et il dit éliminer le blocage de rendu JavaScript et CSS dans le contenu par défaut ci-dessus. Ok, alors disons ça. L' eau ceci maintenant JavaScript est un ordinateur. langue est la langue que l'ordinateur et le navigateur Web comprennent. Et JavaScript est fondamentalement ce qui exécute les nombreux effets sur notre site Web que ce signe de notre site, n'est-ce pas ? Vous voyez, Assesseur, l'entraîneur que nous avons utilisé pour faire différents changements sur un site Web comme si nous utilisions un certain code pour notre formulaire de poète. Nous avons utilisé un code pour un menu collant, etcetera ces codes s r C qui sont des codes. Maintenant. Le problème avec cela est qu'ils sont rendus de blocage. Alors, qu'est-ce que le rendu me bloque ? Cela signifie que ceux-ci doivent s'exécuter avant que le site ne puisse se charger correctement, n' est-ce pas ? Et ils prennent leur temps d'exécuter. Et parce que cela prend un certain temps, cela augmente la vitesse de chargement. Donc, ce que nous voulons faire est d'éliminer le rendu bloquant JavaScript et CSS au-dessus du contenu du pli . Et la raison pour laquelle nous voulons seulement l'éliminer au-dessus du contenu complet est parce que lorsque vous chargez un site Web n'a pas vraiment d'importance combien de temps il faut pour que tout cela soit chargé ou tout cela parce que la seule chose que vous verrez sur votre site Web ou sur votre mobile si vous chargez le site Web là sur votre écran va être le ci-dessus le contenu complet. Donc, tout ce que vous voulez charger le plus rapidement possible. Alors allons de l'avant et éliminons ces JavaScript est et ceux voient évaluations. Donc ce qu'on va faire, c'est passer à notre tableau de bord parce qu'on va utiliser des plug-ins pour ça, et ensuite on va continuer à tester pour s'assurer que nous obtenons les réponses que nous voulons. Maintenant, nous allons passer aux branchements et cliquer sur ajouter un nouveau branchement, et nous allons chercher des souris de l'équipe automobile. Il semble un peu comme à optimiser, mais il n'a qu'un seul Oh, donc il est espéré optimiser auto sorte d'une bouchée. Donc, c'est là. Il a plus de 900 000 installations actives, et il va nous aider avec le JavaScript et CSS. Donc on va aller de l'avant et l'installer, puis je vais cliquer sur Activer. Et maintenant on va passer aux réglages. Et c'est là que nous commençons à activer les différentes fonctions. Donc, nous sommes également en mesure d'optimiser le HTML même si nous n'avons pas de problèmes avec que stations d'optimisation, Général tentative d'être bon. Vous pouvez donc décider vous-même si vous voulez activer cela ou non. Maintenant, nous avons les options JavaScript et la CIA dit options. Donc je vais aller de l'avant et cliquer sur celui-ci, et je vais aller de l'avant et cliquer sur celui-ci aussi pour qu'ils soient optimisés. Ensuite, je vais cliquer sur enregistrer les modifications. Maintenant, si nous regardons en arrière et nous regardons nos résultats de test ici et que je clique ici, nous pouvons voir qu'il y a quatre JavaScript, leur réservation et 18 CSS. La ressource est maintenant parce qu'il y a tellement de saisons. ressource est l'auto optimisé n'est généralement pas assez sur son propre pour prendre soin de tous d' entre eux. Alors quoi ? Je vais aller de l'avant et faire aussi. Il se déplace une fois de plus pour brancher et cliquez sur Ajouter nouveau. Et maintenant je vais chercher les yeux de thème auto à nouveau. Je veux dire, ce mot, c'est vraiment dur à dire. Et maintenant je vais utiliser leur vieux branchement appelé CSS critique. Maintenant, ce que cela va faire est de prendre soin de encore plus de CSS et encore plus spécifiquement de ce qui précède le pli CSS. Donc je vais aller de l'avant et cliquer sur Installer maintenant et puis je vais cliquer sur Activer Perfect . Il est installé. Maintenant, pour y arriver, tout ce que nous avons à faire est d'aller à l'auto, optimiser ici et de cliquer à nouveau sur les paramètres parce que c'est la même entreprise qui le fait va être ajoutée. Vous pouvez voir ici il dit CSS critique. Mais il sera également ajouté dans le principal et c'est là que nous avons les principales caractéristiques. Donc maintenant, nous sommes ici et nous avons le CSS critique ajouté et il sera ajouté dans le principal. Si vous ne voyez pas ces changements, tout ce que vous devez faire est de cliquer sur le bouton d'actualisation ici et il se résoudra lui-même. Maintenant, il y a une chose particulière à faire ici, c'est de faire défiler vers le bas. Et nous allons voir qu'il y a quelque chose ici. Ceci est en ligne au-dessus du pli CSS lors du chargement principal sur mon C dit Onley après le chargement de la page . Donc, nous voulons, particulier le pli ci-dessus, contenu pour avoir leur CSS optimisé et la façon dont beaucoup de plug-ins le font, même si c'est un peu d'informations supplémentaires, c'est qu'ils préfèrent mettre le CSS dans le pied de page. Et on sait que la photo est en bas, non ? Donc ça veut dire que ça va se charger plus tard. Mais cela n'a pas d'importance parce que ce qui est important est que la section de pliage ci-dessus se charge le plus rapidement possible parce que la seconde qui descend cette seconde, votre site Web devient disponible et les visiteurs peuvent commencer à utiliser, et cela va prendre quelques secondes, et d'ici là le reste du site aura déjà été se charger et fonctionner. Alors quoi ? Je vais aller de l'avant et faire ici, en fait, pour obtenir le CSS d'au-dessus du pli. Il a utilisé un site appelé Side Low City. Et je vais mettre ça Bien sûr, dans la ressource est pour que vous puissiez facilement l'attraper. Maintenant, tout ce que nous devons faire ici, c'est juste, notre site Web comme ça. Et puis cliquez sur Générer chemin critique. Voir évalué. Et cela va nous donner tous un pour au-dessus du pli CSS. C' est de l'or. Honnêtement, et maintenant on fait défiler vers le bas et on va tout avoir ici. Tu as juste besoin de cliquer sur celui-là. Tout va se sélectionner, non ? Cliquez, et je vais faire face à ça. Ok, maintenant, je vais retourner à Auto Optimize ici, et je vais le coller dedans. On y va. Et maintenant, je vais faire défiler tout le chemin vers le bas et cliquer sur Enregistrer les modifications. Les paramètres ont été enregistrés. Alors que veux-tu faire maintenant ? Eh bien, bien sûr, nous voulons faire un nouveau test pour nous assurer qu'il se charge correctement et que nous avons moins demandes et nous pouvons voir que ces problèmes disparaissent. Je vais juste écrire sur notre site ici, puis cliquer sur commencer à tester et comme nous pouvons le voir , il y a beaucoup d'améliorations vraiment intéressantes en cours. Regarde ça. Nous demandons sont descendus à 31. Est-ce qu'on voit la précédente maintenant ? La précédente avait 60 demandes en cours, et maintenant celle-ci en a 31. Maintenant, la taille totale verra a aussi baissé, mais j'ai remarqué que cela charge des tailles légèrement différentes. Ce qui est important à savoir, c'est qu'il est sous un mégaoctet , ,c'est assez bien en dessous d'un mégaoctet et que la vitesse de chargement s'est améliorée, ce qui est incroyable, et c'est le chargement depuis Londres Royaume-Uni. incroyables, statistiquesincroyables, absolument incroyables. heure actuelle, notre performance est passée de 56 à 63. Mais le plus important, allons voir ça. Nous pouvons voir que le seul problème en ce moment est que nous avons un JavaScript bloquant et c' est le chœur G. Il point gs, et en fait celui-ci est généralement les thèmes JavaScript. Donc, le thème veut se charger avant d'exécuter et de montrer le site Web, et il y a des moyens de contourner cela. Mais honnêtement, après mon expérience, ce n'est pas un problème. Si vous avez un thème qui veut vraiment utiliser ce JavaScript et ne pas le reporter. On peut utiliser celui-là. Donc je vais laisser ça, et je suis vraiment super content de ces statistiques. Maintenant, les gars, si vous avez installé ces plug-ins et que vous avez toujours javascript, qui sont problématiques ici, il y a une autre chose que vous pouvez faire. Maintenant. Si vous n'avez pas ce problème, vous pouvez passer à la prochaine conférence. Mais si vous le faites, restez là et je vous montrerai. Donc on va retourner ici et on va déménager et installer un autre branchement . Je veux dire, s'il y a un problème, il y a un blog, non ? Donc on va cliquer sur ajouter un nouveau, et maintenant on va chercher un évier. JavaScript. Et nous y voilà. Et nous allons cliquer sur installer. Maintenant. On n'a pas besoin de ça. C' est à des fins de démonstration, non ? Et puis je vais cliquer sur activer, et puis nous allons passer aux paramètres, et puis tout ce que vous devez vraiment faire est d'aller de l'avant et de cliquer sur activer face à javascript , puis défiler vers le bas et enregistrer les paramètres. de , Avantde passer à autre chose,il y a quelques choses que je veux te montrer. Il y a deux façons différentes d'utiliser le JavaScript de course. Soit vous avez mis en file d'attente un puits, soit vous pouvez reporter le JavaScript et les différences avec le boîtier qui va permettre au JavaScript de s'exécuter dès qu'ils ont chargé. En d'autres termes, chaque fois qu'il y a quelque chose sur votre site Web chargement, vous allez juste laisser cela apparaître sur l'écran avant que tout le reste ne soit fait correctement ? Le problème avec cela est que si les mauvaises choses se chargent trop rapidement, votre thème va se rompre. Vous allez voir, genre, genre, cette version vraiment moche de votre site Web pendant environ une demi-seconde, et ensuite tous les effets sous la science et tout va être appliqué. Et ce n'est pas une grande chose. Donc, pour certaines personnes et certains thèmes et site web, le A pense que ça ne va pas marcher. Eh bien, c'est là que vous pouvez utiliser pour reporter et le report qui signifie que vous allez récupérer toutes ces charges ensemble. Et quand tous les plus importants pour les grands looks seront tous faits, alors ils exécuteront. Vous obtenez ce plus grand regard sur votre site maintenant. Le problème avec cela est que parfois c'est un peu plus lent, mais vous ne voulez jamais casser votre thème sur le chargement. Alors, comment savez-vous lequel utiliser aussi simple, en fait, en fait, parce que nous avons déjà ce temps de faire les tests d'abord afin que nous puissions les vérifier ici et tout ce que vous avez vraiment besoin de faire est d'aller de l'avant et de prendre un onglet privé et secouer sur votre site Web. Accédez à votre site Web. Si l'évier A ne fonctionne pas, alors optez pour la différence. Fais juste ce qui marche, est ça. Vous allez voir si votre site Web, si votre thème est en rupture. Si c'est le cas, ça ne marche pas correctement. Alors, les gars, c'est tout. C' est ainsi que nous résolvons le problème du blocage de rendu JavaScript et CIA dit ci-dessus le contenu de pliage. Donc, notre site Web devient de mieux en mieux, plus rapide et plus rapide. Passons à la prochaine conférence, accord ? Et si vous avez des questions hors cours, et, comme toujours, sera dans le Q et A C dans la prochaine conférence 6. Réduire le temps de réponse du serveur: Bon, les gars, Bienvenue maintenant, on est déjà loin. À présent, nous avons pris le temps d'optimiser toutes nos images pour économiser l'abondance hors taille. Nous avons également pris de l'avant et éliminé notre rendu bloquant JavaScript et CSS pour le contenu de pliage ci-dessus . Maintenant, Maintenant, comme vous pouvez le voir, cela réduit le temps de réponse du serveur. Maintenant, ces Air Poutine supérieur Kim. qui signifie qu'ils veulent cela en haut, plus à gauche. C' est celui qui a la plus grande priorité. Le plus gros problème, si vous voulez. Donc, actuellement, nous n'avons pas un très bon temps de réponse du serveur. Si nous cliquons dessus, nous pouvons voir qu'il est à 0.78. Et bien sûr, cela dépendra aussi de l'endroit où vous l'essayez en ce moment. Nous l'essayons depuis Londres, et si nous revenons et nous avons essayé le plus tôt et que nous vérifions que c'est notre tout premier test , beaucoup de choses se sont passées depuis lors. Nous pouvons voir que cela a pris environ 1,1 seconde. Maintenant, c'est beaucoup de temps à attendre pour même mettre votre serveur en marche, ou plutôt, pour avoir une réponse du serveur. Allons donc plus en profondeur à ce que cela signifie réellement, ce que nous pouvons faire à ce sujet. Alors commençons. Alors pourquoi dites-vous le temps de réponse du serveur ? Eh bien, pour savoir ce que c'est, nous devons savoir comment. Quoi ? Il est mesuré maintenant c'est la réponse du serveur. Le temps est mesuré par quelque chose appelé titi FB. C' est l'heure de la première morsure, non ? Donc, chaque fois que votre utilisateur vient sur votre site Web, il va mesurer combien de temps il faut avant qu'il ne reçoive sa première bouchée. La première information, ce moment-là, vous savez, elle provient de kilo-octets, méga-octets , gigaoctets, etc. Donc, quand ils ont reçu leur première morsure, c'est quand le serveur a envisagé de donner une réponse. Et pour nous, en ce moment, c'est 0,8 seconde et nous avons eu jusqu'à 1,1 2e avant même que l'utilisateur reçoive une réponse pour télécharger quoi que ce soit. Et c'est long, les gars. Voyons pourquoi c'est et ce qu'on peut faire à ce sujet. Donc, le plus courant publié, si nous voyons de la manière la plus facile de le résoudre, est en regardant le serveur hôte. La ressource est correcte, donc un hôte va avoir plusieurs serveurs différents d'où vous mettez tous les trucs de votre site Web sur. Et plus vous disposez d'espace sur ce serveur, plus vous pouvez utiliser, par exemple, des plug-ins exigeants. Ajouter mawr sur vos objets, etcetera, etcetera, et cela va dicter combien de temps le temps de réponse est. Maintenant, on utilise l'hôte bleu, est-ce pas ? Et si nous regardons leur site web, nous pouvons voir qu'une paire qui va à l'hébergement il y a trois sections différentes en cours maintenant. Nous utilisons l'hébergement partagé en ce moment, et je vais expliquer la différence entre ces trois et pourquoi ils comptent. Et je vais expliquer d'une manière que j'ai appris et je pense que c'est vraiment, vraiment en train de remettre. Donc, l'hébergement partagé est fondamentalement comme avoir dans l'appartement en ce moment. Plus il y a de gens dans l'appartement, moins vous avez d'espace parce que vous partagez tous le même espace. L' hébergement partagé est de la même manière. Donc, vous avez un serveur et ils vont juste mettre un tas de gens dans ce serveur et moins de gens. Il y a plus d'histoires spatiales pour vous et votre site Web. Plus il y a de gens, moins il y a de pâtisseries pour vous et plus le temps de réponse sera lent , et ensuite nous avons les vice-présidents. Maintenant, VP, c'est comme vivre dans un dortoir. Vous allez avoir votre propre chambre, votre propre espace, et c'est à vous de décider combien vous décidez d'utiliser cet espace. Mais vous aurez toujours un certain espace disponible. Maintenant, c'est très similaire avec les VP parce que vous avez un serveur et vous allez avoir une certaine quantité de CPU, une certaine quantité de RAM, et ce sera à vous de décider combien l'utilisation de ça. Alors il y aura une limite, mais vous n'êtes pas dépendant de quelqu'un d'autre qui l'utilise. Peu importe le nombre de personnes dans la maison, parce que vous avez encore votre propre espace. Et enfin, nous avons l'hébergement dédié, et c'est fondamentalement comme posséder la maison entière vous-même, non ? C' est tout toi. n'y a personne d'autre que vous obtenez tout l'espace, vous obtenez toute la disponibilité pour vous-même. Mais comme vous pouvez l'imaginer, c'est ce que Bref, il y a des hypothèques. Il y a un loyer, etc., et de même, et de même, quand vous possédez le serveur entier, il y aura plus de coûts donc il y a un donjon plus élevé pour combien ces trois coûts et l'hébergement partagé hors cours étant le moins cher parce que vous partagez tous les VP étant plus cher et l'hébergement dédié étant de loin le plus cher. Maintenant, ce ne sont généralement nécessaires que les VP et dédier er er er, si vous avez beaucoup de trafic en cours et dédié, c'est surtout si vous avez une quantité extrême de trafic en cours. Imaginez ces énorme site de commerce électronique. Ils pourraient avoir besoin de l'hébergement dédié. Et aussi, si nous allons à l'hébergement partagé, avons en ce moment, nous pouvons voir qu'il y a des mises à jour. Maintenant, même avec la mise à niveau pro, nous obtenons des performances élevées, ce qui signifie que si nous avons là-bas, cela dit des densités de serviteurs plus faibles. Donc, votre site Web a plus de ressources est disponible, et c'est vraiment ce qu'il s'agit. La ressource disponible est pour vous et votre site Web qui va dicter la vitesse du serveur. Ok, donc c'est ce que Madison le plus quand il s'agit de temps de réponse de votre serveur. Mais bien sûr, nous ne sommes pas seulement limités aux chevaux, beaucoup de choses que nous pouvons traverser, mais laissez-moi passer et approfondir la raison pour laquelle c'est et aussi ce que nous pouvons faire à ce sujet maintenant. La raison en est que Blue Host fait partie d'un groupe appelé E. I G. Endurance International Group. Et fondamentalement, c'est une grande, grande, grande société qui possède beaucoup de société d'hébergement comme l'hôte Gator, etcetera , etc. Vous jetez un oeil à leur, a dit Wikipédia. Vous pouvez voir qu'ils possèdent. Je pense que c'était comme 83 sociétés d'hébergement différentes en ce moment, et c'est énorme. Mais cela signifie aussi qu'il y a, ah, beaucoup de gens qui sont emballés dans des serveurs assez petits, qui est ce qu'ils font. Mais nous devons savoir qu'il y a d'énormes avantages pour Blue Host. Je vais vous montrer comment optimiser les serveurs hôtes bleus avec ce que nous avons, et ensuite vous allez voir quels sont les autres avantages des hôtes bleus maintenant. J' aime Blue Host utilisent Blue House depuis un certain temps, même Pat Flynn, que nous avons imité jusqu'à présent j'ai appris de Il utilise l'hôte bleu et c'est parce qu'ils ont tellement plus d'avantages. Pas tout sur les gars de la vitesse. Donc, l'autre chose, nous pouvons aussi aller de l'avant et faire, ce que nous avons déjà fait est optimisé stations telles que la fixation de nos prises. qui veut dire qu'on met toutes nos affaires dans une prise. Et puis le mettre à l'ordinateur de l'utilisateur afin qu'ils n'aient pas à télécharger, par exemple sont les en-têtes sont des images sont des fonds ou décide etcetera. Chaque fois plutôt va être sur leur ordinateur, sorte que la vitesse de chargement est augmentée. Aussi faire les images plus petites compressions, etcetera. Il suffit de rendre votre site Web plus léger. D' accord. Mais peut-être la chose la plus importante et la chose la plus importante que nous puissions faire pour accélérer le temps de réponse de notre serveur est de rapprocher notre serveur du Yusor. Et nous allons le faire à travers quelque chose appelé CD et réseau de diffusion de contenu. Maintenant, pour le réseau de diffusion de contenu, vous le savez peut-être déjà, mais ils sont aussi importants. Et il y en a trois dont je veux que vous sachiez. Maintenant, si vous utilisez l'hôte bleu comme nous le sommes, vous aurez quelque chose appelé site semble CDN déjà disponible pour vous dans les panneaux hôtes bleus . Je vais vous montrer comment activer ce que sur SSL est Comment fonctionne la cellule, etcetera dans la prochaine conférence. Mais il y a une chose que vous alliez vous montrer comment activer maintenant peut-être la plus grande quand il s'agit d'un CD M gratuit est Cloudflare. Alors aux prochaines élections, je vais vous montrer comment utiliser Cloudflare aussi. Si vous voulez utiliser ce service que vous allez probablement vouloir et je vais expliquer pourquoi dans un peu et puis finalement nous avons Max Cdn, qui pourrait être le cdn le plus populaire de la capacité du centre commercial. Ils ont les serveurs les plus dédiés autour, mais ils coûtent aussi. Mais je veux que vous sachiez que si vous prévoyez de dépenser de l'argent pour ça, je recommande Max Cdn. Donc, en d'autres termes, en ayant ces différents réseaux de diffusion de contenu, nous allons mettre notre site Web sur différents serveurs à travers le monde. Donc, si vous avez quelqu'un qui vient d'une certaine partie de l'Asie, par exemple aller sur votre site Web, alors ils vont charger votre site Web à partir de ce serveur asiatique qui va être tellement plus rapide que de le charger à partir de. Par exemple, Utah, je crois hôtesse bleue située dans l'Utah en Amérique. Et c'est ainsi que nous allons accélérer notre site Web en utilisant tous ces différents serveurs . Il va donc sans dire que plus ils sont de service dédié, plus les réseaux de diffusion de contenu sont élevés, mieux c'est généralement. Cloudflare a de loin le plus quand il s'agit d'un cdn gratuit, et Max Cdn a de loin le plus que je crois juste et fin de l'histoire. Mais ils coûtent aussi. Donc nous allons aller de l'avant et mettre cela en place dans les prochaines conférences, et cela va considérablement améliorer le temps de réponse de notre serveur. Maintenant, il y a encore une chose que nous allons aller de l'avant et vérifier que c'est si important et souvent négligé. Et c'est notre maison et notre côté. Tu es moi et ce que je veux dire avec ça, c'est comment on s'en sort. Donc, par exemple, nous pourrions avoir notre http Et puis nous avons la barre oblique avant deux-points avant slash robin et jesper dot com. Mais si nous utilisons sur SSL, ce que nous allons parce que c'est si important pour S PDG et aussi pour la sécurité, ça va ressembler à https Colin Colin Slash avant slash robin et jesper dot com. Mais cela signifie aussi que si quelqu'un va au côté http normal, il doit d'abord être redirigé vers le site H T. T. P. Droit ? Et cette redirection va nous coûter un temps de réponse précieux au serveur, et nous ne voulons pas cela. Donc, chaque fois que nous sortons de leur site Web et le mettons sur le web, nous devons nous assurer que nous mettons le bon ur. Et ce que 80 DP est un 82 P, nous allons aller plus dans la prochaine conférence. Mais https, je peux dire que je peux parler un peu parce que ça va être à propos de la sécurité de votre site Web. Vous avez besoin de cette sécurité pour un PDG pour des raisons de sécurité évidentes, et il signifie que le S signifie réellement la sécurité et viennent de la SSL Plus à ce sujet dans la conférence à venir. Mais nous avons aussi plus de choses telles que Si vous utilisez w w dot Robyn et jesper dot com, ou il va être www dot votre site Web dot com, Mais vous avez réellement défini votre site Web pour simplement Robin et jesper dot com. C' est la même chose ici. Cela signifie que si quelqu'un entre sur votre site Web en utilisant la double utilisation, il doit d'abord être dirigé vers l'u. R L sans les W et que cela va également coûter un temps de réponse du serveur. Donc, pour réduire cela, ce que nous devons faire est de nous assurer que nous donnons le bon de votre l. Par exemple, si nous faisons des liens depuis notre Facebook, si nous lions notre contenu ou différents sites Web, etcetera, et assurez-vous que nous sommes dans le classement correct de votre autre, et nous allons voir comment faire cela dans la prochaine conférence. Dans la prochaine conférence, je vais vous montrer comment obtenir les https, que vous avez probablement déjà. Mais si rien ne vous montre comment l'obtenir et aussi comment activer ce site, regardez, C d m. Alors voyez, dans la prochaine conférence, les gars, 7. CDN sur le SiteLock SSL: D' accord. Bienvenue dans cette conférence, nous allons aller de l'avant et nous assurer que vous avez votre ssl activé et aussi comment désactiver si vous le voulez. Et aussi, je vais vous montrer comment activer ce site. Écoute, cdn. Maintenant, si vous n'utilisez pas d'hôtes bleus comme hôte, vous pouvez aller de l'avant et sauter cette conférence et passer à la prochaine parce que c'est Onley va s'appliquer aux utilisateurs de l'hôte bleu. Ok, alors passez à la suivante, nous allons passer par SSL et CD et plus en profondeur et ensuite trouver une solution alternative. Donc on va commencer E chez Blue Host qui vient ici et ensuite on va cliquer sur un journal parce qu'on va aller voir le S S S S L Donc on est là. Et maintenant on va aller sur le marché, et ensuite on va cliquer sur Adams et en bas, vous allez voir quelque chose qui s'appelle les certificats SSL. Maintenant, si je clique ici, je vais entrer dans ce site et vous pouvez voir qu'il dit aussi SSL est activé. Cela signifie que nous avons notre SSL activé à nouveau. Si vous êtes toujours confondu avec SSL, ne vous inquiétez pas à ce sujet. Nous allons en parler plus à ce sujet dans la prochaine conférence, mais sachez que c'est super important pour la vente de sécurité et essentiellement de classer et d'être en sécurité. Donc je sais que c'est allumé. Et cela devrait aussi signifier que si je vais à Robin et Jesper dot venir, je vais avoir ce petit look de pad se passe ici et si et cela signifie aussi que je suis sécurisé parce que le cadenas est la cellule signifie que j'ai sur Http ses sites Web. Si je clique ici, vous pouvez voir qu'il dit h T P s. Maintenant, si je n'avais pas cela, il serait soit juste dire, http ou il pourrait juste ressembler à ceci et il n'y aurait pas de cadenas. Maintenant, laissez-moi vous montrer un exemple. Maintenant, il y a un site qui s'appelle White Trainer. Si j'y vais, la première chose que vous allez remarquer, c'est qu'il n'y a pas de look de pad qui se passe. Et si je clique sur enfant, il n'y a pas de http s. Donc, ils n'utilisent pas un certificat SSL, qui signifie que ce ne sera pas sûr et il ne va pas se classer correctement aussi bien qu'il pourrait. Nous allons approfondir ces choses dans la prochaine conférence et vous montrer pourquoi et comment ça marche. Donc c'est pour le S s L. Maintenant, laissez-moi vous montrer aussi aider à activer le site. Regardez, voyez-les parce que c'est l'une des fonctionnalités merveilleuses qui vient avec Blue Host First obtiendrait le SSL gratuit, ce qui est génial. C' est vraiment, vraiment bon. Et nous obtenons aussi un cdn gratuit. Donc, ce que nous voulons faire, c'est être dans nos droits à domicile ici. Et puis on va aller au tableau de bord. Et maintenant on va passer à Blue Host et on va cliquer sur la performance. Et puis on va passer à C. D. M. maintenant. Depuis que j'ai joué avec ça avant, ça dit que nous sommes en train de configurer votre CDN. Ce n'est pas vrai. Je l'ai désactivé. Mais pour vous, ça va dire qu'il a agi sur notre affaire, activé, désactivé les choses qui vont rester allumées et désactivées. Mais c'est super important pour vous de le savoir. Sauf si vous avez réellement acheté sur SSL, vous ne pouvez pas activer cela Et la raison en est que le SSL que nous avons ici, le SSL gratuit est Onley va fonctionner pour votre site web via Blue Host. Ok, donc parce que nous utilisons le serveur hôte bleu, nous pouvons utiliser sur le certificat SSL. Mais si nous utilisons un CDN, cela signifie que nous allons utiliser les serveurs de quelqu'un d'autre. Et si nous utilisons les serveurs de quelqu'un d'autre, nous n'utilisons plus de serveurs hôtes bleus Et si nous n'utilisons plus de serveurs hôtes bleus, nous n'obtenons pas le certificat SSL gratuit. OK, donc ça veut dire que si tu cliques sur ça, tu perdras face à SL. Vous ne serez plus https et ça ne vaut pas la peine, les gars. Mais c'est parfait. Si vous avez déjà été dans le jeu et que vous avez déjà un SSL actif, alors vous pouvez aller de l'avant. Vous pouvez activer cela parce que le site semble cdn. C' est en fait très puissant et très sécurisé. Mais pour les autres mortels qui utilisent encore celui-ci, le SSL gratuit, nous n'allons pas activer ce site. Ecoute, Cdn, ce que nous allons faire est en fait utilisé un autre cdn qui s'appelle Cloudflare maintenant le Cloudflare Cdn est incroyable parce qu'avec eux, vous êtes accompagné a des CD dans le monde entier. Ils sont libres, libres pour toujours. Ça s'appelle un plan pour toujours gratuit, ce qui signifie qu'ils sont libres et qu'ils vont rester libres. Et aussi, étonnamment, ils vont aussi nous donner un SSL gratuit. Donc, cela va résoudre notre problème parce que, eh bien, nous pouvons aussi voir la fin de Cloudflare. Et parce que c'est un SSL gratuit, nous devons utiliser les serveurs Cloudflare et parce que pour utiliser leur CD et nous allons utiliser leurs serveurs, j'espère que cela a du sens, les gars. Mais ce que j'essaie de dire, c'est que le nuage pour va résoudre tout cela va nous donner le SSL et il va aussi nous donner le C. D. M. Mais avant de passer à la façon de le faire, je veulent vraiment aller plus en profondeur dans SSL et voir la fin, pourquoi ils sont si grands, leur culpabilité, puis passons à mettre en place cela. Cela coûte les gars, c'est faire ou percer dans la compréhension de la valeur de votre site Web et de la sécurité, comment cela fonctionne et comment vous protégez vos clients à voir dans la prochaine conférence 8. Compabilité du CDN SSL: Bienvenue, les gars. Dans cette conférence, nous allons parler de SSL Qu'est-ce que c'est, quoi nous l'utilisons, comment cela fonctionne. Également à propos de Cdn et SSL large. capacité de CD et de comp est si importante maintenant. abord, qu'est-ce que SSL et qu'est-ce qui rend si important que les gens soient prêts à payer pour cela ? Eh bien, commençons par définir ce que SSL signifie maintenant. SSL signifie couche de sockets sécurisée et c'est essentiellement un nom de fantaisie pour dire qu'il s'agit d'une protection de sécurité entre le client et le serveur. Droit ? Il va y avoir la protection du client et des transferts de serveur. La meilleure façon d'expliquer cela en profondeur est de vous montrer ce que je veux dire. Donc, disons que nous avons notre client dans le client. Peut être vos utilisateurs utilisant votre site Web. C' est peut-être vous qui utilisez un site Web. Vous regardez dans votre propre site web, etcetera, etcetera. Alors disons que vous avez un long jeu. Les gens ont leur mot de passe et ils sont utilisés votre nom et tout. Donc ce qu'ils vont faire, c'est qu'ils vont se connecter et envoyer leur nom d'utilisateur et leur mot de passe, et ça va être envoyé de leur ordinateur aux serveurs, non ? Et puis le serveur va le chercher, et il va les verrouiller. Voilà le problème. Vous voyez que quand M. Hacker apparaîtra dans la photo, ce qui est malheureusement devenu un lieu commun aujourd'hui, il sera capable de s'en prendre à ce truc, va pouvoir me poursuivre sur le transfert lui-même entre le client et entre site Web. Voyez votre nom d'utilisateur et votre mot de passe et soudainement vous ou ce client a été piraté et c'est terrible. Maintenant, vous ne voulez pas que cela arrive, surtout pas quand vous avez une forme de commerce électronique. Ou si vous traitez des informations sensibles ou simplement pour la vôtre, connectez-vous à votre propre site Web qui peut casser l'intégralité de votre site Web. Maintenant, bien sûr, heureusement, nous avons des renforts dans tout. Mais ce n'est pas quelque chose que vous voulez arriver, surtout ne sachant pas que les gens peuvent partager des informations précieuses de leurs informations privées avec vous avec leurs informations de carte de crédit de connexion, etcetera, etcetera. Voici donc la solution. Les gars, le cryptage et le cryptage sont exactement ce que SSL offre. Donc maintenant, quand nous utilisons SSL, ça ressemble à ceci puisque nous avons nos clients qui restent vont se connecter à votre site,n' votre site, est-ce pas ? Il va avoir son nom d'utilisateur et il est transmis, mais pas quand il envoie l'information vers le serveur. En fait, ça va passer par le cryptage, n'est-ce pas ? Ceci est le cryptage SSL, Donc, cela signifie que lorsque le transfert se passe entre la montée et le serveur, il ne va plus dire utilisé à 123 Vous passez pour 123 droit ne va pas dire le nom d'utilisateur et le mot de passe réel. Au lieu de cela, ça va ressembler à ça. Ce sera juste des chiffres aléatoires et des chiffres impossibles de savoir ce qu'il dit réellement et ce que cela signifie réellement. Donc, il va être reçu par le serveur avec cette information vraiment étrange. Mais grâce au SSL, cela signifie que lorsque le serveur aura cette information sera décryptée. Et cela signifie que le serveur peut obtenir les informations réelles et les utiliser et enregistrer ce client en toute sécurité. Donc maintenant, si M. Hacker apparaissait, apparemment, il n'y a qu'un seul hacker au monde dans cette histoire. Si les pirates apparaissaient, ça veut dire qu'ils vont s'en prendre à ce cryptage, non ? Et s'ils prennent le cryptage, ils n'ont aucune idée de ce que cela signifie qu'ils ne peuvent rien faire de précieux avec. Et c'est pourquoi SSL est si important. Et il est si précieux pour la sécurité pour vous-même, pour tous ceux qui l'utilisent, vous devez avoir votre site Web SSL sécurisé. Ok, alors passons à la fin. Maintenant, la chose avec le cryptage SSL est que le cryptage passe par le service Hôte bleu parce que nous utilisons Blue Host et que nous obtenons un SSL gratuit ne fonctionnera que par les serveurs hôtes bleus. Mais avec Cdn, vous allez utiliser un tas de serveurs différents. Et à moins que vous ne payiez votre certificat SSL, vous ne pourrez pas l'appliquer à l'autre service que vous utilisez. A cause de tous ces serveurs différents, ils seront partout dans le monde, non ? Donc, cela signifie que votre site Web sur votre continent, matériel que les gens visitent sur votre site, ils seront téléchargés dans différentes parties du monde. Ainsi, par exemple, si quelqu'un est vu Norvège en Europe ou quelqu'un est en Australie ou en Nouvelle-Zélande, etcetera, etcetera. Ensuite, il y aura un serveur plus proche. On est probablement hôtesse bleue et ils vont être plus rapides. Ils vont obtenir le contenu beaucoup plus vite. Tu vas avoir une meilleure utilisation grâce à l'expérience. Mais nous avions besoin d'être encore cryptés. Et le SSL gratuit n'offre pas cela avec le CD lui. Mais voici la solution. Et c'est pour ça que c'est si parfait. Et c'est Cloudflare. Maintenant, Cloudflare a cette offre vraiment incroyable. Ils ont bien pour être un cdn gratuit. Ils sont de loin les plus larges. Et je dirais que les meilleures offres Cdn là-bas en ce moment. Maintenant, bien sûr, si vous utilisez Max Cdn ou quelque chose comme ça, vous pouvez en savoir plus sur l'incroyable chose avec Club, c'est que c'est complètement gratuit et gratuit est toujours dans le budget, non ? Mais ils ne sont pas sur Lee offrant un CD incroyable et ils offrent également un certificat SSL gratuit . Donc, ce que cela signifie, et parce que nous recevons un SSL de Cloudflare, cela signifie que nous avons sur SSL un cryptage sécurisé, transferts sécurisés tout en utilisant C. D. M. Et ça ne va pas nous coûter quelque chose. Donc c'est la chose incroyable ici. Donc, dans cette histoire de distance obtiendrait une belle solution à l'ensemble du problème. Alors quoi, nous allons aller de l'avant et faire maintenant est dans la prochaine conférence. Nous allons mettre en place nos travaux Cloudflare Cdn. Nous allons configurer notre SSL Cloudflare, démarrer cette fête et nous assurer que nos temps de chargement s'améliorent dans le temps de réponse de notre serveur s'améliore. Ok, alors voyez à la prochaine conférence, les gars. 9. Cloudflare CDN: Très bien, mes amis, il n'y a rien à faire que de le faire. Mettons en place le CD Cloudflare, et d'accord, maintenant, avant de faire ça, on va faire quelques étapes de préparation. Et le 1er, c'est que si vous avez un installateur de cash comme nous faisons WP super cash et qu'il a CD et support, nous allons aller de l'avant et activer ça. Il va y avoir de l'eau ici, et ensuite on va transformer cet officier qu'on n'a pas besoin de CD et de soutenir. C' est une sorte de collision ensemble, et nous savons déjà que celui-ci ne fonctionne pas très bien. On pouvait le voir sur une vitesse de chargement. Et nous ne recevons aucun soutien de l'autre mer et CD se termine sur l'Oural. Donc on va désactiver ça et en installer un plus puissant. Je vais cliquer sur enregistrer les modifications. Ils allaient y aller. Et maintenant, nous allons aussi passer à Blue Host qui viennent, nous allons cliquer sur Logan, pouvons juste suivre mes pas là-bas, et nous allons aller sur le marché, puis Adams et faire défiler vers le bas jusqu'à ce que nous ayons SSL certificats. Et maintenant, nous allons désactiver notre SSL maintenant ne se sent pas très bien puisque regarder les élections précédentes, n'est-ce pas ? Mais ne vous inquiétez pas, nous allons en installer un nouveau et les choses allaient être encore plus sécurisées en quelques minutes. Donc on va aller de l'avant et désactiver celui-ci. On y va. Maintenant, nous sommes prêts à commencer avec Cloudflare, n' est-ce pas ? Ont été retirés. RSL Nous avons également supprimé toute forme d'autre cdn supporté pourrait entrer en collision avec celui-ci. Donc on va passer à Cloudflare dot com. Je vais mettre ça dedans. La ressource est hors cours, et tout ce que vous aurez à faire est d'aller de l'avant et de cliquer sur S'inscrire ici. Mais pour moi, qui a déjà un compte, je vais cliquer sur me connecter. Et une fois que tu seras inscrit, on finira au même endroit de toute façon, et on va juste y aller et ajouter notre site et je vais écrire le site dans lequel sera Robin et Jesper dot . sur ajouter le site, et puis maintenant nous allons changer vos enregistrements DNS. En d'autres termes, nous allons changer de sorte que le DNS En d'autres termes, l'information va être envoyée via leur service et non pas l'hôte bleu sur parce qu'ils sont envoyés par leurs serveurs, nous arrivons à se connecter avec leur voir Dan, qui sera partout dans le monde. Ok, je vais cliquer sur l'année prochaine. Je vais choisir le plan gratuit. Comme vous pouvez le voir, nous avons la graine globale dans, ce qui est incroyable et aussi les certificats SSL gratuits. Je vais cliquer sur les soins et nous pouvons confirmer le plan et nous arriverons à le faire pour un site gratuit qui est plus que suffisant pour nous. Et puis nous allons confirmer que nous allons aller à cette page ici et il n'y a rien à penser parce que tout cela se passe Automatique. Il dit même automatique ici, ce qui est parfait. Et ce qui se passe, c'est qu'ils changent leur I, p ou plutôt R i p pour pointer vers leurs serveurs. Donc maintenant, toutes nos informations qui vont envoyer plutôt que de passer par des hôtes bleus vont passer par Cloudflare. Et c'est ce qui est mis en place ici. Donc on va juste laisser ça être acide est et cliquez sur Suivant. Maintenant, c'est là qu'on doit se salir un peu les mains. Mais c'est en fait super simple. Nous devons changer nos serveurs de noms. Donc, ce que nous allons faire est de changer les serveurs de noms d'hôtes bleus dans les serveurs de noms Cloudflare . Donc le 1er 1 ici, on va juste cliquer sur la copie pour qu'elle soit couverte, et ensuite on va aller à l'Hôte bleu. Je vais créer un nouvel onglet ici et me connecter aux hôtes bleus, puis cliquer sur Logan. Et puis je vais passer pour faire le secteur par ici, et vous pouvez voir que c'est son Robin et Jesper, et ça fait mal un peu dans le coeur ne connaît pas SSL. On va réparer ça dans une minute, et je vais cliquer sur Gérer, et ensuite on va aller sur les serveurs de noms et voici le service de noms. Vous pouvez voir cela la fin, cet hôte bleu foncé dot com. Et c'est la maison bleue qui vient le jour où vous nous demandez de changer, donc ils veulent avoir la fin, celle-ci en celle qu'on a déjà copiée, non ? Donc nous allons juste y aller et nous allons cliquer sur utiliser des serveurs de noms personnalisés et nous allons changer celui-ci en ceci. On y va. Et on va faire la même chose avec celui-ci. On va le flic, y retourner, changer le 2e 1 et payer assis comme ça. Et quand on aura fini, on va frapper sauver, ce qui est terriblement loin à droite. Mon visage est dans le chemin, mais c'est en bas dans la droite. Je vais juste frapper, sauver comme ça. Donc maintenant, il a été sauvé avec succès. Vraiment, vraiment sympa. Nous allons aller de l'avant et revenir en arrière et cliquer sur Continuer. Et maintenant, nous avons tous fini. Tout ce qu'il faut faire, ce n'est pas seulement déjà, est-ce pas ? Mais nous devons en fait attendre 24 heures avant que ce changement ait lieu. Maintenant, d'après mon expérience, cela peut prendre aussi peu que la moitié sur notre John notre Mais il peut aussi prendre beaucoup plus de temps. On va juste devoir attendre et voir les changements. Maintenant, avant d'aller de l'avant et de le faire, nous allons changer et obtenir notre SSL correctement. Donc on va passer à crypto. C' est juste là. Tout ça est déjà mis en place, on va passer à Crypto maintenant. La première chose que nous devons changer dans la crypte de l'option est notre SSL, et heureusement, nous allons récupérer notre SSL. Ou plutôt nous l'avons déjà fait. Donc c'est dès le début, réglé à plein et il y a quatre différents en cours. Le 1er 1 est éteint, ce qui n'a probablement pas besoin d'explication. Vous l'éteignez, alors nous avons flexible et flexible. Celui-ci est assez problématique car cela signifie qu'il n'y aura pas de sécurité entre votre serveur et le Cloudflare. Mais il y aura une sécurité entre Cloudflare sur vos visiteurs, n'est-ce pas ? Donc ils vont toujours être un écart de sécurité entre son sens, vous pouvez vous en sortir avec beaucoup moins de restrictions que le vendeur, sage et de sécurité sage. Mais les visiteurs vont toujours voir votre site Web comme sécurisé. Donc, c'est un peu un faux SSL, si vous voulez, et je ne le recommande pas pour des raisons évidentes. Ce n'est pas si sécurisé, moins pas de votre et c'est beaucoup plus sûr que ce qu'il est éteint. Mais ce n'est pas assez sécurisé, alors le prochain que nous avons est plein et qu'il est en fait plein sur son sécurisé de votre extrémité à la flare cloud et du cloud pour elle à l'utilisateur. Et c'est comme ça que tu voulais. Tu veux que tout le chemin soit sécurisé maintenant ? Nous avons aussi strict et ce qui signifie strict est que vous avez besoin d'une sorte de certificat. Ainsi, par exemple, parce que Blue Host utilise un service appelé Let's Encrypt, nous avons déjà un certificat sur nos serveurs. Nos serveurs sont considérés comme sécurisés car nous utilisons Blue Host. Nous avons le chiffrement, puis nous avons le certificat et nous pouvons l'utiliser à la rigueur totale. Donc, je recommande fortement que nous allions de l'avant et d'utiliser ce strict complet parce que c'est le plus sûr . Mais si vous n'utilisez pas d'hôtes bleus, il y a des chances que vous ne puissiez utiliser que l'un de l'autre. Peut-être même juste flexible, alors flexible sera toujours mieux. Mais je vous recommande toujours de vérifier avec votre hôte vos serveurs et de vous assurer que vous pouvez aller de l'avant et obtenir le certificat SSL car il est si précieux. Nous avons appris ça de la conférence précédente , donc nous allons garder une série complète parce que nous le pouvons, et nous sommes reconnaissants de pouvoir le faire. Ensuite, on va faire défiler vers le bas et on veut vérifier certaines choses. Et la première chose est toujours utilisé https. Et c'est une partie de ça étant strict, non ? Donc, si quelqu'un arrive avec http, vous voulez toujours les rediriger vers http, car nous voulons toujours utiliser ce cryptage sécurisé. Rappelez-vous, le S signifie réellement sécurisé, et ici nous avons des réécritures https automatiques. Fondamentalement, il change tous les chercheurs de contenu et les liens. Il a dit sur le site de Http à https. Et nous voulons que ça soit armé. C' est génial. Vous voulez que tout soit crypté et sécurisé, et c'est tout pour cela. Alors ensuite, personne, personne, tout est mis en place. Nous avons notre SSL et nous avons également mis en place Cloudflare pour la justice Cdn. Ou ça va prendre un monde qui pourrait prendre jusqu'à, eh bien, quelques heures. Mais je vais couper ça pour que tu n'aies pas à voir toute la partie ennuyeuse. Alors je vais vous montrer comment vous pouvez voir qu'il fonctionne et fonctionne réellement. D' accord, donc ça fait environ deux heures et ça marche depuis ce temps. Maintenant ce qu'on va faire, c'est aller sur ce site appelé Quel est le point net de ma Deena  ? C' est dans La ressource est et on va écrire sur notre site. On y va, Robin et Jesper dot com. Et puis nous allons changer ce A et nous allons mettre fin à ça, qui est le serveur de noms, et que nous allons cliquer sur Search parce que cela va nous permettre de voir jusqu'où nous sommes allés. Et nous pouvons voir que nous avons en fait quelques serveurs qui se sont tournés vers les serveurs Cloudflare comme celui d'Ashburn. Nous avons aussi celui à Cambridge, au Brésil, à Amerigo , Paris, etc. Mais nous avons aussi un couple qui n'aime pas et n'aime pas encore Londres, par exemple. Nous pouvons le voir parce que ce sont ceux que nous mettons manuellement et ce genre de ceux de Blue Host, quels chiffres ? Parce qu'ils disent hôte bleu en ce moment, afin de vérifier ou SSL et tout aussi bien. Et pour obtenir plus d'informations, nous pouvons utiliser cette vérification pour Cloudflare dot celestic dot com. Ceci est aussi dans la ressource est que nous allons aller de l'avant et écrire dans notre site Web, qui est la colonne http slash avant barre oblique avant Toujours https. A partir de maintenant, les gars Robin et jesper dot com et puis cliquez sur Scam. Et ici, nous pouvons voir qu'il a vérifié huit sites mondiaux et nous avons trouvé Cloudflare dans quatre avant l'Angleterre, le Danemark, la Russie, Russie, nous n'avons pas trouvé en Chine, Allemagne, Espagne et Pays - Bas. Donc il va encore avoir besoin d'un peu plus de temps. Mais la grande nouvelle, c'est que cela fonctionne réellement. Il dit aussi que ont été utilisés dans les vêtements cdn inférieur, ce qui est des nouvelles fantastiques. Ça veut dire que ça marche clairement. Et il dit aussi que nous utilisons la couche greffière SSL, ce qui signifie que cela fonctionne aussi, ce qui est une nouvelle étonnante. Donc tout fonctionne. Les gars, on peut vraiment être très heureux à propos de ça. On va lui donner quelques heures de plus et ensuite on va passer à la prochaine conférence , vérifier une chose de plus, et ensuite on va faire un nouveau test à ce moment-là et vérifier le temps de réponse du serveur. Ok, super boulot pour arriver jusqu'ici. Voir, dans la prochaine conférence 10. Connections de l'URL du site à la maison: D' accord. Donc, avant de passer à autre chose et de faire le test de temps pour vérifier le temps de réponse du serveur, je veux vous montrer quelque chose qui est vraiment important à long terme. Et c'est à propos du site et de la maison votre droit. Donc, si vous allez à votre page d'accueil pour nous, c'est Robin et Jesper dot com ici, et vous cliquez sur. Vous allez remarquer que nous avons des https hors cours, toujours asiatiques à PS. Et puis nous avons Robin et Jesper dot com. Maintenant, notez qu'il ne dit pas w w dot Robyn et jesper dot com. Devrais-je y aller ? Je vais juste être directement jeté dans ce robin et jesper dot com sans le double utilisé et vous pourriez choisir d'utiliser que vous pourriez choisir de ne pas utiliser pas. Mais au moins je vais vous donner les options à choisir. Et puis on parlera des avantages et des inconvénients. Donc ce qu'on va faire, c'est aller sur le site de Jennifer. On va aller au tableau de bord, et ensuite on va descendre deux séances, et on va cliquer sur Général et on verra qu'on a un tableau. Appuyez sur votre adresse l et adresse du site, Ural. Et si vous souhaitez avoir votre site Web comme www dot votre nom de domaine dot com, ce serait l'endroit pour changer les paramètres et général. Et nous l'avons ici. OK, maintenant, il n'y a aucun avantage particulier d'utiliser les W ou d'utiliser sans. Il y a beaucoup de sites majeurs qui utilisent sans, et beaucoup de grande taille ont utilisé avec. Ok, donc peu importe lequel vous utilisez. C' est à toi de décider. Mais je veux que vous réfléchissiez à deux choses importantes, une que quand vous écrivez ce que vous choisissez, assurez-vous toujours de l'utiliser. Ainsi, par exemple, si vous utilisez celui qui a été utilisé sans les W, alors lorsque vous écrivez à des personnes et que vous le liez lorsque vous le mettez sur vos réseaux sociaux , lorsque vous faites votre marketing numérique, par exemple, vous voulez vous assurer que vous n'utilisez pas ce doublé en utilisant ici parce que cela va faire une autre redirection. Ça va juste ralentir la vitesse de chargement de la page, et on ne veut pas ça, ok, et ça pourrait sembler mineur. Mais à long terme, ça va devenir majeur. Donc, nous voulons nous assurer que nous utilisons toujours la même chose. Et la deuxième chose serait toujours en utilisant la même chose est que si vous utilisez celui-ci pendant un certain temps et puis vous décidez d'aller avec W w w comme ça, alors le problème pourrait être que Google voit cela. Ok, voici un autre côté ne reconnaît pas votre site d'origine. Et le problème avec cela est, si elle a cessé de sites identiques, vous allez probablement être banni des moteurs de recherche Google. Et cela signifie très peu ou pas de trafic. Donc nous ne voulons pas que ça arrive. Mais au début, comme nous le sommes en ce moment, c'est tout à fait bien d'y aller et de le changer. ce moment, il n'y a aucun avantage à utiliser l'un par rapport à l'autre. Assurez-vous juste d'en choisir un et d'en rester avec. En fait, je préfère celui-là. Mais l'avantage d'utiliser les W peut, bien sûr, être que beaucoup de gens quand ils parlent et ils font référence à quelqu'un qu'ils ont utilisé pour double usage , mais il n'importe quel taux que vous commencez à classer dans le moteur de recherche Google Cosco s'améliore. Ça va être ton original. Cité améliorée de toute façon, donc ils vont atterrir ici tout de suite. Les parties les plus importantes pour vos réseaux sociaux pour un marketing numérique. Si vous faites des annonces ou quelque chose du genre, vous voulez vous assurer que vous utilisez toujours l'adresse correcte. Et si vous voulez changer est ce est probablement le temps maintenant tôt pour les changements et assurez-vous que vous changez les deux hors d'eux. Si vous ne modifiez qu'un de ces éléments, votre site Web risque de se rompre. Et ce n'est pas amusant, vraiment pas. Alors change-en un. Alors nous allons aller de l'avant et passer à la prochaine conférence et faire le test de vitesse, puis passer au prochain numéro et en vendre un aussi. Et puis je vais vous montrer ce que vous pouvez faire si votre site tombe en panne. Je sais que nous avons nos sauvegardes et tout, mais il y a plus de choses que vous pouvez vraiment faire si ça se casse pour voir dans la prochaine conférence. Les gars 11. Exploiter le cachage du navigateur: Bon, les gars, bienvenue. Maintenant, si vous m'avez suivi de la conférence précédente, vous aurez également configuré votre cloud pour voir la fin maintenant. Si ce n'est pas le cas, allez-y et faites ça. Si c'est ce que vous cherchez à faire pour optimiser dans cette section. Maintenant, avant d'aller de l'avant et de faire un test de vitesse dans un test de page de chargement, je veux parler du prochain problème auquel nous sommes confrontés. Ce que c'est, ce que nous pouvons faire à ce sujet. Et puis nous allons aller de l'avant et tester notre nouveau Cloudflare Cdn pour le temps de réponse du serveur et aussi vérifier comment affecter l'encaissement du navigateur de levier. Ok, alors qu'est-ce que l'encaissement du navigateur à levier ? Eh bien, gros, c'est l'argent qu'on sait déjà ce qu'est un cash, est-ce pas. Il s'agit de tirer parti d'un cache de navigateur, ce qui signifie que nous attrapons beaucoup de choses telles que de vous voir, dit javascript. Ah, beaucoup de pour les images ou les arrière-plans, etcetera à la navigation ou à l'utilisateur à leurs ordinateurs. Tout va se charger beaucoup plus vite maintenant, le problème que nous avons raison, et c'est un petit problème parce que vous pouvez voir que c'est en fait dans la partie la plus basse de la liste des priorités ici est que si vous faites défiler vers le bas, il y a aucune date d'expiration ou date d'expiration. Au contraire, il a spécifié. Et ce n'est généralement pas un problème si important, parce qu'on va aller de l'avant et mettre en place un match de toute façon, donc ça va s'occuper de ce problème. Mais ce que cela signifie, c'est qu'il n'a pas de date ou d'heure pour quand va expirer. Donc, si vous mettez à jour votre côté, il ne se retire pas automatiquement de l'argent. Et pour certains, beaucoup de gens utilisent des moments différents pour l'argent, selon le type de site Web, selon la façon dont ils veulent tirer parti, etc. Mais ce qui est important de savoir, c'est que vous allez toujours obtenir le côté mis à jour si vous prenez soin de l'argent sur votre site Web. Maintenant, si nous regardons Pat Flynn ici sur son site web intelligent, revenu passif. C' est le premier test que nous avons fait plus tôt dans la section. Vous allez voir qu'il devrait également avoir ce navigateur de levier attraper comme une erreur. Si vous cliquez dessus, il a la même chose. Est-ce que nous l'expiration pas spécifié sur beaucoup de choses ici, mais de toute façon, son site est performant très bien et se charge super rapidement et c'est une petite taille maintenant, le plus important de tout cela hors cours, le temps de chargement lui-même. Et nous ne sommes pas là pour être accrochés à tous les chiffres, pour que tout soit parfait. Nous voulons avoir un bon temps de chargement pour l'expérience utilisateur et pour le S e o. droit. Mais ce que je veux que tu fasses, c'est en fait aller à ta prise de trésorerie. Et si vous avez suivi le long, vous devriez avoir le super cash WP. Et si tu ne le fais pas, c'est bien aussi. Il y a beaucoup d'argent qu'il branche là-bas et je voulais descendre à celui-ci dans la section avancée. Donc, vous allez à définir les choses WP Super Cash avance et ensuite aller à celui-ci est à 304 non modifié. navigation ou l'encaissement indiquent quand une page n'a pas été modifiée depuis sa dernière demande. Donc ce que ça va faire, c'est que c'est toujours quand ils entrent sur notre site, ils vont vérifier leur prise vers l'argent actuel sur le site pour voir s'ils correspondent juste pour secouer. D' accord. Y at-il quelque chose qui est mis à jour qui doit être mis à jour Ou si c'est le même, si c'est le même que rien ne doit être fait. S' il y a quelque chose, il va nous mettre à jour. C' est juste quelque chose qui vaut vraiment la peine d'avoir activé. Donc, on va le cliquer dedans. On va descendre et cliquer sur les mises à jour. Statut. Et maintenant, avec cette petite différence que nous avons faite avec cette minuscule mise à jour, nous allons aller de l'avant et nous allons faire un nouveau test de vitesse sur notre site Web. Maintenant, bien sûr, il y a beaucoup de choses que nous pourrions faire ici. Vous pourriez en fait aller dans vos fichiers en excès HD et asseoir certains temps d'expiration pour chacun ces fichiers, et je vais vous montrer comment faire cela aussi bien. Maintenant, vous pouvez également aller de l'avant et aller à votre fichier d'accès HD et écrire dans un certain code pour définir une date d'expiration. Mais ce fichier est très sensible. Si quelque chose ne va pas, ça va briser votre site web. Je l'ai utilisé avant, mais je n'ai pas vraiment vu de différence dans les performances de mes sites Web être donc je ne suis pas vraiment la peine de faire cela plus, Donc nous ne allons pas toucher à cela. C' est juste un travail inutile et aussi un travail légèrement risqué. On va aller de l'avant et on va faire un autre test de vitesse, donc je vais cliquer sur commencer les tests. Bon, donc les chiffres sont dans, et comme on peut le voir, il y a une très belle amélioration en cours. Le temps de chargement est amélioré. Les demandes sont abaissées. Cette taille est maintenant juste une clause d'exclusion de responsabilité. Rien de tout cela n'est une science exacte. Si vous exécutez plusieurs tests, vous avez peut-être remarqué qu'il va un peu foin, aussi, en fonction de l'origine du test. Mais il vous donne une très bonne estimation qui, comme nous pouvons le voir dans les tests précédents, se chargent. Le temps planait à 80,8 2e et près de 0,9, et maintenant il planait à 0,6. C' est incroyable. Les demandes sont abaissées. On peut voir 31 à 18. La taille est probablement augmenter. Mais encore une fois, cela pourrait ne pas. Ce n'est pas parfait. Ce n'est pas parfait. Rien de tout ça ne l'est. Mais un score total est passé de 63 à 71. C' est juste vraiment, vraiment des gars super. Maintenant, si nous faisons défiler vers le bas, vous allez remarquer que le navigateur de levier attrape c'est toujours un problème qui se passe ici. Mais ce sera jusqu'à ce qu'on mette l'heure d'expiration. Et à mon avis, en regardant ces scores fantastiques, je ne pense pas que nous ayons besoin de le faire. Et je ne pense pas que tu devrais t'inquiéter trop de les perfectionner non plus. Maintenant, celui-là est hors cours. Super intéressant. Regarde ça. Maintenant, nous recevons toujours un avertissement de temps de réponse du serveur réduit. Mais avant que celui-ci ne soit réellement dans le top off, le kit supérieur était le plus gros problème actuel. Maintenant, il est en bas, encore plus bas que l'utilisation de l'encaissement du navigateur. Donc, si je clique sur celui-ci, nous pouvons voir que le serveur a répondu en 0.3 secondes et c'est fantastique. Où est avant ? Il répondait en 0,78 seconde. Droit ? Et si nous regardons tout le chemin depuis le début, quand notre vitesse était prête à 4,2 secondes, presque 4,3, rappelez-vous, c'était de Sydney, en Australie. Nous avons également eu un temps de réponse du serveur de 1.1 2nd Donc presque sur sa seconde. Nous avons dû attendre avant que le serveur réponde et que tout se soit passé. Et c'était le moment de mordre la première fois. Souvenez-vous de ça. ce moment, les gars, Ence moment, les gars, on a un site Web fantastique. Et si on se compare à Pat Flynn, vous remarquerez que sa vitesse de chargement est plus rapide. Et les chances sont qu'il utilise un expert pour utiliser correctement son site Web, minimisant les tailles d'image encore plus hors cours peut-être utilise des serveurs dédiés ou un hébergement VPN alors que nous utilisions l'hébergement partagé dans le plan le plus basique. Et pour être honnête, nous faisons vraiment très bien même pour qu'il ait un point zéro presque 0,4 et nous sommes à 0,6 et le point est d'être moins de deux secondes. Donc on fait vraiment fantastique. Taille totale maintenant nos performances à 71 il est à 73 à nouveau, sont juste des estimations abstraites de ce côté le temps qui viennent et rien ici est parfait. Pas besoin de devenir fou pour perfectionner ça. Il a aussi ces choses en train de se passer. Mais l'un de ses problèmes n'est pas servir un temps de réponse. Vous pouvez voir qu'il dit vert, et vous allez devenir vert si vous servez. Le temps de réponse est meilleur que 0.2 et nous allons devoir mettre à niveau soit passer de l'hôte bleu à, par exemple, terrain du site, qui hôte vraiment rapide ou améliorer notre hébergement sur l'hôte bleu à peut-être un VPN ou un plan pro, ou simplement être vraiment heureux que nous payons très peu d'argent pour un service fantastique. Et notre site Web fonctionne parfaitement bien, les gars, mais comme toujours, la vraie preuve est dans le rempotage. Droit ? Donc, si on va aller de l'avant et qu'on allait charger Robin et Jesper dot com comme ça, on remarquera que ça se charge très vite hors de la route. Mais si vous savez ce qui est intelligent, revenu passif, il passé les avions site Web il descend plus vite. Mais ces deux-là, bien qu'il y ait une différence, la différence n'est pas énorme. Les deux sites Web se chargent vraiment, vraiment rapidement et c'est fantastique. Si vous êtes sur les deux secondes, vous pouvez avoir un site Web fantastique. Fantastique s vous visiteurs heureux. Vous avez un grand vous i interface utilisateur et génial, vous X Maintenant dans les gars de la prochaine conférence. Quoi ? Nous allons aller de l'avant et faire est en fait de regarder toutes ces autres estimations qui se passent ici maintenant pour moi en ce moment. Et il y a des chances pour vous qu'ils soient verts, mais ils ne le sont peut-être pas. Parlons de ce que sont toutes ces autres choses. Et s'ils avaient ce signe d'avertissement, que faire à leur sujet maintenant ? Une dernière chose. Je veux te parler de ça. Comme toujours, ce genre de tests ne sont pas parfaits. Et différents tests donnent des résultats différents. Nous avons le nous avons un test de Google et nous avons aussi le test Ping dum, et ceux-ci vont vous donner différentes suggestions. Différents résultats. Mais comme toujours, les gars ne deviennent pas fous là-dessus. Le point principal est d'avoir un bon score, une belle interface utilisateur, belle expérience utilisateur, et puis vous êtes tous bons pour aller. On n'a pas besoin d'avoir des scores parfaits dans tout. Regarde Pat Flynn. Il a un site Web incroyable, des affaires incroyables en cours, et il fait 73 sur 100 pas 100 sur 100. Alors parlons de ces autres choses, et ensuite on va passer à autre chose. D' accord ? Vous voyez, dans la prochaine conférence, les gars, 12. Autres optimisations: Bon, les gars, bienvenue. Maintenant, nous allons faire quelques autres problèmes de tir pour lorsque votre vitesse de test de votre site Web. Donc nous avons déjà rencontré quelques problèmes dans l'onglet Performances, non ? Nous avons fait le premier en éliminant le rendu de blocage JavaScript et CSS dans le contenu de pliage ci-dessus . Maintenant que c'est une bouchée que nous avons optimisé ou des images ont traversé l' encaissement du navigateur , que nous savons est plus souvent temps d'expiration que le temps d'encaissement réel. Nous avons également examiné comment réduire le temps de réponse du serveur. Et nous avons réduit le temps de réponse et avons étudié certaines options pour le réduire davantage . Devrions-nous vouloir faire ça ? Regardons les autres couples ici. Maintenant, il y en a plus. C' est vert pour nous. Et la raison pour laquelle ils sont verts, c'est parce que beaucoup d'entre eux nous en avons obtenu quatre gratuits. Comme nous avons construit notre site Web. Maintenant, le 1er 1 est appelé moi unifiant html, et vous allez remarquer que nous avons magnifié les hommes Gmail. Si moi et la CIA dit ici grossissant javascript. Alors qu'est-ce que je veux dire si je suis bien, fondamentalement les hommes, si je ng est quand vous raccourcissez le code, non ? Parce que HTML, CSS et JavaScript sont tous différents types hors codes sur ce que les hommes, si regarder le code fait est qu'il économise de l'espace en le rendant illisible pour les humains mais encore complètement lisible pour les ordinateurs. Donc, tous les espaces que la fabrication des codes pour les humains comme nous pour comprendre et être en mesure programmer ils ont enlevé que Donc ils suppriment la taille et ils retirent tout le blanc. L' espace inutile le compresser. Fondamentalement, c'est une compression, mais les ordinateurs étaient toujours en mesure de l'utiliser. Mais je suppose que ça ressemble à un gros gâchis. Laisse-moi te montrer ce que je veux dire. Donc, ici, nous avons un code très simple pour les changements dans la position de la couleur sur l'entrée se sent lorsque vous faites un formulaire pour le port mâle, par exemple. Donc c'est à ça que ressemble un manteau normal quand tu veux dire que si je le fais, on va enlever tout cet espace tout ce gaspillage d'espace ici. Donc, ce que nous ferions alors, tout en grossissant se passe et en allant comme ça en entrant comme ça et en entrant comme ça et ceci donc si vous faites n'importe quelle forme de codage ou de programmation et que vous obtenez un tas de code et ce serait ressemblant à ceci et disons qu'il y a beaucoup de code et finira par ressembler à ça, mais avec un tas d'entrées différentes, ça va être juste un gros gâchis, , parce qu'il n'y a pas d'espaces. Mais avec la poussière grossissante est qu'il fait économiser de l'espace en utilisant tout en une ligne, dit Quicker pour exécuter. Et le fichier lui-même est plus petit et il fonctionne beaucoup mieux, ou au moins beaucoup plus vite pour les ordinateurs. Mais un humain ne sera pas capable de coder. Mais vous n'avez pas besoin de co cela parce que vous avez juste besoin de l'exécuter. C' est donc ce qu'est la grossissement. Et les hommes, si nous obtenons de notre bouchon de caisse, c'est juste et les bouchons de caisse que vous pourriez utiliser. Mais nous utilisons vers le bas dans le cadre dire que nous utilisons la prise de trésorerie super WP dans laquelle Dustin unifiant pour nous. Mais le super cash WP non seulement agrandit, mais il encaisse également dans un fichier statique, donc il met tous ces fichiers tous unifiés tombe dans l'argent et puis les services. C' est donc un pas plus loin de l'unification. Donc, il rend tous les fichiers très fatigués et très compressés, met dans un argent et ensuite le met dans les ordinateurs de l'utilisateur. Il se charge plus vite. Ok, maintenant, si vous n'avez pas une prise, tout ce que vous avez à faire est d'aller brancher, ajouter de nouveaux et de chercher de l'argent, et il y a beaucoup de vraiment merveilleux plug ins maintenant, honnêtement, J' ai l'habitude de W 3 le plus rapide cash, super cash, ou pour optimiser, et ils fonctionnent tous. Je suis sûr que celui-ci fonctionne aussi. Ils travaillent tous vraiment. Mais celui que je trouve le plus efficace et le plus facile que je préfère est le super cash WP , c'est pourquoi nous l'utilisons. On en obtient beaucoup gratuitement, comme eux qui s'unifient ici maintenant. La prochaine chose est d'activer la compression et la décompression est fondamentalement lorsque vous avez un fichier et que vous le réduisez. Donc, les hommes, si je ng est une forme de compression pour le HTML pour la CIA, dit pour le JavaScript. Mais le plus important, ce qui est le plus lourd sur notre site sont les images, n'est-ce pas ? Nous avons donc passé notre temps à optimiser nos images en optant pour P et G à J peg et aussi en les compressant dans un fichier de résolution inférieure. Donc, nous économisons beaucoup, beaucoup d'espace et augmentons ou le temps de chargement, et c'est la compression. Et nous l'avons également activer via des plug-ins comme Smush, par exemple. Donc, chaque fois que nous téléchargeons n'importe quelle forme d'image dans nos médiathèques, beaucoup la compresse automatiquement. Ensuite, nous avons également la page d'accueil éviter. Rediriger. Donc, si vous avez un problème avec la compression, ce que vous pouvez faire est d'aller de l'avant et de télécharger un plug in comme smushed. Ça va se compresser. Et assurez-vous également que vous ne compresser vos images et réellement utiliser une prise de trésorerie dans les hommes. Si je vos fichiers, par exemple, et encaisser tous vos fichiers pour améliorer la vitesse de chargement et utilisé autant de compression que possible sur tout le rapide, il peut être compressé Maintenant. Ensuite, évitez la page de destination Redirection. Maintenant, une redirection est quand vous êtes envoyé d'une page à une autre Donc, par exemple, disons que vous alliez dans http Roman et jesper dot com. Mais alors cette page vous redirige en fait vers la version h t T. P s hors de la page. Droit ? Donc, ce serait une redirection. Mais maintenant, cette page vous redirige également vers la partie W W hors de la page, puis ces espaces pour vraiment diriger. Et puis celui-ci re directeurs à la barre oblique avant à la maison. Donc maintenant, nous aurions trois redirections inutiles qui se produisent sur notre site, mais nous pourrions utiliser pour être envoyés de la première à la dernière sans toutes ces redirections intermédiaires . Droit ? Donc, cela peut parfois arriver lorsque nous avons un problème avec notre SSL. Rappelez-vous le SSL. Donc, nous passons de http à https, Mais alors peut-être qu'il y a quelque chose de mal avec https va vous renvoyer à http etcetera ou tout problème de forme hors boucle qui se passe. Ou peut-être que la page vient d'être mise en place de telle sorte qu'il y a beaucoup de directs libres. Mais si vous rencontrez ce problème ou qu'il y a quelque chose de cassé ou que vous avez changé l'URL , tout ce que vous devez faire est d'aller de l'avant et aller dans les plug-ins, Ajouter nouveau et rechercher quelque chose appelé Rediriger. Maintenant, ici, il va y avoir ce branchement appelé redirection. Vous pouvez simplement l'installer et commencer à l'utiliser tout de suite. C' est super simple à utiliser va vous demander l'entrée. Donc, quand une personne écrit ceci votre l, ils seront envoyés à cet euro. Donc, vous juste dans votre l que vous voulez que les gens utilisent et ensuite où vous voulez qu'ils soient envoyés super facile. Ils seront redirigés là où vous les voulez, donc vous n'avez pas besoin de redirections du milieu de la main , si vous voulez. Donc super facile à utiliser. Ensuite, nous avons également priorisé le contenu visible sur ce que cela signifie, c'est que nous accordons priorité au chargement et au rendu du contenu de pliage ci-dessus. Ok, donc quand nos pages sont téléchargées, ce qu'il va être téléchargé d'abord et avant tout va être la partie ci-dessus de la section de pliage sur notre page, cette section vous voyez à quelle vitesse que chargé maintenant tout ci-dessous, très probablement chargé après que tout cela a déjà été chargé. Et c'est parce que quand les gens viennent sur notre site Web pour que cette page soit chargée tout suite, n'est-ce pas ? Donc, c'est de prioriser dans ces contenus pour décharger tout d'abord maintenant tout ce qui est en dessous où le plus probable aura chargé plus lentement. Mais cela n'a pas d'importance, parce que lorsque les gens visitent notre site, nous voulons nous assurer qu'ils voient tout cela tout de suite. Et puis tout ce qui se trouve ci-dessous peut prendre son temps pour se charger. Et c'est ce qu'ils signifient avec la priorité du contenu visible. Donc, si vous avez un problème avec cela, très probablement le problème va être avec votre bouchon de trésorerie ou plutôt, manque de bouchon de trésorerie dans parce que le bouchon de trésorerie va s'assurer que vous priorisez chargement automatique de la les fichiers les plus importants dans l'enlèvement, la section de pliage et tout ce qui n'est pas important seront chargés plus bas car cela prend plus de temps, mais ils n'ont pas besoin d'être chargés. Donc, si nous faisons défiler vers le bas, nous avons également la facilité d'utilisation mobile, et nous recevons ah beaucoup gratuitement ici pour deux raisons. Premièrement, nous utilisons le thème Ocean WP, qui est déjà mobile, convivial et mobile adapté, mais aussi parce que tout ce que vous faites dans L. Un mentor est également très mobile convivial, donc c'est extrêmement donnant et vous obtenez beaucoup gratuitement en utilisant ces outils. Maintenant, nous avons effectivement une erreur ici qui indique la taille des cibles de robinet correctement. Si je clique dessus, il indique que le Taft ou votre politique de confidentialité est proche d'un autre robinet cible final. Et très probablement cela signifie que dans le pied de page notre politique de confidentialité et les termes et conditions liens ou de fermer sur la version mobile. Mais c'est bien parce que nous ne sommes pas allés de l'avant et avons adapté notre site web à la réactivité mobile et à la réactivité de la tablette. Pourtant, le droit ou le site Web est réactif pour tablette et pour mobile, mais nous ne les avons pas encore redessinés spécifiquement pour eux. Nous allons le faire dans une conférence à venir, donc ça va être pris en charge d'elle-même bientôt. Et puis nous avons utilisé des tailles de police lisibles, et c'est plus amusant opinion hors temps, qu'ils vous demandent d'utiliser certaines tailles amusantes et certaines quantités de mots par colonne . Donc, le général de votre site aura l'air bien et nous remplissons ces critères. Mais c'est plus une opinion que tout. Alors on a ce contenu de glace pour voir le port, non ? Et celui-là. Assurez-vous que vous n'avez pas à entrer bientôt sur votre téléphone portable lorsque vous l'utilisez afin de lire le contenu, car cela vous enlève beaucoup de temps à l'expérience utilisateur. Donc, lorsque vous entrez sur un site Web sur votre téléphone cellulaire, vous voulez vous assurer que vous pouvez simplement aller de l'avant et faire défiler. Tout sera servi lisible, accessible, accessible, et il avait l'air vraiment bon. Mais s'il n'y a pas de contenu qu'il a été de taille pour le port View, vous devrez bientôt entrer sur votre écran tout le temps. Et cela tue l'expérience utilisateur. Donc, cela signifie juste qu'il est dimensionné correctement et encore une fois, Ocean WP et hors cours élémentaire. Merci. Et ici que vous devez configurer le port View. À quel point, ou à quel point vous vouliez être bientôt, puis celui-ci, pour être honnête, est assez aléatoire. Il est dit éviter les branchements. Maintenant, si je vais de l'avant et cliquez sur cela, il m'amène à un développeur à Google qui vient site qui ne semble même pas exister. Je ne sais pas pourquoi vous voudriez éviter les branchements. Je pense que celui-ci est très, très aléatoire. Mais si nous regardons Pat Flynn ici et que nous faisons défiler vers le bas, il a en fait une petite erreur ici, et c'est son lecteur multimédia qu'il a, ou plutôt un lecteur flash. Mais celui-ci, honnêtement, vous n'avez pas besoin d'être préoccupé par le droit à moins qu'il y ait un certain branchement, il prend énormément d'espace ou qui est en train de planter votre site Web. Mais en général celle-là, ça n'aura pas d'importance. Ce n'est rien que vous devez faire à ce sujet. Mais les gars, si vous n'utilisez pas Ocean WP et que vous n'utilisez pas ER élémentaire, ce que vous devriez, à mon avis que ce que vous pouvez faire pour rendre votre site web plus mobile réactif, c'est en fait d'aller ici et aller à votre tableau de bord, puis cliquez sur Ajouter Nouveau , puis recherchez simplement un MP. Maintenant, un député signifie pages mobiles accélérées allait le rendre beaucoup plus rapide sur votre téléphone et aussi va le rendre mobile amical. je Honnêtement, n'ai pas utilisé celui-ci ou celui-ci parce que j'utilise toujours des élémentaires. Je n'ai pas besoin de l'utiliser parce que élémentaire le rend mobile convivial tel qu'il est. Mais si vous ne voulez pas utiliser élémentaire pour une raison quelconque et que vous utilisez également un thème qui n' est pas mobile convivial par défaut, vous pouvez utiliser l'un de ces pour brancher va le rendre mobile convivial pour vous. OK, donc ce sont toutes les erreurs possibles maintenant, car vous utilisez d'autres tests tels que Page Speed Inside de Google et Ping DM, par exemple, qui sont d'autres outils pour mesurer les performances de votre site Web chargement vitesse, etcetera. Vous allez remarquer que vous allez probablement obtenir des résultats différents d'abord et avant tout , et aussi vous allez obtenir des recommandations différentes à nouveau. Je vous recommande de ne pas aller trop loin dans ce domaine parce que vous voulez vous assurer que votre site Web est rapide. C' est efficace. C' est une expérience utilisateur élevée, interface utilisateur élevée. Mais n'allez pas par-dessus bord en cherchant le score parfait parce qu'à la fin, le genre d'obsession a tendance à blesser le site Web. Concentrez-vous sur ce qui est important et pas majeur chez les mineurs, non ? Regardez les gros problèmes, résolvez-les , améliorez les choses, obtenez la graine et obtenez l'argent, etc., puis passez à autre chose. C' est ma recommandation, les gars. Passons maintenant à la prochaine conférence du cours. Et bien sûr, si vous avez des questions, sera dans le Q et A, mais nous allons aborder quelque chose de très important dans la prochaine conférence aussi. Alors, on se voit là-bas. 13. Assistance: Très bien, gars, dans cette conférence, je veux parler de quelque chose de vraiment, vraiment important. Et ce sera surtout pour ceux d'entre vous qui utilisent Blue Host, n'est-ce pas ? Si vous n'utilisez pas l'hôte bleu, il y a des chances que cela ne s'applique pas à vous pouvez passer à la prochaine conférence. Mais si vous utilisez Blue host, je veux parler de supports. Maintenant, nous avons parlé des hôtes bleus n'étant pas l'hôte le plus rapide avec les serveurs les plus rapides . Droit. Et c'est certainement vrai. Et si vous visez la vitesse pure, vous pouvez opter pour le terrain du site, par exemple, qui, nous le savons, sont plus rapides que l'hôte bleu. Mais l'une des choses les plus étonnantes, qui est la principale raison pour laquelle nous aimons tellement Blue Host y a-t-il un soutien ? Il y a plus de raisons, bien sûr, comme leur SSL, et ils écoutent le certificat krypton. Mais le soutien que vous obtenez de Blue host pour ne payer que quelques dollars par mois est absolument incroyable. Maintenant, je ne peux pas commencer à vous dire combien de fois j'ai cassé un site Web sur des serveurs hôtes bleus sur Lee pour aller au support pour avoir un gars passer parfois des heures avec moi aider à retrouver cela. Je me dis ce que j'ai fait de mal et puis répare les erreurs pour moi et les gars. Je prends des heures et des heures de congé de quelqu'un d'autre en payant quelques dollars par mois . Tu sais combien ça va coûter ? Si tu dois avoir un seul soutien avec quelqu'un et que tu vas payer avec notre ça peut être, comme 70 ou 80 dollars sur notre et ici tu paies un couple de rabais par mois et tu peux avoir autant d'heures que tu veux. Donc, je recommande fortement en cas de problème avec votre site Web, allez sur le support de l'hôte bleu. Maintenant, si vous avez des questions pour votre entreprise, comment passer à l'étape suivante pour ce panneau Ou, vous savez, vous savez, aller de l'avant plutôt que hors cours sera dans les Q et A et vous avez la règle des 24 heures étaient toujours prêts à répondre dans les 24 heures. Mais pour ces questions techniques, je peux tellement renforcer le support de l'hôte bleu recommandé et c'est aussi très facile. Tout ce que vous faites est votre cliquable à nouveau. Vous allez de l'avant et vous vous connectez, puis vous cliquez sur le point d'interrogation ici, puis vous passez au chat. Vous pouvez appeler, bien sûr, mais j'aime la fermer. Et puis vous écrivez dans votre nom, votre domaine et le nom de domaine ici. Ensuite, vous arrivez à décrire votre problème, puis vous serez mis sur le coup avec quelqu'un pourrait prendre quelques minutes. Dépend du nombre de personnes qui utilisent le service, et cela peut sembler être une évidence. Mais honnêtement, beaucoup de gens reçoivent ce service, mais ils n'utilisent pas le support correctement. Et encore une fois, j'ai passé tant d'heures dans le soutien qu'il m'a tellement aidé avec les problèmes d'apprentissage, compréhension. Je ne peux pas le recommander assez. Et c'est pourquoi je recommande fortement non seulement d'utiliser l'hôte bleu, mais aussi d'utiliser leur support . Ok, donc ne paniquez pas si vous avez des problèmes avec votre site web. S' il y a quelque chose que vous ne comprenez pas, ça ne marche pas. Allez-y et utilisez le support de l'hôte bleu. Maintenant, Blue Host ne peut parler que pour les services Blue Host. S' il y a des branchements , etc., vous voudrez nous parler à la place parce qu'ils ne peuvent pas être responsables de toutes ces choses. Mais ce que j'essaie de dire, c'est que tu as beaucoup de soutien. Votre tuyau bleu, qui sont vraiment des experts en matière technique. Tout. Tuyau bleu. Et puis vous nous avez dans le Q et A pour tout sur les plug-ins pour le signe d'entreprise , etcetera , etc. Donc, emportez message gars utilisé pour le soutien de l'hôte bleu que vous avez acheté Si vous avez acheté Blue Hose, vous l'avez inclus. Faites-en bon usage. Vous ne le regretterez pas. Ok, voyez-le à la prochaine conférence. 14. Le design mobile de l'UI: Très bien, mes amis, allons-y et rendons l'interface utilisateur absolument belle pour toutes les personnes qui visitent notre site Web sur leur mobile. Ok, donc la première chose que nous allons aller de l'avant et le faire a changé la taille de notre logo parce que nous nous souvenons d'auparavant que c'était trop grand. Nous obtenons deux rangées quand il s'agit du menu et du logo. Donc ce que je vais faire est de cliquer sur personnalisé ici, et puis je vais cliquer ici, ce qui va m'emmener à l'en-tête, puis au logo. On y va. Et maintenant je vais aller de l'avant et voir à quoi ressemble le site sur notre portable écrit que je clique ici ci-dessous, et nous pouvons voir que nous avons ce problème, non ? Donc le logo est trop grand. Le menu est mis sur la rangée en dessous et nous obtenons tout cet espace gaspillé et tout l' espace est absolument des pressions quand il s'agit de tout, mais encore plus. Certains téléphones cellulaires, parce que les écrans sont si petits. Donc, comme vous pouvez le voir sur le bureau, cette taille est en fait 280. Et si je déménage ici au téléphone portable. Vous pouvez aussi y aller. Ça va aussi être sur 280. Mais ça va être trop grand pour nous. Donc on va aller de l'avant et changer un peu ça. Vous pouvez voir que si je suis un 280 comme avant est juste trop grand. On va descendre. On va y aller. On y va. Alors allons-y avec, disons, 200. Maintenant, nous pouvons voir que nous avons notre logo et notre menu côte à côte. Et on économise tellement d'espace. Regarde, regarde ça encore une fois. Si j'augmente nous obtenons tout cet espace gaspillé, redescendez à 200 en regardant beaucoup mieux. Donc je suis super content de ça. Je vais juste aller de l'avant et cliquer sur Publier. On y va. Maintenant, revenons à L un mentor. D' accord, les gars, qui sont de retour dans un Mansour. Et la première chose que je vais aller de l'avant et faire est de descendre à nouveau vers le bas, cliquer sur un mode réactif et de le changer en mode mobile. On y va. Et je suis super heureux avec cela en ce moment avec le logo et le menu semble parfait. Nous pouvons même cliquer sur le menu. Voyons voir à quoi ça ressemble. C' est vraiment sympa. Pour être honnête, j'adore ça. Donc nous allons aller de l'avant et faire quelques changements ici, comme nous pouvons voir maintenant que je pense que ce texte ici a besoin d'un peu plus d' espace. Je vais aller de l'avant et changer ça. Donc je vais cliquer ici, et ensuite je vais passer au style, et on va passer à la typographie, et ensuite on va descendre à la hauteur de ligne juste ici, et on va juste aller de l'avant et étendre ça un peu peu. Quelque chose comme ça. On y va. Vous pouvez voir qu'il grandit. Ils échangent toute l'interface. Peut-être que c'est un peu trop. On y va. Donc, nous voulons toujours garder à l'esprit ces choses que nous avons le bouton apprendre plus qui est facilement accessible, ce qui est vraiment, vraiment sympa et oh, si important. En même temps, le menu est devenu un peu plus difficile à atteindre parce que, rappelez-vous, le pouce n'y monte pas aussi facilement. Mais ici, tu dois faire le choix. Tu vas avoir le menu facile à atteindre, et ça coûtera 15 % de l'écran. À mon avis, cela ne vaut absolument pas la peine. Il est donc préférable de mettre le menu un peu plus haut et de leur donner plus de contenu . Droit ? Alors on y va. Il y a plus d'espace entre les deux. J' aime ça, peut-être même un peu moins. En fait, la hauteur de la ligne peut être un peu plus. Ils sont là, notre point doux. On y va. Donc je vais faire défiler vers le bas et voir s'il y a autre chose que je ne suis pas un grand fan hors. Donc, nous pouvons voir ici, par exemple, que ce texte est assez entassé à la verticale, mais c'est toujours une information très importante. Donc, ce que je voudrais faire est de changer le regard sur cette section entière. Donc je vais aller de l'avant et cliquer sur la section d'édition ici, et je vais aller de l'avant et enlever un peu du rembourrage parce que vous pouvez voir qu'il y a beaucoup d' espace perdu ici. C' est beaucoup d'espace perdu ici, et ça avait l'air très bien sur le bureau, mais ça n'a pas l'air aussi agréable sur le téléphone portable. C' est juste perdre de l'espace sous pression. Donc ce que je vais aller de l'avant et faire est de vérifier combien de rembourrage est en fait sur le dessus ici maintenant afin que nous puissions garder ce rembourrage l'espace entre les différentes sections, mais ensuite enlevé le rembourrage sur les côtés. Ok, Donc pour faire ça, je vais cliquer sur le rembourrage et ensuite aller sur le bureau et on peut voir qu'il est dit à 50 . Et ce que cela signifie, c'est que ceux-ci, même s'il n'y a pas de nombres, ils sont également automatiquement réglés sur 50. C' est ainsi que fonctionne le mode Responsive Mobile Automatique. Il définit juste les mêmes nombres. Maintenant, le site est beau, même sur un téléphone cellulaire, mais il noix complètement optimisé. Donc ce que je vais faire, c'est dissocier ces valeurs et ensuite je vais laisser le top sur 50 comme ça . Donc, nous avons encore la même quantité d'espace en cours pour enlever cette Syrie comme ça. Et puis je vais juste cliquer sur et écrire un ici et un ici, un ici. Maintenant, cela semble déjà beaucoup mieux, mais je pense toujours que le rembourrage est un peu trop ici pour le téléphone cellulaire. Donc je vais aller de l'avant et diminuer ça pour dire que 25 pourrait être un peu mieux. Donc, si nous descendons et nous regardons en haut, nous pouvons voir que c'est le meilleur. En fait, apparaît ici sur le dessus, et j'aime ça. Donc, vous entrez dans tout cet écran, d' accord, et nous obtenons ce texte ci-dessous. Maintenant, il y a deux choses que nous pouvons faire. Soit nous pouvons laisser ça comme il est et nous pouvons l'obtenir. C' est le meilleur et le plus de prises sur notre téléphone. Ou nous pouvons réellement augmenter la taille de cet arrière-plan défilant maintenant vers le bas. En fait, je suis vraiment content de ça. Vous pouvez voir qu'il y a beaucoup moins d'espace gaspillé ici, et nous avons toujours cette merveilleuse citation ici. Maintenant, je vais toujours vouloir couvrir tout ça au-dessus de la section de pliage avec ce fond, donc je vais passer ici, cliquer sur la section et passer à la hauteur minimale, non ? Et je vais l'augmenter un peu comme ça. On y va. Donc maintenant, nous pouvons voir que ça couvre toute la première partie. Maintenant, cela affecte le reste des décisions. Maintenant, nous pourrions vouloir revenir ici à ces prises, aller à la typographie et changer un peu la hauteur de la ligne. Nous y allons, regardant mieux et peut-être un peu plus d'espacement entre ces colonnes. Droit ? Alors passons au style ici et passons à la typographie et jouons un peu avec les hauteurs de ligne. On y va. Quelque chose comme ça. Donc, ça commence à avoir l'air vraiment bien en ce moment. Je pourrais vouloir utiliser même mordu plus. On y va. Business fait des lettres faciles vous montrent comment. Ok, maintenant, si on regarde l'arrière-plan, on peut voir que la lune se cache en fait. Ça prend un peu. Ce que nous pourrions faire, c'est changer la position en dehors de l'arrière-plan aussi pour voir si nous obtenons un meilleur aperçu. Mais en fait, je suis très content de ça. Donc on va aller de l'avant et faire défiler vers le bas et on peut voir que les cheveux de la citation sont toujours très bons. Maintenant, nous sommes enlevés l'espace entre les deux. En fait, on a ajouté un peu de choses ici peut-être, mais je pense que c'est bien. Cela dépendra aussi de la résolution sur le téléphone portable. Donc, nous allons faire défiler vers le bas. Il est dit, obtenir des hacks de marketing numérique gratuitement, non ? Obtenez les hacks marketing paresseux. Et c'est en fait vraiment vraiment très bien déjà. Maintenant, il y a quelques choses que vous pourriez vouloir changer. Maintenant, il suffit de cliquer ici sorte de mettre à jour cette partie. Il y a des changements qui se produisent parce que nous nous déplacons autour des différents bits. Et j'aime ce grand moment que nous ayons cette pleine valeur de 99$ ici. Inscrivez-vous ci-dessous, et nous vous le ferons parvenir. D' accord. air très bien. Super heureux à propos de ça. Ce que je voudrais faire, parce que maintenant nous avons elle de retour, qui est assez sombre, contre nos prises sombres, ce qui fonctionne très bien ici. Mais pas si bon ici. Par exemple, nous pourrions vouloir rendre cette partie en gras. Droit ? Donc je vais juste entrer ici, je vais choisir ça, et je vais le rendre audacieux. Donc maintenant, c'est un peu plus facile à lire et à voir, et je creuse ce design là. On y va, et ce formulaire est super sympa. Nous savons qu'il est en fait côte à côte sur le bureau sur la version mobile ci-dessous, où nous savons aussi que le pouce va facilement atteindre pour cliquer sur ma première nuit sur e-mail et aussi facilement atteindre pour cliquer. Envoyez-moi le piratage. Donc, c'est vraiment vraiment bon design ? Oui. On va aller de l'avant et faire défiler l'air tout à fait terrible. C' est ce n'est pas bon. Et c'est à cause du rembourrage que nous utilisons dans le rembourrage. Ils ont beaucoup de sens sur le bureau. Ils sont beaux sur le bureau, mais ils ne se traduisent pas bien à la version du téléphone cellulaire. Donc ce que je vais faire ici, c'est commencer à les éditer un peu. Donc, je vais commencer par cliquer sur le montage, la section ici, et commencer à jouer un peu avec la galette. Je vais passer à avancé. Et maintenant, nous sommes en mode téléphone cellulaire. Et d'abord, nous devons secouer ce que le rembourrage est actuellement sur le bureau et nous pouvons voir qu' il est réglé à 70. Droit ? D' accord. Il est fixé à 17. Maintenant, passons à autre chose. Retournez au téléphone portable. 70 pourrait être un peu excessif ici, donc je vais seulement ces une fois de plus parce que je ne veux le rembourrage sur le dessus. Et je vais mettre ça à 50. Ou allons-y avec 20. Allons-y avec Allons-y avec 40 cette fois. Ok, donc on va régler ça avant. Ils allaient aussi changer un peu cette taille, donc ça semble mieux maintenant pour ceux-là. On voudra peut-être les mettre en un. Nous pourrions voir qu'ils se changent quand nous sommes liés. Donc, ceux-ci sont en fait commencé à se corriger un peu. Si nous faisons défiler vers le bas, nous pouvons voir que nous obtenons un cours couvrant l'ensemble de l'écran à la fois. Et honnêtement, les gars, ça a l'air plutôt sympa. C' est assez solide. Donc tout ce que j'avais vraiment besoin de faire et avec ces fesses et aussi bien. Donc, tout ce que j'avais vraiment besoin de faire était de lier ceci et cela a changé le rembourrage pour la version de téléphone cellulaire et tout va beaucoup mieux déjà. Donc je suis définitivement en train de creuser ça maintenant. Ce que nous pourrions faire est ou devrait faire, même est changé. Le titre ici The Header parce qu'il a l'air absolument terrible et ce que nous allons commencer par changer est la taille parce qu'ils ne sont pas beaux dans cette taille en ce moment. Alors allons de l'avant et jouons un peu avec ça. Tu voulais avoir une rangée ou deux maintenant ? Je voulais être sur les cours les plus vendus. Donc maintenant, ça va avoir beaucoup plus de sens, , parce que tu peux le lire et qu'il y a moins d'espace entre eux, et ça a l'air beaucoup mieux. Je préfère aller avec 50 ou 70 dans le rembourrage quand il s'agit de bureau autour 22 14. Quand il s'agit de Mobile dépend complètement de la conception, mais ici je pense qu'il semble vraiment bon comme ça. Donc nous avons les cours les plus vendus, et ensuite nous allons avoir le cours se déroule comme ça. Les boutons ou il y a un cours à la fois. Nous avons un peu d'espace sur les côtés, mais c'est juste une bonne partie. Le design est à la recherche de magnificence défiler vers le bas. Nous avons le point de vue, tous les cours qui couvre à peu près l'ensemble de l'écran, puis ci-dessous avait la politique de confidentialité en termes et conditions. Donc, les gars, moment je suis vraiment content de ce design, est-ce pas ? Ça a l'air très bien. Vraiment gentil. Nous avons principalement modifié l'espacement entre les lettres et le rembourrage. Donc quand il s'agit de briser votre design, ce sera généralement le rembourrage. Et ça va être très individuel pour ton site web. Qu' est-ce que tu en penses ? Ça a l'air sympa, etcetera. Maintenant, je fais ça très intuitivement, qui signifie qu'il n'y a pas de plan derrière ce que je fais. Ou plutôt, il n'y a pas de préparation à ce que je fais. Je suis juste de décider de ce que je pense semble agréable et demandé, Je vais et je continue à signer le site Web. Je peux revenir et faire quelques changements, mais en ce moment je pense que ça a l'air vraiment bon. Nous avons le libre sur sa propre rangée, ce qui me semble assez agréable. Mais ce que nous pourrions aussi faire c'est changé cet en-tête, aller à la typographie de style et jouer un peu avec la taille, par exemple, va bien paraître s'ils sont sur trois rôtis. Qu' en est-il de deux roses, deux roses trop petites, trois rangées semble OK, mais en fait je pense que ça pourrait être un peu mieux. Donc je vais les garder sur trois rangées comme ça. Ils allaient y aller, et j'aime vraiment ça. Donc, les gars, c'est comme ça que vous faites. Tout ce que vous devez faire est d'abord, si vous avez un problème avec le menu, faites comme nous l'avons fait au début du cours, puis passez à L. Un mentor, passez au mode réactif et passez à mobile. Et puis les principales choses que vous allez vouloir changer notre besoin, l'espacement des lettres, espacement entre les lettres comme nous l'avons fait au début ici sera à cette taille hors des prises, les en-têtes, etcetera, et trois le rembourrage. Maintenant, le rembourrage est un grand disjoncteur de beaux designs. Donc quand vous liez le rembourrage va juste changer tout décider grand moment. Donc je suis vraiment content de ce type. Et maintenant, ne vous inquiétez pas, cela n'affectera pas la conception de votre bureau. Ce qui se passe en mode téléphone cellulaire reste en mode téléphone cellulaire. OK, les mobiles pour le mode mobile et le bureau sont pour le bureau, non ? Donc rien n'a changé ici. Nous avons encore cette belle belle. Ce signe. Ce qu'on va faire, c'est passer à la prochaine conférence. On va parler de la conception de la tablette. D' accord ? Ce qui est aussi une chose très importante à faire. Mais de loin, les principaux sont le bureau et le téléphone cellulaire, avec un accent supplémentaire sur le téléphone cellulaire. Parce que plus de la moitié de votre trafic viendra de là. Si vous avez des questions, sera dans le Q et A donc voir dans la prochaine conférence, les gars. 15. Conception de tablettes UX: D' accord, les gars, parlons de la tablette conçue pour l'expérience utilisateur. Ensuite, dans la prochaine conférence, nous allons aller de l'avant et nous concentrer sur la tablette conçue pour l'utilisation ou l'interface. Mais la première chose est la première. Qu' est-ce qui est si spécial à propos d'une tablette à signer ? Eh bien, comme on le sait, Tablet ressemble à ça maintenant. Ils font commune de taille d'écran variable que nous pouvons avoir de très petites tablettes. On peut avoir de gros comprimés. Nous pouvons avoir vertical, et nous pouvons avoir des comprimés horizontaux. Ce qui est intéressant de savoir, cependant, contrairement aux autres appareils tels que Mobile est généralement et bureau, c'est qu'ils ont deux modes très communs hors de les utiliser. Maintenant. Le 1er 1 est en fait appelé l'orientation portrait, et c'est quand vous le gardez dans ce genre de mode vertical comme nous le voyons sur l'image . moment, la deuxième façon dont vous pouvez également l'utiliser est de le mettre sur le côté comme ceci, et c' est ce qu'on appelle l'orientation du paysage. Et c'est aussi très important à savoir, parce que selon la façon dont ils utilisent leur tablette, cela va affecter la conception de votre site Web. Maintenant, il vaut la peine de savoir que quand il s'agit des utilisateurs mobiles. Environ 90 pensent que c'est 93% de tous les utilisateurs l'utilisent réellement en mode portrait, ce qui signifie qu'ils gardent le téléphone droit avec leur seule main comme ceci. Maintenant, quand il s'agit des tablettes, les scores sont un peu différents. Tout d'abord, plus la tablette est petite, plus elle est susceptible d'être utilisée en mode portrait, à droite, droite, donc plus l'écran devient grand alors, plus on commente, c' est que les gens l'utilisent dans un orientation paysagère. Maintenant, il y a deux fabricants communs. C' est androïde, non ? Les versions android des tablettes, puis nous avons Apple et les pommes ont tendance à être beaucoup plus grand généralement que les Androïdes. Donc, les utilisateurs d'Apple sont les seuls utilisateurs qui utilisent réellement plus de paysage qu'ils ne le font le portrait . Mais voici la mise en garde, les gars que la plupart de loin la plus habitude d'être soudure en fait comprimés Android. Donc, cela signifie aussi que le mode le plus courant en utilisant leur tablette est le mode portrait. Donc, nous allons garder cela à l'esprit pour notre conception maintenant. Sur Lee, 4% de rabais sur le trafic vers un site Web provient de la tablette est utile de savoir que lorsque les gens calculent leur trafic mobile. Ils incluent généralement le trafic de la tablette dans l'enquête mobile, non ? Donc la conférence précédente que nous avons traversée avec le trafic mobile qui va normalement avoir la tablette incluse. Mais le trafic de la tablette est générale est si petit qu'il ne fait pas une grande différence est encore plus de la moitié de tout le trafic. Il utilise mobile, c' est-à-dire votre téléphone cellulaire plutôt que simplement les tablettes ou le bureau. Mais je ne l'ai jamais vu une étude qui a jamais montré que plus de 10% de la valeur du trafic comprimés . Donc, nous savons qu'une très petite partie du trafic vers votre site Web général provient de la tablette. Mais voici où il devient très intéressant parce qu'ils ont le double temps de rétention sur les comprimés par rapport au droit de Mobil. Et cela a du sens parce que les gens qui vont sur un site Web sur leur téléphone portable sont beaucoup plus enclins à chercher quelque chose qui défile et qui retourne ensuite. Ainsi, les taux de rebond sont beaucoup plus élevés sur mobile que sur les tablettes, généralement sur les tablettes. Les gens sont en fait à la recherche de divertissement ou ils veulent lire quelque chose. Ils sont plus installés. Ce qui m'amène au point suivant ainsi, qui est que 60% de toutes les personnes qui utilisent une tablette qu'ils montent effectivement leur tablette droite ? Cela signifie qu'ils mettent leur tablette sur quelque chose afin qu'ils puissent utiliser leurs deux mains sur les 40% restants. Ils vont toujours regarder la tablette, puis utiliser leur main plus ancienne pour utiliser le Talbot et faire défiler et cliquer etcetera. Donc, cela signifie qu'environ 100% de tous les utilisateurs de tablettes ont utilisé leurs deux mains. Et cela a beaucoup de sens compte tenu de la taille de ces choses. Mais c'est bon pour nous de le savoir, parce que cela signifie que contrairement aux téléphones cellulaires, les gens auront plus de temps pour atteindre tous les endroits sur l'écran où ils sont sur un téléphone portable. Il y aura des endroits plus faciles et plus difficiles à atteindre. Cela ne signifie pas que vous avez complètement libre gamme avec les designs. Ils seront encore plus à moins d'être accessibles. Ce signe où vous mettez vos boutons d'appel à l'action où vous mettez vos informations importantes , etcetera afin d'optimiser votre site Web pour la conversion sur les téléphones cellulaires, sur les tablettes et sur le bureau, ils sont tous trois différents appareils et interfaces et, bien sûr, expériences utilisateur. Maintenant, avec une tablette, contrairement à un portable, vous avez beaucoup plus d'espace, non ? Mais la seule chose à garder en commun ici que c'est une erreur très courante quand il s'agit de l'expérience utilisateur. Ce signe pour tablette c'est les gens mis trop de junk sur leur site Web. Pour cette conception, moins est encore plus. Maintenant, vous devez être vraiment prudent lorsque vous vous concentrez sur l'expérience utilisateur et l' interface utilisateur pour un téléphone cellulaire, parce que vous n'avez pas beaucoup de base ici. Les histoires différemment ont en fait un peu plus d'espace, mais il est facile de mettre trop de déchets dans l'écran, obtenir une surcharge de contenu et d'information. Gardez-le propre, gardez-le vraiment agréable et propre et considérez-le comme une partie plus accessible d'un téléphone cellulaire . Mais vous devez toujours le rendre différent et bien paraître, mais ne l'encombrez pas. Ne l'encombrez pas. Ne mettez pas trop de choses inutiles. Gardez-le propre, gardez-le accessible et donnez la priorité à votre contenu. Et enfin, même si la majorité des utilisations sont utilisées dans l'orientation portrait, ce qui signifie qu'ils gardent la verticale sur leurs tablettes quand ils l'utilisent, vous devez toujours vous assurer que vous tenez compte du paysage orientation ? Et ce que je veux dire avec ça, c'est que, par exemple, vous pourriez penser que créer une liste comme celle-ci est une bonne idée parce que ça a l'air vraiment sympa . Vous pouvez faire défiler la liste avec votre contenu et il n'a pas l'air agréable. Maintenant, le problème avec cette liste est que lorsque vous passez d'un mode portrait en mode paysage, cela n'a tout simplement plus l'air si agréable. On peut voir qu'il y a beaucoup de gaspillage d'espace à droite qui va être rempli de rien ou B va être rempli d'un tas de contenu qui va juste être surcharge de contenu. Donc ce genre de liste, le signe ne va tout simplement pas fonctionner maintenant. Si nous utilisons une autre conception, un design de bloc classique , par exemple, où vous avez votre gros contenu à l'avant et ensuite vous avez des morceaux plus petits en bas avec, par exemple, vos messages récents avec vos articles avec des tutoriels ou vos produits, quoi que ce soit pour vous offrir, il va vraiment bien paraître dans un mode paysage à droite, parce que nous pouvons le voir vraiment bien là-bas sur l'écran aussi. Et si tu le retournes en portrait, ça va toujours avoir l'air très bien. Ça va avoir l'air un peu différent. Ça va juste général, si c'est un peu plus et être un peu plus petit, mais ça va toujours être très bon, et tu voudras peut-être changer le signe. Il y a bien. Donc, au lieu d'avoir six produits différents apparaissent, peut-être seulement quand je montre six, parce que vous voulez les rendre plus grands, etcetera. Mais le fait est, vous devez vous assurer que vous comptez pour le mode paysage demandé. Eh bien, alors n'utilisez pas la conception de la liste. Passons maintenant à la prochaine conférence, et nous allons adapter notre site Web pour les tablettes, même si ce n'est que 4% du trafic, 4% quand vous avez des milliers et des milliers de visiteurs, ça va devenir énorme, surtout lorsque nous savons que nous avons doublé la rétention sur le site Web. Pour ces utilisateurs, et la rétention que nous savons signifie combien de temps les gens restent et les utilisateurs mobiles intéressant. Ils préfèrent rester pendant environ quatre minutes en moyenne, tandis que les utilisateurs de tablettes il arrive de rester deux jusqu'à huit minutes et au-dessus des statistiques très intéressantes. Passons donc à la prochaine conférence et commençons à concevoir pour les tablettes. 16. Le design de la tablette: D' accord, les gars. Donc, dans cette conférence, nous allons aller de l'avant et nous concentrer sur la conception de l'utilisateur sur notre page d'accueil et notre site Web pour tablettes . Ok, donc tu connais la perceuse. On va utiliser l'élémentaire. On va aller de l'avant et passer au mode responsive et cliquer sur Tablet. Et nous voilà maintenant, je ne vais pas devenir folle sur celui-ci. Je vais être très intuitif. Et en fait pas trop de mélange s'il n'en a pas besoin. Parce que rappelez-vous, nous allons avoir beaucoup de pages à optimiser et à concevoir, surtout pour les ordinateurs de bureau et surtout pour les mobiles et les tablettes hors cours. Vous voulez que ça paraisse bien, mais toujours 4% de réduction sur votre trafic, est-ce pas ? Alors faites-le bien paraître, mais ne deviens pas fou ici pour le design. Je ne fais pas de major dans les mineurs, c'est mon avis. Alors allons-y et vérifions ça. fait, Enfait, je suis très content de celui-ci. J' aime bien le design. On va directement au but. Au début, nous devons en apprendre plus. Nous avons la prochaine section qui apparaît. n'y a rien que je veux vraiment changer intuitivement. Donc je vais faire défiler et vérifier le poignet. Je pense que ça a l'air vraiment bon et sympa pour maintenant celle-là. Je ne suis pas aussi grand fan de. On peut voir qu'il y a beaucoup d'espace ici. On peut voir qu'il y a beaucoup d'espace ici, donc pour moi, ça ne fait pas trop d'espace. Ce que je vais aller de l'avant et faire, c'est en fait écouter la taille de cette image de fond. Maintenant, je pense que c'est vraiment beau et beau parce qu'il couvre tout l'écran comme ça. Mais je pense toujours qu'il y a un peu trop d'espace entre les sections. Je vais aller de l'avant et cliquer ici, et ensuite je vais passer au style. On y va. Et puis je vais aller de l'avant et passer à poser après séjour à la mise en page, plutôt, et je vais commencer à jouer avec la hauteur minimale. Droit. Donc je vais aller de l'avant et voir ce qui a l'air bien, quelque chose comme ça. On y va. Alors maintenant, quand on fait défiler ça, on peut voir qu'il ne couvre pas tout l'écran comme avant, ce qui est vraiment beau. Un spécial sur bureau et sur mobile, à mon avis. Mais nous devons aussi tenir compte du si nous utilisons le mode portrait ou paysage Maintenant, je veux être un peu plus direct au but ici. Alors que nous faisons défiler vers le bas, nous passons en fait. Nous avons l'e-mail ouvert que nous déplaçons ou vers les cours les plus vendus. Alors peut-être un peu plus grand. On y va. Donc nous n'avons pas la même quantité dingue d'espace, mais c'est là que nous allons. OK, c'est le point doux. Donc, ne rien faire pour créer pour entendre le texte est bien. Tout a l'air comme il le devrait. Vraiment content de ça. Maintenant quoi ? Nous pourrions également aller de l'avant et faire comme nous l'avons fait dans la version mobile est de rendre cette partie audacieuse. Droit ? Donc on va juste entrer ici et cliquer sur le B, rendre cette partie audacieuse parce qu'on est en direction d'elle. Donc, tout à coup, c'est plus facile à lire. Vraiment creuser ça alors défilant vers le bas ? Aimeriez-vous nos cours ici ? Eh bien, ça a l'air sympa, pour être honnête. Je pense qu'il y a un peu trop de blanc autour de ça. Donc je vais aller de l'avant et enlever le rembourrage pour les blancs, qui apparaît dans les colonnes. Donc ce que je vais faire, c'est cliquer sur une paire pour l'édition et éditer cette colonne, et ensuite je vais passer pour avancer ici. Et maintenant, afin de bien éditer cela, ce que je dois faire est de savoir ce que les tailles d'origine viennent organiquement bureau ici et nous pouvons voir que le rembourrage est 50 droit ? En tapant ses 50 ans. Revenons à la tablette. Si j'écris 50 rien ne va vraiment se passer parce que c'est l'original. Il n'arrive pas ici. Maintenant, je vais probablement vouloir utiliser environ la moitié, donc je vais écrire 25 quelque chose comme ça. Donc ça ne prend pas autant d'espace qu'ils étaient partis. J' aime ce design, donc je vais juste cliquer sur celui-ci. Allez à l'avance, passez au rembourrage et écrivez 25 ici. La houle. Faites la même chose ici. Par ici. Rembourrage avancé 25. On y va. Un peu plus propre. Je creuse ce regard beaucoup plus. Joli. Tout droit au point. Maintenant, je préférerais qu'il y ait un peu plus d'espace entre ces cours. Donc ce que je vais aller de l'avant et faire est en fait augmenter la marge entre les cours et la façon la plus simple de le faire vraiment. Pour être honnête, cliquez ici pour modifier la colonne du milieu. Je vais aller avancer, et ensuite je vais vérifier leur région. Cette marge est de 30. Ok, je sais que ça va revenir. Assurez-vous que je suis toujours là. Et maintenant, je vais écrire quelque chose comme le coffre-fort 50 50. Ça pourrait être bon. Ok, peut-être même 70. On y va. Donc je pense que 70. Peut-être que c'est fini de le faire un peu. Je vais faire 50 comme ça. Je pense que ça a l'air sympa. Donc il y a un peu plus d'espace qui se passe. Et aussi, cette boîte devient un peu plus petite, donc je vais l'appliquer à toutes les colonnes. Ils vont à droite marge 50. Et je vais écrire la marge ici aussi. Cinquante, je frappe deux oiseaux avec une pierre. Cette terrible expression, au fait. Et je fais un peu plus d'espace entre les deux tout en rendant cela plus petit. Donc je creuse ça. Je pense que ça a l'air vraiment sympa. Je pense qu'il faut tout droit au but. Je suis un grand fan de ça. Ça a l'air très agréable d'être honnête et fier de le voir. Donc, ceci a été ma tablette conçue pour l'interface utilisateur. Maintenant, ce sera à toi de décider comment tu décideras de faire ta décision. C' est un individu. Gardez juste l'expérience utilisateur à l'esprit, , parce qu'ils vont retourner ça. Ça va avoir l'air différent, mais on n'utilise pas la liste. Par exemple, ça va toujours paraître bien. Ça va toujours paraître bien avec des souris. Amenez-les sur la même rangée. On verra. Mais de toute façon, rien ne sera trop fou parce que nous avons gardé le design à l'esprit. Maintenant, la dernière chose que je veux vous montrer est que si vous passez à une tablette pour signer, ou peut-être même à un design mobile, ce qui pourrait arriver parfois est que le si vous utilisez plusieurs colonnes serait dans une section ils pourraient changer de place. Maintenant, il n'y a rien en vue sur cette colonne, est-ce pas, parce que si vous vous souvenez , quand on était à l'avortement du disque , on utilisait un appel supplémentaire ici pour mettre c'est plus à gauche. Donc, ce chroniqueur vide et qui est parfait pour le bureau. Si vous allez à la tablette, il suffit de déposer ci-dessous ici. Ok, maintenant, parce qu'on utilise une tablette et qu'on a été utilisé dans la réactivité du téléphone cellulaire. Est-ce que c'est une pile ? Droit ? Nous pouvons voir qu'ils s'empilent parce que c'est sur le dessus. C' est sur le fond. Donc si nous avions du contenu ici, je vais juste juste pour montrer ici, disons que nous avons eu ce texto ici, mais ils se sont empilés dans le mauvais ordre, non ? On n'a pas aimé ça. Tout ce que nous aurions besoin de faire pour empiler cela correctement est d'aller éditer une section par paire, puis sur avancé puis vers le bas à responsive ici. Et il y a quelque chose qui dit des colonnes inversées pour la tablette cette fois. Donc, si vous sentez ceux-ci dehors, alors ils seraient en marche arrière pour la tablette et pour le mobile. Droit ? Donc maintenant, nous pouvons voir que celui-ci est en fait sur le dessus. Celle-ci est en dessous, et tout ce qu'on aurait besoin de faire, c'est de les inverser et de les mettre souvent, ils vont revenir à leur position d'origine. Et encore une fois, c'est parce que la réactivité va empiler beaucoup de votre contenu, ce qui est beau, pour être honnête, design très fluide. Cela nous aide beaucoup, mais ils ne sont pas toujours empilés comme nous le voulons. Les gars du bon boulot. Maintenant, nous connaissons l'expérience utilisateur et l'interface utilisateur pour bureau, pour Mobil et pour tablettes. Il est temps de passer à autre chose et de commencer à éditer et à concevoir d'autres pages sur notre site Web. Et maintenant, nous allons commencer à utiliser des modèles et explorer comment nous pouvons les personnaliser pour créer des pages plus faciles, plus rapides et hors cours et les rendre absolument incroyables. Alors voyez dans la prochaine conférence, les gars.