JeuWeb - Crée ton jeu par navigateur
L'optimisation maximale... - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : L'optimisation maximale... (/showthread.php?tid=2629)

Pages : 1 2


L'optimisation maximale... - Studio Gamboo - 01-06-2008

Bonjour à toute et à tous.

Je créer ce topic pour que nous parlions ensemble des meilleurs solutions d'optimisations pour nos jeux.
Je veux parler d'optimisations de vitesses, que ce soit coté client ou coté serveur Smile

J'imagine cela peut paraitre futile pour certains d'entre vous, mais personnellement je pense que toutes les optimisations sont bonnes à prendre (ne serait-ce que pour économiser des frais de serveurs, ou tout simplement pour la connaissance).


Voici quelques un des conseils (la plupart prodigués par yahoo...) que je vais essayer d'appliquer :
  • Placer les feuilles de styles en haut des documents
  • Placer les scripts dans le bas du documents
  • Placer les documents statiques (images,scripts,css...) sur un autre domaine (CDN)
  • Envoyer des headers cache-control pour tout les contenu statiques
  • Bien configurer les ETags
  • Utiliser une favicon.ico la plus légère possible
  • Utiliser les sprites css plutôt que plusieurs petites images

Voila, à vous les studios Smile


RE: L'optimisation maximale... - Sephi-Chan - 01-06-2008

Studio Gamboo a écrit :Voila, à vous les studios Smile
C'est toi le studio ! Confusediffle:

Sympatique sujet, ça pourra en aider plus d'un !

Je renvoie vers l'article de Yahoo Best Practices for Speeding Up Your Web Site pour les gens qui veulent avoir les autres astuces (pensez à cliquer sur l'onglet "All" en haut du document). Smile

Pour ma part, il y en a certains que je ne comprends pas bien :
  • Les ETags : je ne sais même pas comment ça se défini, je me renseignerais ;
  • L'utilisation d'un autre domaine pour les contenus statiques : ça implique d'avoir un autre serveur à disposition ! :O

L'une des plus simples astuces est l'envoi de données compressées par GZip dont je pense qu'on peut abuser. Même IE4 gérait ça ! D'ailleurs, comment s'intérprète la citation qui suit ?
Citation :Gzipping generally reduces the response size by about 70%.
Mon document qui fait en tout 100 Mo pèse combien en arrivant sur le navigateur client ? 70 Mo ou 30 Mo ?


Sephi-Chan


RE: L'optimisation maximale... - Studio Gamboo - 01-06-2008

Pour les ETags, tu peut les désactiver via ton .htaccess assez simplement, si le mod headers d'apache est activé.

Pour l'utilisation d'un autre domaine pour les contenu statique, pas besoin d'un autre serveur, un sous domaine suffit simplement. En fait l'intérêt de cette technique est de détourner la limitation technique des navigateurs actuels qui ne peuvent demander que 2 ressources simultanément par domaine. Avoir deux domaine permet donc de multiplier par deux les requêtes sur le site.

Je rajouterai également, et on ne le dit jamais assez, du coté serveur il fait essayer de mettre en cache le maximum de choses (grosses requêtes sql qui ne changent pas souvent, bout de templates, objets etc...). Ca permet d'allèger souvent le travail sur le serveur Smile


RE: L'optimisation maximale... - Sephi-Chan - 01-06-2008

Tiens, je vais en profiter pour demander quelque chose à propos de la mise en cache de requête qui ne changent pas souvent. Est-ce que ça veut dire que la requête est la même avec un paramètre différent (l'id d'un joueur par exemple) ? Ou bien est-ce que c'est quand la requête est vraiment statique ?

Concernant le reste, c'est dans ce sens là que je voulais utiliser un cache (typiquement un fichier qui contient le HTML prêt à l'emploi) de différentes parties de pages. Mais ça requiert Nombre de page * Nombre de langue et dans certains cas, le statut du joueur (connecté ou non).

Je pense donc faire ça pour certains bouts de pages et économiser le reste à l'aide d'Ajax.


Sephi-Chan


RE: L'optimisation maximale... - Anthor - 01-06-2008

Je t'avais envoyé un script pour le cache gzip avec etag.

Cela demande la librairie html.so

