Accessibilité et bonne pratique page speed

Phenomene · April 6, 2023

Bonjour, en effectuant les performances de mon site sur page speed, il apparaît plusieurs chose à régler au niveau de l'accessibilité et les bonnes pratiques. Si je ne fais rien que se passera-t-il au niveau de la seo ?

Mon site fonctionne avec prestashop 1.6 et le thème est évolution x.

PageSpeed Insights.pdf

Phenomene · April 6, 2023

Voici le fichier blocksearch.css

#search_block_top {

padding-top: 50px; }

#search_block_top #searchbox {

float: left;

width: 100%; }

#search_block_top .btn.button-search {

background: #FAA401;

display: block;

position: absolute;

top: 0;

right: 0;

border: none;

color: #333;

width: 50px;

text-align: center;

padding: 10px 0 11px 0; }

#search_block_top .btn.button-search span {

display: none; }

#search_block_top .btn.button-search:before {

content: "\f002";

display: block;

font-family: "FontAwesome";

font-size: 17px;

width: 100%;

text-align: center; }

#search_block_top .btn.button-search:hover {

color: #6f6f6f; }

#search_block_top #search_query_top {

display: inline;

padding: 13px 60px 13px 13px;

height: 45px;

background: #fbfbfb;

margin-right: 1px; }

.ac_results {

background: #fff;

border: 1px solid #d6d4d4;

width: 271px;

margin-top: -1px; }

.ac_results li {

padding: 0 10px;

font-weight: normal;

color: #686666;

font-size: 13px;

line-height: 22px; }

.ac_results li.ac_odd {

background: #fff; }

.ac_results li:hover, .ac_results li.ac_over {

background: #fbfbfb; }

form#searchbox {

position: relative; }

form#searchbox label {

color: #333; }

form#searchbox input#search_query_block {

margin-right: 10px;

max-width: 222px;

margin-bottom: 10px;

display: inline-block;

float: left; }

form#searchbox .button.button-small {

float: left; }

form#searchbox .button.button-small i {

margin-right: 0; }

/*# sourceMappingURL=blocksearch.css.map */

Phenomene · April 6, 2023

Voici le fichier global.css

.footer-container {

background-color: #333; }

@media (min-width: 768px) {

.footer-container {

background: url(../img/footer-bg.png) repeat-x #333; } }

.footer-container .container {

padding-bottom: 100px; }

.footer-container #footer {

color: #333333; }

.footer-container #footer .row {

position: relative; }

.footer-container #footer ul.row {

position: static; }

.footer-container #footer .footer-block {

margin-top: 45px; }

@media (max-width: 767px) {

.footer-container #footer .footer-block {

margin-top: 20px; } }

.footer-container #footer a {

color: #333333; }

.footer-container #footer a:hover {

color: #333; }

.footer-container #footer h4 {

font: 600 18px/22px "Open Sans", sans-serif;

color: #333;

margin: 0 0 13px 0;

cursor: pointer; }

@media (max-width: 767px) {

.footer-container #footer h4 {

position: relative;

margin-bottom: 0;

padding-bottom: 13px; }

.footer-container #footer h4:after {

display: block;

content: "\f055";

font-family: "FontAwesome";

position: absolute;

right: 0;

top: 1px; }

.footer-container #footer h4.active:after {

content: "\f056"; } }

.footer-container #footer h4 a {

color: #333; }

.footer-container #footer ul li {

padding-bottom: 8px; }

.footer-container #footer ul li a {

font-weight: bold;

text-shadow: 1px 1px 0px rgba(000); }

.footer-container #footer #block_contact_infos {

border-left: 1px solid #515151; }

@media (max-width: 767px) {

.footer-container #footer #block_contact_infos {

border: none; } }

.footer-container #footer #block_contact_infos > div {

padding: 0 0 0 5px; }

@media (max-width: 767px) {

.footer-container #footer #block_contact_infos > div {

padding-left: 0; } }

.footer-container #footer #block_contact_infos > div ul li {

padding: 0 0 7px 4px;

overflow: hidden;

line-height: 30px; }

