Jump to content

Lenteur Chargement Page De Ma Boutique

morphinux
 Share

Recommended Posts

morphinux Newbie

morphinux

Posted
Posted (edited)

Bonjour,

 

Suite à un mauvais choix de forum, je déplace mon sujet ici pour exposer mon problème. Certain ont déjà répondu. Voici mon message :

 

Bonjour,

 

Je suis, actuellement, en phase de création d'un site marchant que voici à partir de la solution e-commerce "prestashop". J'ai acheté un thème particulier pour ma boutique mais ce dernier semble poser des problèmes car les pages du site se chargent très lentement. Voici le résultat de mon test sur GTMETRIX. J'ai réussi à régler quelques problèmes à partir des solutions recommander mais pour le reste, je ne vois pas comment faire car mes connaissances sont assez maigres.

Il reste 8 problèmes à régler avec des recommandations mais malheureusement tout est en anglais. J'arrive à comprendre l'essentiel mais sur ces 8 points, je ne vois pas comment m'y prendre.

 

 

Combine images using CSS sprites

F (0)

62% Images Medium Specify image dimensions

F (39)

51% Images High Remove unused CSS

F (1.6)

63% CSS Low Use efficient CSS selectors

F (0)

20% CSS Low Defer parsing of JavaScript

C (79)

66% JS High Inline small JavaScript

B (84)

97% JS High Avoid bad requests

B (85)

97% Content High Optimize images

 

 

1- le premier propose de combiner des images en créant des sprites, ce que j'ai fait pour les images que l'outil indique mais le résultat est problématique car certains background s'affichent en bandes verticales, notamment la bande noire du menu et des catégories. J'ai utilisé http://csssprites.com/ pour faire ces sprites.

2- il faut spécifier les dimensions des images mais je ne vois malheureusement pas où je peux indiquer ces paramètres dans mon backoffice et je ne trouve pas les fichiers html ou php sur mon serveur :-/

3 4 5 6 - je ne comprends ce qu'il faut faire

 

Il est clair que je dois absolument améliorer la vitesse de chargement pour ne pas faire fuir les acheteurs.

 

J'ai donc besoin d'une aide précieuse pour optimiser ma boutique.

 

Merci d'avance

 

Nicolas

 

Une première réponse de romain28 :

 

Bonsoir,

 

+1 Label

Vous vous êtes trompé de section.

 

Néanmoins, je vais vous donner la réponse :

 

- Les dimensions d'images sont gérées par les fichier .tpl et/ou .css

Vous devrez rajouter/modifier les lignes correspondantes aux images/éléments (rajouter ou mettre une valeur autre que auto width et height)

 

Fichier template de votre module slider et produit phares à modifier pour votre page d'accueil

 

L'optimisation n'est pas dans les sprites pour vous (sauf si vous avez des heures/jours devant vous). Investissez dans un serveur dédié (on en trouve de très performant à 40€/m) et vos pages se chargeront en 2sec ou moins ;)

 

PS: Dans les appels html il y a un 404 sur votre fichier grid_prestashop.css et ca ralentit vos pages !

 

Bonne soirée

 

et ma dernière réponse :

 

Bonjour,

 

En effet, je ne suis pas dans la bonne section :unsure: , désolé.

Ok, pour les fichiers .tpl, je vais regarder ça.

Concernant mon serveur, je suis déjà chez OVH, idem pour ma base sql.

Ok, pour le fichier grid_prestashop mais que dois-je faire exactement, le supprimer.

 

Je vais déplacer ce sujet dans la bonne section.

 

Merci

 

Nicolas

 

Voilà où j'en suis, je vais donc partir à la recherche des fichiers .tpl pour régler ce problème de dimensions d'images.

Edited by morphinux (see edit history)
Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted (edited)

Concernant les dimensions d'images, j'ai spécifié les dimensions width:377px et height:288px, à la fois dans le fichier tmnivoslider.tpl, dans le fichier tmnivoslider.php et dans le css global mais rien ne change lors du test gtmetrix !!!

 

Voici les fichiers en question :

 

tmnivoslider.tpl (en rouge, la ligne modifiée)