Code PHP :
<?php
/**
*
* Web D20
* Copyright FOURNET Loïc - 2005/2008
*
*/
require_once dirname( __file__ ) . '/_config.php';

if (
$_SERVER['HTTP_HOST'] == 'localhost' )
define( '__ROOTPATH', 'http://localhost/anthor' );
else
define( '__ROOTPATH', 'http://www.anthor.net' );

ob_start();

/**
* The mkdir function does not support the recursive parameter in some version of
* PHP run by Web Hosting. This function simulates it.
*/

function mkdir_r( $dir_name, $rights = 0777 )
{
$dirs = explode( "/", $dir_name );
$dir = "";
foreach (
$dirs as $part )
{
$dir .= $part . "/";
if ( !
is_dir($dir) && strlen($dir) > 0 )
mkdir( $dir, $rights );
}
}

/**
* Wich file are we asking ?
*/
$src_uri = str_replace( __ROOTPATH . '/gz-cache', '', 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
$dirname = dirname( __file__ );

/**
* List of known content types based on file extension.
* Note: These must be built-in somewhere...
* Like finfo_file, to try
*/

$known_content_types = array( "htm" => "text/html", "html" => "text/html", "js" => "text/javascript", "css" =>
"text/css", "xml" => "text/xml", "gif" => "image/gif", "jpg" => "image/jpeg", "jpeg" => "image/jpeg", "png" =>
"image/png", "txt" => "text/plain" );

/**
* Verify the existence of the target file.
* Return HTTP 404 if needed.
*/

if ( !is_file($dirname . $src_uri) )
{
header( "HTTP/1.1 404 Not Found" );
echo (
"<html><body><h1>HTTP 404 - Not Found</h1></body></html>" );
exit;
}

/**
* Set the HTTP response headers that will
* tell the client to cache the resource.
*/

$file_last_modified = filemtime( $dirname . $src_uri );
header( "Last-Modified: " . date("r", $file_last_modified) );

$max_age = 300 * 24 * 60 * 60; // 300 days

$expires = $file_last_modified + $max_age;
header( "Expires: " . date("r", $expires) );

$etag = dechex( $file_last_modified );
header( "ETag: " . $etag );

$cache_control = "must-revalidate, proxy-revalidate, max-age=" . $max_age . ", s-maxage=" . $max_age;
header( "Cache-Control: " . $cache_control );

/**
* Check if the client should use the cached version.
* Return HTTP 304 if needed.
*/

if ( function_exists("http_match_etag") && function_exists("http_match_modified") )
{
if (
http_match_etag($etag) || http_match_modified($file_last_modified) )
{
header( "HTTP/1.1 304 Not Modified" );
exit;
}
}

/**
* Extract the directory, file name and file
* extension from the "uri" parameter.
*/

$uri_dir = "";
$file_name = "";
$content_type = "";

$uri_parts = explode( "/", $src_uri );

for (
$i = 0; $i < count($uri_parts) - 1; $i++ )
$uri_dir .= $uri_parts[$i] . "/";

$file_name = end( $uri_parts );

$file_parts = explode( ".", $file_name );
if (
count($file_parts) > 1 )
{
$file_extension = end( $file_parts );
$content_type = $known_content_types[$file_extension];
}

/**
* Get the target file.
* If the browser accepts gzip encoding, the target file
* will be the gzipped version of the requested file.
*/

$dst_uri = $dirname . $src_uri;

$compress = true;

/**
* Let's compress only text files...
*/

$compress = $compress && ( strpos($content_type, "text") !== false );

/**
* Finally, see if the client sent us the correct Accept-encoding: header value...
*/

$compress = $compress && ( strpos($_SERVER["HTTP_ACCEPT_ENCODING"], "gzip") !== false );

if (
$compress )
{
$gz_uri = $dirname . '/_cache/gzip' . $src_uri . '.gz';

if (
file_exists($gz_uri) )
{
$src_last_modified = filemtime( $dirname . $src_uri );
$dst_last_modified = filemtime( $gz_uri );

/**
* The gzip version of the file exists, but it is older
* than the source file. We need to recreate it...
*/
if ( $src_last_modified > $dst_last_modified )
unlink( $gz_uri );
}

if ( !
file_exists($gz_uri) )
{
if ( !
file_exists($dirname . '/_cache/gzip' . $uri_dir) )
mkdir_r( $dirname . '/_cache/gzip' . $uri_dir );

$error = false;

/**
* Output a gzipped minified javascript version of the input file
*/
if ( strpos($content_type, "javascript") !== false )
{
require_once
dirname( __file__ ) . '/_moteur/jsmin.php';

if (
$fp_out = gzopen($gz_uri, "wb") )
{
if (
$data = file_get_contents($dirname . $src_uri) )
{
gzwrite( $fp_out, JSMin::minify($data) );
gzclose( $fp_out );
}
else
{
$error = true;
}
}
else
{
$error = true;
}
}

/**
* Output a gzipped minified css version of the input file
*/
elseif ( strpos($content_type, "css") !== false )
{
require_once
dirname( __file__ ) . '/_moteur/cssmin.php';

if (
$fp_out = gzopen($gz_uri, "wb") )
{
if (
$data = file_get_contents($dirname . $src_uri) )
{
gzwrite( $fp_out, cssmin::minify($data) );
gzclose( $fp_out );
}
else
{
$error = true;
}
}
else
{
$error = true;
}
}

/**
* Output a gzipped text version of the input file
*/
else
{
if (
$fp_out = gzopen($gz_uri, "wb") )
{
if (
$data = file_get_contents($dirname . $src_uri) )
{
gzwrite( $fp_out, $data );
gzclose( $fp_out );
}
else
{
$error = true;
}
}
else
{
$error = true;
}
}
if ( !
$error )
{
$dst_uri = $gz_uri;
header( "Content-Encoding: gzip" );
}
}
else
{
$dst_uri = $gz_uri;
header( "Content-Encoding: gzip" );
}
}
/**
* Output the target file and set the appropriate HTTP headers.
*/
if ( $content_type )
header( "Content-Type: " . $content_type );

header( "Content-Length: " . filesize($dst_uri) );

readfile( $dst_uri );

ob_end_flush();
?>
Brut de décoffrage, je remettrais en forme sous peu ^^

PS: Ton fichier fera 30 mo ^^


RE: L'optimisation maximale... - Sephi-Chan - 01-06-2008

Je cerne pas l'intérêt par rapport à :
Code PHP :
<?php 
ob_start
("ob_gzhandler");



RE: L'optimisation maximale... - Studio Gamboo - 02-06-2008

En effet syndrom, c'était un abus de langage de ma part Wink
Au niveau de la limitation, celle-ci devrait passer à 6 sous firefox 3 et ie8, mais bon je pense que l'intérêt est toujours présent...


RE: L'optimisation maximale... - Anthor - 02-06-2008

Sephi-Chan a écrit :Je cerne pas l'intérêt par rapport à :
Code PHP :
<?php 
ob_start
("ob_gzhandler");

* Contrôler que le fichier est ou n'est pas plus récent que la version en cache chez le client, pour économiser la bande passante.
* Stocker un fichier déjà g-zippé sur le serveur pour économiser des ressources.
* Minifier les fichiers CSS pour économiser de la bande passante.
* Minifier les fichiers Javascript pour pouvoir travailler plus simplement et économiser de la bande passante.

Sur environ 140ko, la page passe à 40ko environ, et ne renvoi que les fichiers non cachés chez le client, plus vieux que 300 jours, ou ayant été mis à jour sur le serveur.

Pour la minification :
http://code.google.com/p/jsmin-php/
http://code.google.com/p/cssmin/


RE: L'optimisation maximale... - Studio Gamboo - 06-06-2008

En parlant de CDN, Google vient de lancer un service assez sympa bien que limité :
http://code.google.com/apis/ajaxlibs/
C'est un CDN qui distribue n'importe quelle version de n'importe quel framework javascript avec les avantages que cela implique :
Les librairies sont gzippés, minifiés, toujours à jours, et envoyé d'un server géographiquement proche de l'utilisateur Smile


RE: L'optimisation maximale... - saluki - 29-06-2008

question :

j'ai actuellement un dédié sous ovh et j'ai un serveur mutualisé chez one que j'utilise très peu. Si je mets mes images sur le serveur mutualisé, est-ce que cela va réellement alléger mon serveur ET augmenter la vitesse d'affichage de mes pages ?