.footer-container #footer #block_contact_infos > div ul li > span,

.footer-container #footer #block_contact_infos > div ul li > span a {

color: #333;

font-weight: normal; }

.footer-container #footer #block_contact_infos > div ul li i {

font-size: 25px;

width: 32px;

text-align: center;

padding-right: 12px;

float: left;

color: #333333; }

.footer-container #footer .blockcategories_footer {

clear: left; }

.footer-container #footer #social_block {

float: left;

width: 50%;

padding: 22px 15px 0 15px; }

@media (max-width: 767px) {

.footer-container #footer #social_block {

width: 100%;

float: left;

padding-top: 5px; } }

.footer-container #footer #social_block ul {

float: right; }

@media (max-width: 767px) {

.footer-container #footer #social_block ul {

float: none; } }

.footer-container #footer #social_block ul li {

float: left;

width: 40px;

text-align: center; }

@media (min-width: 768px) and (max-width: 991px) {

.footer-container #footer #social_block ul li {

width: 30px; } }

.footer-container #footer #social_block ul li a {

display: inline-block;

color: #908f8f;

font-size: 28px; }

@media (min-width: 768px) and (max-width: 991px) {

.footer-container #footer #social_block ul li a {

font-size: 20px; } }

.footer-container #footer #social_block ul li a span {

display: none; }

.footer-container #footer #social_block ul li a:before {

display: inline-block;

font-family: "FontAwesome";

vertical-align: -5px;

font-weight: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale; }

.footer-container #footer #social_block ul li a:hover {

color: #fff; }

.footer-container #footer #social_block ul li.facebook a:before {

content: "\f09a"; }

.footer-container #footer #social_block ul li.twitter a:before {

content: "\f099"; }

.footer-container #footer #social_block ul li.rss a:before {

content: "\f09e"; }

.footer-container #footer #social_block ul li.youtube a:before {

content: "\f167"; }

.footer-container #footer #social_block ul li.google-plus a:before {

content: "\f0d5"; }

.footer-container #footer #social_block ul li.pinterest a:before {

content: "\f0d2"; }

.footer-container #footer #social_block ul li.vimeo a:before {

content: "\f194"; }

.footer-container #footer #social_block ul li.instagram a:before {

content: "\f16d"; }

.footer-container #footer #social_block h4 {

Phenomene · April 6, 2023

En ce qui concerne les liens n'ont pas de nom visible, je ne sais pas ou aller pour les images.

Phenomene · April 6, 2023

Pour l'attribut [user-scalable="no"] est utilisé dans l'élément <meta name="viewport">, ou l'attribut [maximum-scale] est inférieur à 5.

J'ai supprimé dans le global.js de mon theme