{if $page_name == 'index'}
<script type="text/javascript" src="{$this_path}js/nivo.slider.js"></script>
<div id="tmnivoslider">	
<div id="slider">
{foreach from=$xml->link item=home_link name=links}
	<a href="{$home_link->url}">[b][color=#ff0000]<img style="width:377px; height:288px;" src="{$this_path}{$home_link->img}" alt="" title="#htmlcaption{$smarty.foreach.links.iteration}" />[/color][/b]</a>
{/foreach}
</div>
{foreach from=$xml->link item=home_link name=links}
	<div id="htmlcaption{$smarty.foreach.links.iteration}" class="nivo-html-caption">
		<h2>{$home_link->$field1}</h2>
		<h3>{$home_link->$field2}</h3>
		<h4>{$home_link->$field3}</h4>
		<h5>{$home_link->$field4}</h5>
		<a class="slide_btn" href="{$home_link->url}">{$home_link->$field5}</a>
	</div>
{/foreach}
</div>
<script type="text/javascript">
{literal}
$(window).load(function() {
$('#slider').nivoSlider({
	effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
	slices:10,
	animSpeed:500, //Slide transition speed
	pauseTime:5000,
	startSlide:0, //Set starting Slide (0 index)
	directionNav:false, //Next & Prev
	directionNavHide:false, //Only show on hover
	controlNav:true, //1,2,3...
	controlNavThumbs:true, //Use thumbnails for Control Nav
	  controlNavThumbsFromRel:false, //Use image rel for thumbs
	controlNavThumbsSearch: '.jpg', //Replace this with...
	controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
	keyboardNav:true, //Use left & right arrows
	pauseOnHover:true, //Stop animation while hovering
	manualAdvance:false, //Force manual transitions
	captionOpacity:1.0, //Universal caption opacity
	beforeChange: function(){},
	afterChange: function(){},
	slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
{/literal}
</script>
{/if}

 

tmnivoslider.php ( ligne 129)

<?php
class TMNivoslider extends Module
{
 protected $maxImageSize = 307200;
protected $_xml;
protected $_defaultLanguage;
protected $_languages;
 function __construct()
 {
 	 $this->name = 'tmnivoslider';
	$this->tab = 'front_office_features';
 	 $this->version = '1.5';
	 parent::__construct();
	$this->page = basename(__FILE__, '.php');
	 $this->displayName = $this->l('TM Nivo Slider');
	 $this->description = $this->l('Slide the images with choosen languages');

	/* initiate values for translation */
	$this->_defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$this->_languages = Language::getLanguages();
	/* put xml in cache */
	$this->_xml = $this->_getXml();
 }
function install()
{
	if (!parent::install() OR !$this->registerHook('top'))
		return false;
	return true;
}
function putContent($xml_data, $key, $field)
{
/*
$field = htmlspecialchars($field);
*/
if ((int)ini_get('magic_quotes_gpc')==1 && ((int)ini_get('magic_quotes_sybase')==0)) {$field=stripslashes($field);}
	if (!$field)
		return 0;
	return ("\n".'		<'.$key.'>'.$field.'</'.$key.'>');
}
 function getContent()
 {
	global $cookie;
	/* Languages preliminaries */
	$defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$languages = Language::getLanguages();
	$iso = Language::getIsoById($defaultLanguage);
	$isoUser = Language::getIsoById(intval($cookie->id_lang));

 	 /* display the module name */
 	 $this->_html = '<h2>'.$this->displayName.' '.$this->version.'</h2>';
 	 /* update the editorial xml */
 	 if (isset($_POST['submitUpdate']))
 	 {
		// Generate new XML data
 	 	 $newXml = '<?xml version=\'1.0\' encoding=\'utf-8\' ?>'."\n";
		$newXml .= '<links>'."\n";
		$i = 0;
		foreach ($_POST['link'] as $link)
		{
			$newXml .= '	<link>';
			foreach ($link AS $key => $field)
			{
				if ($line = $this->putContent($newXml, $key, $field))
					$newXml .= $line;
			}
			/* upload the image */
			if (isset($_FILES['link_'.$i.'_img']) AND isset($_FILES['link_'.$i.'_img']['tmp_name']) AND !empty($_FILES['link_'.$i.'_img']['tmp_name']))
			{
				Configuration::set('PS_IMAGE_GENERATION_METHOD', 1);
				if ($error = checkImage($_FILES['link_'.$i.'_img'], $this->maxImageSize))
					$this->_html .= $error;
			elseif (!$tmpName = tempnam(_PS_TMP_IMG_DIR_, 'PS') OR !move_uploaded_file($_FILES['link_'.$i.'_img']['tmp_name'], $tmpName))
				return false;
			elseif (!imageResize($tmpName, dirname(__FILE__).'/slides/slide_0'.$i.'.jpg'))
				$this->_html .= $this->displayError($this->l('An error occurred during the image upload.'));
			unlink($tmpName);
			}
			if ($line = $this->putContent($newXml, 'img', 'slides/slide_0'.$i.'.jpg'))
				$newXml .= $line;
			$newXml .= "\n".'	</link>'."\n";
			$i++;
		}
		$newXml .= '</links>'."\n";
		/* write it into the editorial xml file */
		if ($fd = @fopen(dirname(__FILE__).'/links.xml', 'w'))
		{
			if (!@fwrite($fd, $newXml))
				$this->_html .= $this->displayError($this->l('Unable to write to the editor file.'));
			if (!@fclose($fd))
				$this->_html .= $this->displayError($this->l('Can\'t close the editor file.'));
		}
		else
			$this->_html .= $this->displayError($this->l('Unable to update the editor file.<br />Please check the editor file\'s writing permissions.'));
 	 }
	if (Tools::isSubmit('submitUpdate'))
	{
			$output .= '<div class="conf confirm"><img src="../img/admin/ok.gif" alt="'.$this->l('Confirmation').'" />'.$this->l('Settings updated').'</div>';
	}
	 /* display the editorial's form */
 	 $this->_displayForm();
 	 return $this->_html;
 }
static private function getXmlFilename()
{
	return 'links.xml';
}
private function _getXml()
{
	if (file_exists(dirname(__FILE__).'/'.$this->getXmlFilename()))
	{
		if ($xml = @simplexml_load_file(dirname(__FILE__).'/'.$this->getXmlFilename()))
			return $xml;
	}
	return false;
}
public function _getFormItem($i, $last)
{
	global $cookie;
	$this->_xml = $this->_getXml();
	$isoUser = Language::getIsoById(intval($cookie->id_lang));
	$divLangName = 'texts'.$i;
	$output = '
		<div class="item" id="item'.$i.'" style="position:relative;">
			<h3>'.$this->l('Item #').($i+1).'</h3>
			<input type="hidden" name="item_'.$i.'_item" value="" />';
	$output .= '
			<label>'.$this->l('Slide image').'</label>
			<div class="margin-form">
			    <div><img src="'.$this->_path.'slides/slide_0'.$i.'.jpg" alt="" title="" style="width:377px; height:288px;" /></div>
				<input type="file" name="link_'.$i.'_img" />
				<p style="clear: both"></p>
			</div>';
	$output .= '
			<label>'.$this->l('Slide URL').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][url]" size="64" value="'.$this->_xml->link[$i]->url.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '<fieldset style="font-size:1em;">';
	$output .= '<div style="position:absolute;">';
	$output .= $this->displayFlags($this->_languages, $this->_defaultLanguage, $divLangName , 'texts'.$i, true);
	$output .= '</div>';

	foreach ($this->_languages as $language)
	{

	$output .= '<div id="texts'.$i.'_'.$language['id_lang'].'" style="display:'.($language['id_lang'] == $this->_defaultLanguage ? 'block' : 'none').';">';

	$output .= '
			<label>'.$this->l('Field #1').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][field1_'.$language['id_lang'].']" size="64" value="'.$this->_xml->link[$i]->{'field1_'.$language['id_lang']}.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '
			<label>'.$this->l('Field #2').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][field2_'.$language['id_lang'].']" size="64" value="'.$this->_xml->link[$i]->{'field2_'.$language['id_lang']}.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '
			<label>'.$this->l('Field #3').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][field3_'.$language['id_lang'].']" size="64" value="'.$this->_xml->link[$i]->{'field3_'.$language['id_lang']}.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '
			<label>'.$this->l('Field #4').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][field4_'.$language['id_lang'].']" size="64" value="'.$this->_xml->link[$i]->{'field4_'.$language['id_lang']}.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '
			<label>'.$this->l('Button text').'</label>
			<div class="margin-form" style="padding-left:0">
				<input type="text" name="link['.$i.'][field5_'.$language['id_lang'].']" size="64" value="'.$this->_xml->link[$i]->{'field5_'.$language['id_lang']}.'" />
				<p style="clear: both"></p>
			</div>';

	$output .= '</div>';

	}
	$output .= '</fieldset>';

	$output .= '
			<div class="clear pspace"></div>
			'.($i >= 0 ? '<a href="javascript:{}" onclick="removeDiv(\'item'.$i.'\')" style="color:#EA2E30"><img src="'._PS_ADMIN_IMG_.'delete.gif" alt="'.$this->l('delete').'" />'.$this->l('Delete this item').'</a>' : '').'
		<hr/></div>';
	return $output;
}
 private function _displayForm()
 {
	global $cookie;
	/* Languages preliminaries */
	$defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$languages = Language::getLanguages();
	$iso = Language::getIsoById($defaultLanguage);
	$isoUser = Language::getIsoById(intval($cookie->id_lang));
 	 /* xml loading */
 	 $xml = false;
 	 if (file_exists(dirname(__FILE__).'/links.xml'))
		  if (!$xml = @simplexml_load_file(dirname(__FILE__).'/links.xml'))
			  $this->_html .= $this->displayError($this->l('Your links file is empty.'));
			$this->_html .= '
	<script type="text/javascript">
	function removeDiv(id)
	{
		$("#"+id).fadeOut("slow");
		$("#"+id).remove();
	}
	function cloneIt(cloneId) {
		var currentDiv = $(".item:last");
		var id = ($(currentDiv).size()) ? $(currentDiv).attr("id").match(/[0-9]/gi) : -1;
		var nextId = parseInt(id) + 1;
		$.get("'._MODULE_DIR_.$this->name.'/ajax.php?id="+nextId, function(data) {
			$("#items").append(data);
		});
		$("#"+cloneId).remove();
	}
	</script>
	<form method="post" action="'.$_SERVER['REQUEST_URI'].'" enctype="multipart/form-data">
		<fieldset style="width: 800px;">
			<legend><img src="'.$this->_path.'logo.gif" alt="" title="" /> '.$this->displayName.'</legend>
				<div id="items">';
					$i = 0;
					foreach ($xml->link as $link)
					{
						$last = ($i == (count($xml->link)-1) ? true : false);
						$this->_html .= $this->_getFormItem($i, $last);
						$i++;
					}
					$this->_html .= '
			</div>
			<a id="clone'.$i.'" href="javascript:cloneIt(\'clone'.$i.'\')" style="color:#488E41"><img src="'._PS_ADMIN_IMG_.'add.gif" alt="'.$this->l('add').'" /><b>'.$this->l('Add a new item').'</b></a>';

	$this->_html .= '
			<div class="margin-form clear">
				<div class="clear pspace"></div>
				<div class="margin-form">
					 <input type="submit" name="submitUpdate" value="'.$this->l('Save').'" class="button" />
				</div>
			</div>

			</fieldset>
		</form>';
 }
 function hookTop($params)
 {
	global $cookie;
	/* Languages preliminaries */
	$defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$languages = Language::getLanguages();
	$iso = Language::getIsoById($defaultLanguage);
	$isoUser = Language::getIsoById(intval($cookie->id_lang));
 	 if (file_exists(dirname(__FILE__).'/links.xml'))
 		 if ($xml = simplexml_load_file(dirname(__FILE__).'/links.xml'))
 		 {
 		 	 global $cookie, $smarty;
			$smarty->assign(array(
				'xml' => $xml,
				'field1' => 'field1_'.$cookie->id_lang,
				'field2' => 'field2_'.$cookie->id_lang,
				'field3' => 'field3_'.$cookie->id_lang,
				'field4' => 'field4_'.$cookie->id_lang,
				'field5' => 'field5_'.$cookie->id_lang,
				'this_path' => $this->_path
			));
			return $this->display(__FILE__, 'tmnivoslider.tpl');
		}
	return false;
 }
}
?>

 

et le CSS global (partie qui concerne le module tmnivoslider

 

....
/* tmnivoslider.tpl */
#tmnivoslider {width:950px;height:288px;padding:0 0 20px 20px;overflow:hidden;}
#slider {width:377px;height:288px;margin : 0 auto;}

.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}

.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}

.nivo-html-caption {display:none;}

.nivo-caption {width:287px;height:288px;background:#403c3d;position:absolute;left:377px;top:0;z-index:89;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() !important;}
.nivo-caption > p {margin:0;padding:0 15px 0 30px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() !important;}
.nivo-caption h2 {padding:22px 0 0 0;font:normal 29px "Arial";color:#fff;}
.nivo-caption h3 {padding:1px 0 0 0;font:normal 16px "Arial";color:#F38815;}
.nivo-caption h4 {padding:14px 0 0 0;font:normal 12px/17px "Arial";color:#a09e9e;}
.nivo-caption h5 {padding:11px 0 0 0;font:normal 29px "Arial";color:#fff;}
.nivo-caption a.slide_btn {height:34px;display:inline-block;margin:20px 0 0 0;padding:0 20px;background:url(../img/slider_btn.png) 0 0 repeat-x;font:normal 16px/34px "Arial";color:#fff;text-decoration:none;
-webkit-border-radius:2px;
border-radius:2px;
}
.nivo-caption a.slide_btn:hover {color:#F38815;}

.nivo-controlNav {width:286px;height:288px;position:absolute;left:-286px;top:0;z-index:100;}
.nivo-controlNav a {width:256px;height:72px;display:block;padding:0 10px 0 20px;background:url(../img/slider_nav.png) 0 -72px no-repeat;font:14px/72px "Arial";color:#666;cursor:pointer;}
.nivo-controlNav a + a {}
.nivo-controlNav a.active {background-position:0 0;color:#353233;}
....

 

Merci d'avance pour m'aider à faire face à ces difficultés :wacko:

 

Nicolas

Edited by morphinux (see edit history)
Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted (edited)

Ok, merci maintenant cela n'apparait plus dans le test GTMETRIX mais il reste encore d'autres images concernées et je ne trouve pas le fichier .tpl qui leur correspond.

 

Voilà ce qu'il reste pour la partie "specify image dimensions"

 

he following image(s) are missing width and/or height attributes

 

 

http://www.cyclopneu...chelin-city.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...lve-courte-.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...home/cougar.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...continental.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...eed-king-22.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...ek-max-city.jpg (Dimensions: 170 x 170)

http://www.cyclopneu...-pilot-city.jpg (Dimensions: 170 x 170)

http://www.cyclopneu....jpg?1361356362 (Dimensions: 412 x 82)

 

et le nouveau test GTMETRIX. Je n'ai malheureusement pas gagné grand chose :( , plus de 7 secondes pour charger.

http://gtmetrix.com/...eus.fr/WwAfRKlG

Edited by morphinux (see edit history)
Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted

Alors, j'ai réussi à améliorer la situation en créant des sprites, ça m'a permi d'atteindre 95% en page speed. Mais pour le reste, jene comprends pas ce qu'il faut faire. J'ai beau tenter des traductions avec google mais c'est trop technique et incohérent.

 

Je m'en remets donc à vous pour m'aider à régler les problèmes de :

 

PAGE SPEED

- Defer parsing of JavaScript

- Avoid bad requests

- Use efficient CSS selectors

- Remove unused CSS

 

YSLOW

- Use cookie-free domains

- Make fewer HTTP requests

- Avoid AlphaImageLoader filter

- Configure entity tags (ETags)

- Avoid HTTP 404 (Not Found) error

- Put JavaScript at bottom

 

Mon dernier test : http://gtmetrix.com/reports/www.cyclopneus.fr/VhvFt2ei

6,86 secondes, c'est un peu mieux. :rolleyes:

Link to comment
Share on other sites
Romain28 Newbie

Romain28

Posted
Posted

Oublié toutes ces choses, vous voulez avoir les scores de Facebook ?

 

Investissez dans la location d'un Serveur Dédié et vos pages se chargeront en 2secondes !!

 

Pour les images restantes, c'est le template du module PRODUITS PHARES (featured products)

Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted (edited)

Ok, je comprends mais c'est l'avenir de ma boutique qui est en jeu. Des pages qui se chargent lentement auront de fortes répercussions sur la pérénité de ma boutique. Il me parait donc très pertinent d'insister sur ce point essentiel.Je pense avoir gagné un peu de temps grâce à votre aide en trouvant les bons templates. Pour le dernier, j'ai ajouté le width et le height à 170px dans le homefeature.tpl que voici :

 

{l s='Featured products' mod='homefeatured'}

{if isset($products) AND $products}


  • {foreach from=$products item=product name=homeFeaturedProducts}
  • {$link-getImageLink($product.link_rewrite,%20$product.id_image,%20
    {$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}
    {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}
    {$product.description_short|strip_tags|truncate:60:'...'}
    {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE} {if ($product.quantity > 0 OR $product.allow_oosp)} {l s='Add to cart' mod='homefeatured'} {else} {l s='Add to cart' mod='homefeatured'} {/if} {/if}
    {/foreach}

{else}

{l s='No featured products' mod='homefeatured'} {/if}

Il me reste encore des éléments que je ne comprends pas et qui semblent ralentir le chargement des pages notamment différer l'analyse du code javascript (Defer parsing of JavaScript) , le Add Expire Header qui coince avec 2 fichiers :There are 2 static components without a far-future expiration date.

et le "inline small javascript" qui concerne le fichier script.js : http://www.cyclopneu...73/js/script.js J'ai bien compris le principe mais je ne vois comment l'appliquer concrètement dans les fichiers et surtout dans lesquelles :wacko: .En tout cas, je pense avoir bien amélioré l'ensemble en minifiant les codes CSS, en créant des sprites et en indiquant les dimensions des images dans les templates.tpl.Néanmoins, je trouve le chargement encore un peu lent.

 

Voici l'historique en graphique : http://gtmetrix.com/reports/www.cyclopneus.fr/8I3YfEZ9#report-history

 

 

Il faut bien avoir en tête qu'une navigation lente ne pose pas trop de problème lorsqu'on arrive pour la première fois sur le site,mais si la situation se répète tout au long de la navigation jusqu'à la validation du panier, cela peut finir par exaspérer et pousser l'acheteur à cliquer sur un autre site plus rapide. Je suis comme ça donc j'imagine que beaucoup d'autres acheteurs doivent l'être aussi.Nicolas

Edited by morphinux (see edit history)
Link to comment
Share on other sites
Dev On Web Apprentice

Dev On Web

Posted
Posted

Bonjour,

 

L'optimisation on-page c'est bien mais il faut aussi que tout aille bien côté serveur, sinon c'est totalement inutile.

Avoir un beau site bien codé avec un serveur mutu qui rame à mort derrière ne fera jamais augmenter le temps de chargement de manière efficace !

 

L'optimisation, c'est un tout, ne jamais l'oublier ;)

Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted (edited)

Bonjour,

 

L'optimisation on-page c'est bien mais il faut aussi que tout aille bien côté serveur, sinon c'est totalement inutile.

Avoir un beau site bien codé avec un serveur mutu qui rame à mort derrière ne fera jamais augmenter le temps de chargement de manière efficace !

 

L'optimisation, c'est un tout, ne jamais l'oublier ;)

 

Bonjour,

 

Je suis chez OVH (offre mutualisée), il me semblait que c'était un bon choix ???

 

Avant de me lancer dans le e-commerce, je me suis beaucoup documenté, j'ai aussi bénéficié des conseils et de l'expérience des personnes dans mon entourage + l'aide de la CCI (chambre de commerce). Je ne pense pas avoir galvaudé mes démarches, au contraire.

 

J'ai fait le choix d'un hébergeur reconnu (OVH) qui offre un grand nombre de services, Prestashop qui, soi-disant, dispose d'une communauté très riche et dynamique, j'ai opté pour un thème payant pour bien me démarquer que j'ai personnalisé et optimisé seul.

 

Aujourd'hui, mon site semble correct en temps de chargements des pages mais il reste encore quelques recommandations données par firefug à prendre en considération.

 

Nicolas

Edited by morphinux (see edit history)
Link to comment
Share on other sites
morphinux Newbie

morphinux

Posted
  • Author
Posted (edited)

Bonjour,

 

Oui, j'ai résolu mon problème en utilisant plusieurs outils. J'ai d'abord utilisé les outils du backoffice qui permettent d'optimiser une bonne partie des sources du programme. Il faut aller dans "performances" du menu "paramètres avancés" et cocher comme sur les impressions écran ci-dessous :

 

captur14.png

 

captur15.png

 

Un pont important :

quand vous bricolez dans les fichiers .tpl (templates), n'oubliez pas de recompiler les fichiers pour que les modifs soient prises en compte en cochant la case "recompiler les fichiers template ...." puis une fois fait, il faut cocher "ne pas recompiler les fichiers de templates" sinon ça ralentit le chargement des pages.

 

La partie CCC, vous permet de compresser une partie de vos fichiers en supprimant les espaces, les sauts de lignes et la syntaxe de certains fichiers CSS. Pensez aussi à utiliser des outils de compressions pour les autres fichiers .css

 

Ensuite, vérifiez votre fichier .htaccess à la racine de votre boutique (/) pour avoir les éléments suivant :

 

SetEnv PHP_VER 5
SetEnv REGISTER_GLOBALS 0

# ~~start~~ Do not remove this comment, Prestashop will keep automatically the code outside this comment when .htaccess will be generated again
# .htaccess automaticaly generated by PrestaShop e-commerce open-source solution
# http://www.prestashop.com - http://www.prestashop.com/forums

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule . - [E=REWRITEBASE:/]
RewriteRule ^api/?(.*)$ %{ENV:REWRITEBASE}webservice/dispatcher.php?url=$1 [QSA,L]

# Images
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]

# Dispatcher
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^.*$ - [NC,L]
RewriteCond %{HTTP_HOST} ^www.cyclopneus.fr$
RewriteRule ^.*$ %{ENV:REWRITEBASE}index.php [NC,L]
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|JPE?G|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>

# DESACTIVATION DU CACHE POUR LES FICHIERS DYNAMIQUES
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"  
</IfModule>


FileETag INode MTime Size
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

#If rewrite mod isn't enabled
ErrorDocument 404 /index.php?controller=404

# ~~end~~ Do not remove this comment, Prestashop will keep automatically the code outside this comment when .htaccess will be generated again

 

Attention à ne pas faire de copié collé direct de ce fichier car ce dernier correspond à ma config www.cyclopneus.fr donc pensez à l'adapter à votre propre config.

 

Par la suite, pensez à optimiser vos images en créant des sprites (j'ai gagné beaucoup de temps avec ce principe). Vous pouvez utiliser cet outil très facile à utiliser : http://spriteme.org/

 

Le principe est de rassembler plusieurs images en une seule puis on indique sa position dans le fichier CCS grâce à la propriété "background-position". Cet outil fonctionne avec le marque-page, vous ouvrez la page de votre site et vous lancez spriteme qui vous créera automatiquement un fichier image unique pour plusieurs images puis le code css à intégrer dans le fichier global.css ou autre.

 

A ce stade, lorsque vous faites un test gtmetrix ou avec firefug, vous vous apercevez que le gain est énorme. Vous pouvez encore améliorer en regroupant plusieurs script fichiers.js en un seul et plusieurs fichiers css en un seul.

 

Concernant les images, vous pouvez aussi indiquer les dimensions (width et heigh) de vos images dans les fichiers .tpl

 

Pour certain thème comme le mien, vous pouvez avoir une erreur qui renvoie vers le fichier grid-prestashop.css. Cette erreur est lié à une ligne dans le fichier global.css qui commence par @import. Si votre fichier grid-prestashop.css est vide alors vous pouvez supprimer la ligne @import dans le global.css. Dans mon cas, le gain a été énorme.

 

Il y a encore d'autre possiblité d'optimisation que je découvre au fur et à mesure mais pour le moment, je travaille sur mon business plan :wacko: , suis par rendu.

 

En espérant vous avoir aidé.

 

A bientôt

 

Nicolas

Edited by morphinux (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
A1TH Newbie

A1TH

Posted
Posted

Merci Nicoloas.

J'apprecie beaucoup ta réponse explicative qui je pense va en aider plus d'un.

Je suis moi-même dans cette phase d'optimisation d'un site et je bloque sur les points suivant dont tu mentionnes dans tes messages précédents

- différer l'analyse du code javascript (Defer parsing of JavaScript) : Comment faire ?

- intégrer les ressources CSS peu voluminueuse (Inline small CSS) : qu'est ce que ça veut dire et comment faire ?

 

j'ai encore d'autres points... mais étape par étape.

Merci d'avance pour les aides !

Link to comment
Share on other sites
  • 3 weeks later...
Kleduts Newbie

Kleduts

Posted
Posted

Bonjour,

 

- différer l'analyse du code javascript (Defer parsing of JavaScript) : Comment faire ?

 

=> Je ne vois pas trop. Je n'ai pas de réponse à t'apporter.

 

- intégrer les ressources CSS peu voluminueuse (Inline small CSS) : qu'est ce que ça veut dire et comment faire ?

 

Lorsque tu as un fichier CSS petit (mais où commence le petit/gros), il est préférable d'inclure le code dans le fichier HTML.

Cela évite ainsi un GET sur le serveur (c'est la même chose que de créer un sprite pour les images : limiter les GET sur le serveur).

 

Tu peux aussi inclure le code CSS dans le gros fichier CSS, sachant qu'il ne sera chargé qu'une seule fois lors du premier accès à ton site.

C'est cette solution que je préfère.

 

A+ / F.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...