Last active
December 27, 2015 01:49
-
-
Save abennouna/7248208 to your computer and use it in GitHub Desktop.
Bidaya, votre site Web adaptatif et optimisé - Quatrième partie : optimisation de la performance Web - http://tellibus.com/blog/103
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| AddOutputFilterByType DEFLATE text/html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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() | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # ------------------------------------------------------------------------------ | |
| # | 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta charset=utf-8> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Blog post: http://tellibus.com/blog/103-Bidaya-votre-site-Web-adaptatif-et-optimisé--Quatrième-partie--optimisation-de-la-performance-Web