var responsiveflag = false; $(document).ready(function(){ highdpiInit(); responsiveResize(); $(window).resize(responsiveResize); if (navigator.userAgent.match(/Android/i)) { var viewport = document.querySelector('meta[name="viewport"]'); viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height'); window.scrollTo(0, 1);

Phenomene · April 6, 2023

Vous pouvez trouver la discussion pour le meta viewport

Phenomene · April 6, 2023

Pour les couleurs d'arrière-plan et de premier plan qui ne sont pas suffisamment contrastées, dois-je rendre la couleur jaune ou orange moins foncé ? Ou seulement changer la couleur du bouton recherche ?

Phenomene · April 6, 2023

Pour les éléments d'en-tête qui ne sont pas classés séquentiellement par ordre décroissant, je ne sais pas quel fichier modifier.

Phenomene · April 6, 2023

Je voudrais savoir quel impact auront ces changements ?

Merci à vous de m'aider à optimisé ma boutique au maximum.

Phenomene · April 6, 2023

Pour le logo affichées il est apparemment incorrect. Pourtant, la taille recommandé par prestashop est bien 370 x 99. Alors que faire ?

Phenomene · April 6, 2023

Je crois que la réponse était dans le contenu de PageSpeed Insights, la taille attendue serait de 420 x 105. Alors comme, il existe la taille réelle et la taille affiché, je me demande quelle taille dois-je appliquer pour avoir le résultat de 420 x 105.

Phenomene · April 6, 2023

Pour ce qui concerne enregistrement d'un écouteur unload, je ne sais pas quel fichier modifier et comment ?

L'événement unload ne se déclenche pas de manière fiable, et son analyse risque d'empêcher les optimisations du navigateur telles que la mise en cache des pages précédentes et suivantes. Utilisez plutôt les événements pagehide ou visibilitychange. En savoir plus sur le déchargement des écouteurs d'événements

Phenomene · April 6, 2023

Pour les éléments tactiles qui ne sont pas dimensionnés correctement, je ne sais pas quel fichier modifier et comment ? Je n'ais pas trouvé de solution sur le net comme pour les autres sujets plus haut.

Phenomene · April 6, 2023

Je ne sais pas quel fichier modifier et comment pour éliminez les ressources qui bloquent le rendu ?

Phenomene · April 6, 2023

Assurez-vous que le texte reste visible pendant le chargement des polices Web ? Apparemment c'est inutile de perdre son temps avec ça

Phenomene · April 6, 2023

La page n'utilise pas d'écouteurs d'événements passifs pour améliorer les performances de défilement. Rien trouvé à ce sujet et je ne sais pas quel fichier et comment le modifier.

Phenomene · April 6, 2023

J'ai trouvé une pa

Phenomene · April 6, 2023

Pour les éléments d'image qui ne possèdent pas de width ni de height explicites j'ai trouvé une partie de la réponse ici, sauf que dans le fichier /themes/votretheme/modules/homefeatured/homefeatured.tpl, je n'ai pas de balise <img (il ne devrait y en avoir qu'une), et vous ajouter si elles n'y sont pas déjà, les attribut width="50" height="100" (50 et 100 étant un exemple...). Alors, quoi ajouter comme ligne.

le fichier homefeatured.tpl

{*

* 2007-2016 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{if isset($products) && $products}

{include file="$tpl_dir./product-list.tpl" class='homefeatured tab-pane' id='homefeatured'}

{else}

<li class="alert alert-info">{l s='No featured products at this time.' mod='homefeatured'}</li>

</ul>

{/if}

Phenomene · April 6, 2023

Pour diffusez des éléments statiques grâce à des règles de cache efficaces. là encore je ne sais pas quel fichier modifier et comment.

Phenomene · April 6, 2023

Merci de votre aide

Phenomene · April 9, 2023

On 4/6/2023 at 6:26 PM, Phenomene said:

Pour les éléments d'image qui ne possèdent pas de width ni de height explicites j'ai trouvé une partie de la réponse ici, sauf que dans le fichier /themes/votretheme/modules/homefeatured/homefeatured.tpl, je n'ai pas de balise <img (il ne devrait y en avoir qu'une), et vous ajouter si elles n'y sont pas déjà, les attribut width="50" height="100" (50 et 100 étant un exemple...). Alors, quoi ajouter comme ligne.

le fichier homefeatured.tpl

{*

* 2007-2016 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2016 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{if isset($products) && $products}

{include file="$tpl_dir./product-list.tpl" class='homefeatured tab-pane' id='homefeatured'}

{else}

<ul id="homefeatured" class="homefeatured tab-pane">

<li class="alert alert-info">{l s='No featured products at this time.' mod='homefeatured'}</li>

</ul>

{/if}

Faut-il modifier le fichier fichier blockreinsurance.php ?

Désolé pour le format du fichier.

352175485_fichierblockreinsurance_php1.1_00001.zip

Phenomene · April 9, 2023

Pourquoi le fichier en jpg. Parce que le site m'à bloquer lorsque j'ai voulu copier coller. Un message est apparu en demandant de mettre le fichier en jpg

Phenomene · April 9, 2023

Comment régler le problème First Contentful Paint (3G) 5190 ms ?

First Contentful Paint 3G marks the time at which the first text or image is painted while on a 3G network. Learn more about the First Contentful Paint (3G) metric.

Phenomene · April 9, 2023

Que faut-il modifier ?

<div id="search_block_top" class="col-sm-4 clearfix">
   <form id="searchbox" method="get" action="{$link->getPageLink('search', null, null, null, false, null, true)|escape:'html':'UTF-8'}" >
       <input type="hidden" name="controller" value="search" />
       <input type="hidden" name="orderby" value="position" />
       <input type="hidden" name="orderway" value="desc" />
       <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
       <button type="submit" name="submit_search" class="btn btn-default button-search">
           <span>{l s='Search' mod='blocksearch'}</span>
       </button>
   </form>
</div>

Phenomene · April 9, 2023

On 4/6/2023 at 4:16 PM, Phenomene said:

Pour l'attribut [user-scalable="no"] est utilisé dans l'élément <meta name="viewport">, ou l'attribut [maximum-scale] est inférieur à 5.

J'ai supprimé dans le global.js de mon theme

var responsiveflag = false; $(document).ready(function(){ highdpiInit(); responsiveResize(); $(window).resize(responsiveResize); if (navigator.userAgent.match(/Android/i)) { var viewport = document.querySelector('meta[name="viewport"]'); viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height'); window.scrollTo(0, 1);

Apparemment cela n'à pas fonctionner

Éléments non conformes

head > meta

net2ftp-1681051478.zip

Phenomene · April 9, 2023

Je pense avoir fait le tour sur internet. Je sollicite votre aide pour régler tous les problèmes citer au dessus. Merci

Phenomene · April 18, 2023

On 4/6/2023 at 6:26 PM, Phenomene said:

Pour les éléments d'image qui ne possèdent pas de width ni de height explicites j'ai trouvé une partie de la réponse ici, sauf que dans le fichier /themes/votretheme/modules/homefeatured/homefeatured.tpl, je n'ai pas de balise <img (il ne devrait y en avoir qu'une), et vous ajouter si elles n'y sont pas déjà, les attribut width="50" height="100" (50 et 100 étant un exemple...). Alors, quoi ajouter comme ligne.

le fichier homefeatured.tpl

{*

* 2007-2016 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2016 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{if isset($products) && $products}

{include file="$tpl_dir./product-list.tpl" class='homefeatured tab-pane' id='homefeatured'}

{else}

<ul id="homefeatured" class="homefeatured tab-pane">

<li class="alert alert-info">{l s='No featured products at this time.' mod='homefeatured'}</li>

</ul>

{/if}

Faut-il ajouter quelque chose comme ça : <img width="64" height="64" src="some-image.jpg"/> dans le le fichier blockreinsurrance ?

après ceci

{if $infos|@count > 0}

<div id="reinsurance_block" class="clearfix">
   <ul class="width{$nbblocks}">
       {foreach from=$infos item=info}
           <li><img src="{$link->getMediaLink("`$module_dir`img/`$info.file_name|escape:'htmlall':'UTF-8'`")}" alt="{$info.text|escape:html:'UTF-8'}" /> <span>{$info.text|escape:html:'UTF-8'}</span></li> <img width="64" height="64" src="some-image.jpg"/>
       {/foreach}
   </ul>
</div>

{/if}

Phenomene · April 18, 2023

Ou est-ce cette modification qu'il faut apporter au fichier block reinsurance ?

Exemple

Si vous avez une image sur votre site comme celle-ci :

Admettons que l'image a des dimensions de 200 x 200. Le code de l'image deviendra :

https://fr.docs.wp-rocket.me/article/1369-ajouter-les-dimensions-dimage-manquantes

Phenomene · April 18, 2023

On 4/9/2023 at 4:10 PM, Phenomene said:

Comment régler le problème First Contentful Paint (3G) 5190 ms ?

First Contentful Paint 3G marks the time at which the first text or image is painted while on a 3G network. Learn more about the First Contentful Paint (3G) metric.

Pour résoudre le problème, tout se passe dans votre fichier .htaccess. Il faut définir la période de cache : 1 year

https://www.mercatique-electronique.com/exploiter-mise-cache-navigateur/#:~:text=Diffusez des éléments statiques grâce,) pour s'en resservir.

Accessibilité et bonne pratique page speed

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in