Bidaya, votre site Web adaptatif et optimisé - Quatrième partie : optimisation de la performance Web - http://tellibus.com/blog/103

gistfile1.apacheconf

AddOutputFilterByType DEFLATE text/html

gistfile2.apacheconf

# Extraits de :
# Apache Server Configs v1.1.0 | MIT License
# https://github.com/h5bp/server-configs-apache

<IfModule mod_deflate.c>
  # Force compression for mangled headers.
  # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

  # Compress all output labeled with one of the following MIME-types
  # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
  #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
  #  as `AddOutputFilterByType` is still in the core directives).
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/x-web-app-manifest+json \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  </IfModule>
</IfModule>

gistfile3.phtml

<?php
/* ************************************************************************** *\
 * Code HTML et PHP du site monopage Bidaya                                   *
 * Billet de blog : http://tellibus.com/blog/103                              *
 * Démo : http://tellibus.com/bidaya/index-07.php                             *
 * CC-BY-SA tellibus.com                                                      *
\* ************************************************************************** */

ob_start('ob_gzhandler');

header('Content-Type: text/html; charset=UTF-8');

// https://www.progclub.org/blog/2012/01/10/compressing-html-in-php-no-comments-or-whitespace/
function slib_compress_html($buffer)
{
  $replace = array(
    "#<!--.*?-->#s" => "",      // enlever les commentaires HTML
    "#>\s+<#"       => ">\n<",  // enlever les espaces superflues
    "#\n\s+<#"      => "\n<"    // enlever les espaces superflues
  );
  $search = array_keys($replace);
  $html = preg_replace($search, $replace, $buffer);
  return trim($html);
}

ob_start('slib_compress_html');

// DetectMobileBrowsers.com - Version du 09/09/2013
$userAgent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $userAgent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($userAgent, 0, 4))) {
  $isMobile = true;
} else {
  $isMobile = false;
}
?>
<!doctype html>
<html dir=ltr lang=fr>
  <head>
    <title>Site Web gratuit et optimisé | Bidaya</title>

    <link rel=stylesheet type="text/css" href="css-04/bidaya.min.css">

    <!-- Sur le site Bidaya optimisé, il est inutile de zoomer sur appareils tactiles -->
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">

<?php if ($isMobile) { ?>

    <!-- Optimisation du viewport mobile -->
    <meta name=HandheldFriendly content=True>
    <meta name=MobileOptimized content=320>

    <!-- Mobile IE : activation de la technologie ClearType pour plus de lisibilité -->
    <meta http-equiv=cleartype content=on>

<?php } ?>

  </head>

  <body>
    <header>
      <a href="./index-03.php" id=logo><img src="img-04/logo-bidaya.png" width=50 height=50 alt="Logo Bidaya"></a>

      <a href="#" id=nav_toggle>Menu</a>

      <nav id=header_nav>
        <a href="#section_bidaya" class="nav-item nav-item-active">Bidaya</a>
        <a href="#section_responsive" class=nav-item>Base adaptative</a>
        <a href="#section_optimized" class=nav-item>Structure optimisée</a>
        <a href="#section_license" class=nav-item>Licence</a>
      </nav>
    </header>

    <section id=section_bidaya class=hero>

<?php if (!$isMobile) { ?>

      <aside id=hero_image>
        <img src="img-04/hero-image.png" width=346 height=277 alt="Logo Bidaya">
      </aside>

<?php } ?>

      <h1>Bidaya : votre site adaptatif performant</h1>

      <h2>Concevez votre site Web sur une base gratuite et optimisée</h2>

      <a href="#section_responsive" id=cta>Commencez »</a>
    </section>

    <section id=section_responsive class=main-section>
      <h2>Un site monopage sur bureau et multi-écrans sur mobiles</h2>

      <div class=column>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class=column>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class=column>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </section>

    <section id=section_optimized class=main-section>
      <h2>Démarrez sur une base déjà optimisée sur Apache et PHP</h2>

      <div class=column>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class=column>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class=column>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </section>

    <section id=section_license class=main-section>
      <h2>Code gratuit, même à usage commercial (avec attribution)</h2>

      <div class=column>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class=column>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class=column>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </section>

    <footer>
      <p>
        <a href="http://twitter.com/tellibus"><img src="img-04/twitter.png" width=39 height=39 alt="Logo Twitter"></a>
        <a href="http://fb.com/tellibus"><img src="img-04/facebook.png" width=39 height=39 alt="Logo Facebook"></a>
        <a href="http://github.com/tellibus"><img src="img-04/github.png" width=39 height=39 alt="Logo Github"></a>
      </p>

      <p>Licence : CC-BY-SA 3.0 <a href="http://tellibus.com">tellibus.com</a></p>
    </footer>

    <script src="js-04/zepto-combined.min.js"></script>
    <script src="js-04/zepto-slide-transition.min.js"></script>

    <script>$(document).ready(function(){var e=$(window),t=480,n=$("#nav_toggle"),r=$("#header_nav"),i=$("[id^=section_]"),s=$(".nav-item, #cta"),o=$(".main-section"),u="createTouch"in document?"tap":"click",d="main-section-disclosed",b="background-position-y",g="nav-item-active";function a(){i.hide().first().show()}function f(){o.removeClass(d).each(function(){$(this).find("p").hide().first().show()})}<?php
    
/************* Début des codes JavaScript conditionnels **************/

if ($isMobile) {

  // Code JavaScript à inclure uniquement pour les mobiles

?>var c=1;a();f();<?php

} else {

  // Code JavaScript à inclure uniquement pour les navigateurs bureau

?>var l=0,c=0;if(e.width()<=t){a();f();l=1}e.resize(function(){if(!l&&e.width()<=t){a();f();l=1}if(e.width()>t){r.removeAttr("style");if(l){l=0;i.show();n.css(b,"19px");o.find("p").show()}}});<?php

}

/************** Fin des codes JavaScript conditionnels ***************/

?>n.live(u,function(e){e.preventDefault();if(r.height()==0||r.css("display")=="none"){n.css(b,"-32px");r.slideDown()}else{n.css(b,"19px");r.slideUp()}});s.live(u,function(e){h=$(".nav-item[href='"+$(this).attr("href")+"']");if(!h.hasClass(g)){s.removeClass(g);h.addClass(g);if(c||l){i.hide();$(h.attr("href")).show();n.css(b,"19px");r.slideUp()}}});o.live(u,function(e){if(c||l){e.preventDefault();z=$(this);if(z.hasClass(d)){$(this).removeClass(d).find("p").hide().first().show()}else{$(this).addClass(d).find("p").show()}}})})</script>
  </body>
