web-dev-qa-db-fra.com

Tirer parti de la mise en cache du navigateur pour JS tiers

J'ai défini Expiry sur mon httpd.conf

ExpiresActive On
ExpiresDefault "access plus 1 month"
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 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

Cela facilite la mise en cache du navigateur pour les images, les fichiers de polices, les fichiers css et js du site. Mais j'ai aussi un JS externe inclus sur mon site web:

http://connect.facebook.net/en_US/sdk.js (20 minutes)
http://apis.google.com/js/client.js (30 minutes)
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 minutes)
https://platform.Twitter.com/widgets.js (30 minutes)
https://www.google-analytics.com/analytics.js (2 hours)

Google Pagespeed Insights indique pour les fichiers supérieurs: Définir une date d'expiration ou un âge maximum dans les en-têtes HTTP pour les ressources statiques indique au navigateur de charger les ressources précédemment téléchargées à partir du disque local plutôt que sur le réseau.

Comment exploiter le cache du navigateur pour ces fichiers JS externes? De l'aide ?

phpapache.htaccesscachinggoogle-pagespeed
27
Vivek Tankaria

Un problème ennuyant, en effet. Je ne crains rien qui soit aussi facilement réparable. Mais ce que vous pouvez faire est d’utiliser une variable cron.

Tout d'abord, gardez à l'esprit qu'il est très peu probable que Google vous pénalise pour ses propres outils (comme Analytics). Cependant, comme mentionné précédemment, il peut être corrigé à l'aide de cron, ce qui signifie que vous chargez le code JavaScript localement et extrayez les scripts mis à jour.

Comment faire ceci

Tout d’abord, vous devez télécharger le script que vous exécutez. Je vais utiliser Google Analytics comme exemple (cela semble être le script le plus problématique, mais on peut le répliquer pour tous les scripts externes).

Cherchez dans votre code et trouvez le nom du script, dans notre cas, il s'agit de: google-analytics.com/ga.js. Insérez cette URL dans votre navigateur Web pour afficher le code source. Faites-en simplement une copie et enregistrez-la sous le nom ga.js.

Enregistrez ce fichier JavaScript nouvellement créé sur votre serveur Web, dans mon cas:

- JS
  - ga.js

Ensuite, vous devrez mettre à jour le code sur les pages qui appellent votre script et simplement changer le répertoire qui appelle le fichier JavaScript. Encore une fois dans notre cas, nous allons changer cette ligne:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

à

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js';

À ce stade, votre site exécutera maintenant le script à partir de votre site Web localement! Cependant, cela signifie que le script ne sera jamais mis à jour. Sauf si vous relancez ce processus court chaque semaine. C'est à vous de décider ... mais je suis beaucoup trop paresseux pour cela.

C’est là que le CRON entre en jeu:

À peu près tous les services d’hébergement auront la possibilité de configurer des tâches cron. Sur Hostinger, il se trouve sur votre panneau d’hébergement, sur GoDaddy, vous le trouverez sous l’option Contenu.

Mettez le script suivant dans votre cron et tout ce que vous avez à faire est de changer le chemin absolu de la variable $localfile. Ce script extrait le script mis à jour de Google pour le fichier ga.js. Vous pouvez définir la fréquence à laquelle vous souhaitez exécuter ce processus. Allant d'une fois par heure à une fois par mois et au-delà.

Si vous le faites également pour des fichiers externes autres que Google Analytics, vous devrez également modifier la variable $remoteFile. Donc, $remoteFile est l'URL du fichier JavaScript externe et la variable $localFile vous indiquera le chemin d'accès à votre nouveau fichier stocké localement, c'est simple!

<?
// script to update local version of Google analytics script

// Remote file to download
$remoteFile = 'http://www.google-analytics.com/ga.js';
$localfile = 'ENTER YOUR ABSOLUTE PATH TO THE FILE HERE';
//For Cpanel it will be /home/USERNAME/public_html/ga.js

// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$Host = $url['Host'];
$path = isset($url['path']) ? $url['path'] : '/';

if (isset($url['query'])) {
  $path .= '?' . $url['query'];
}

$port = isset($url['port']) ? $url['port'] : '80';
$fp = @fsockopen($Host, '80', $errno, $errstr, $connTimeout );
if(!$fp){
  // On connection failure return the cached file (if it exist)
  if(file_exists($localfile)){
    readfile($localfile);
  }
} else {
  // Send the header information
  $header = "GET $path HTTP/1.0\r\n";
  $header .= "Host: $Host\r\n";
  $header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";
  $header .= "Accept: */*\r\n";
  $header .= "Accept-Language: en-us,en;q=0.5\r\n";
  $header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";
  $header .= "Keep-Alive: 300\r\n";
  $header .= "Connection: keep-alive\r\n";
  $header .= "Referer: http://$Host\r\n\r\n";
  fputs($fp, $header);
  $response = '';

  // Get the response from the remote server
  while($line = fread($fp, 4096)){
    $response .= $line;
  }

  // Close the connection
  fclose( $fp );

  // Remove the headers
  $pos = strpos($response, "\r\n\r\n");
  $response = substr($response, $pos + 4);

  // Return the processed response
  echo $response;

  // Save the response to the local file
  if(!file_exists($localfile)){
    // Try to create the file, if doesn't exist
    fopen($localfile, 'w');
  }

  if(is_writable($localfile)) {
    if($fp = fopen($localfile, 'w')){
      fwrite($fp, $response);
      fclose($fp);
    }
  }
}
?>

C’est tout, et devrait résoudre les problèmes que vous rencontrez avec Les scripts de tierce partie de Leverage Browser Caching.

Source: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

REMARQUE:

En réalité, ces fichiers n’ont généralement pas d’effet important sur la vitesse de votre page. Mais je peux comprendre l'inquiétude que vous avez avec Google qui vous pénalise. Mais cela ne se produirait que si vous utilisiez un nombre LARGE important de ces scripts externes. Tout ce qui a trait à Google ne vous sera pas reproché, comme je l’ai dit précédemment.

41
Joe

Pas sûr que cet extrait de code puisse aider quelqu'un, mais de toute façon, voici comment je cache un fichier js externe. 

<script>
 $.ajax({
 type: "GET",
 url: "https://www.google-analytics.com/analytics.js",
 success: function(){},
 dataType: "script",
 cache: true
 });
</script>
3
Nuno Sarmento

Si vous êtes sur WordPress, vous pouvez utiliser le plug-in "Cache External Scripts" pour cela. Avec un minimum de modifications du code du plugin, vous pouvez ajouter un support pour les fichiers javascript tiers en plus de ceux de Google.

0
Ron Warshawsky