</html>
<?php

ob_end_flush(); // pour slib_compress_html()
ob_end_flush(); // pour ob_gzhandler()

?>

gistfile4.apacheconf

# ------------------------------------------------------------------------------
# | Billet de blog : http://tellibus.com/blog/103                              |
# | Démo : http://tellibus.com/bidaya/index-04.php                             |
# | CC-BY-SA tellibus.com                                                      |
# ------------------------------------------------------------------------------

# ------------------------------------------------------------------------------
# | Gestion de l’expiration des fichiers (1 mois par défaut)                   |
# | et activation du maintien de connexion (Keep-Alive)                        |
# ------------------------------------------------------------------------------

ExpiresActive On
ExpiresDefault A0
<FilesMatch "\.(js|css|png|ico)$">
  ExpiresDefault A2592000
  Header append Cache-Control "public"
  Header set Connection "Keep-Alive"
</FilesMatch>


# ------------------------------------------------------------------------------
# | Compression temps réel des fichiers HTML                                   |
# | Nécessite l’activation du module Apache mod_deflate                        |
# ------------------------------------------------------------------------------

# Si le module mod_deflate n’est pas activé, compressez plutôt via PHP
AddOutputFilterByType DEFLATE text/html


# ------------------------------------------------------------------------------
# | Envoi des ressources statiques compressées en lieu et place des ressources |
# | référencées dans le document HTML.                                         |
# | Exemple : le document appelle zepto.js et le fichier zepto.js.gz existe    |
# | dans le même répertoire.                                                   |
# ------------------------------------------------------------------------------

# Activation de la réécriture d’urls
RewriteEngine on

# Si le client accepte les contenus compressés…
RewriteCond %{HTTP:Accept-Encoding} gzip

# et si la ressource compressée existe…
RewriteCond %{REQUEST_FILENAME}.gz -f

# nous envoyons nom_fichier.[extension].gz au lieu de nom_fichier.[extension]
# et nous restreignons cette règle au fichiers CSS et JS dans notre cas.
RewriteRule ^(.+)\.(css|js)$ $1.$2.gz [L]

# Nous envoyons ensuite le bon en-tête…
<FilesMatch "\.gz$">
  Header set Content-Encoding gzip
  # Nous spécifions 1 mois pour la mise en cache et le maintien de la connexion
  ExpiresDefault A2592000
  Header append Cache-Control "public"
  Header set Connection "Keep-Alive"
</FilesMatch>

# puis nous spécifions les types de fichier pour ceux dont on a réécrit l’url
<FilesMatch "\.js\.gz$">
  AddType application/x-javascript    .gz
</FilesMatch>

<FilesMatch "\.css\.gz$">
  AddType text/css                    .gz
</FilesMatch>


# ------------------------------------------------------------------------------
# | Ajout de l’en-tête d’encodage variable pour les ressources disposant       |
# | d’une version non compressée et d’une autre compressée                     |
# ------------------------------------------------------------------------------

<FilesMatch "\.(js|css|gz)$">
  Header append Vary "Accept-Encoding"
</FilesMatch>

gistfile5.html

<meta charset=utf-8>

Blog post: http://tellibus.com/blog/103-Bidaya-votre-site-Web-adaptatif-et-optimisé--Quatrième-partie--optimisation-de-la-performance-Web