Catégorie : Optimisation de site Web

Technique alternative pour charger Google Custom Search sans ralentir votre site Web

Lorsque j’ai intégré la recherche de Bulledev, j’ai choisi un moteur de recherche Custom Search de Google, parce que la recherche de WordPress est bien trop limitée.

Je cherchais une façon d’intégrer la recherche de Google sans ajouter une dizaine de requêtes et 200 ko de fichiers supplémentaires comme le fait la méthode standard. J’ai donc trouvé cette technique dans la documentation de Google.

Démo

En résumer, avec cette méthode, la recherche est chargée uniquement après le déclenchement d’un événement JavaScript, dans le cas ci-dessous un “click” de l’utilisateur.

<!DOCTYPE html>
    <html>
    <head>
        <title>Recherche Google</title>
        
        
        <script>
            var renderSearchElement = function() {
                google.search.cse.element.render(
                    {
                        div: "wrap-search",
                        tag: 'search'
                    });
            };
            
            var myCallback = function() {
                if (document.readyState == 'complete') {
                    renderSearchElement();
                } else {
                    google.setOnLoadCallback(renderSearchElement, true);
                }
            };
            
            window.__gcse = {
                parsetags: 'explicit',
                callback: myCallback
            };
            
            var loadElements = function() {
                var cx = '000888210889775888983:tmhkkjoq81m';
                var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
            }
        </script>
    </head>
    
    <body>
        <button type="button" onclick="javascript:loadElements()">
            Afficher la recherche
        </button>
        
        <div id="wrap-search"></div>
    
    </body>
</html>

Mon site Web ne se prête malheureusement pas bien à cette façon d’intégrer Google Site Search, par contre cette technique serait parfaite pour un site tel que HTML5 Rock parce que leur recherche nécessite déjà un clic de l’utilisateur pour être affiché.

html5rock

À votre tour

Je suis vraiment curieux de savoir de quelle manière vous avez intégré la recherche de Google dans votre site. Si vous avez utilisé une autre façon, autre que les techniques par défaut, n’hésitez pas à commenter.

Transférer les scripts minifiés par W3 Total Cache dans le footer

J’utilise pour ce blogue W3 Total cache, une extension pour mettre en cache, minifier et combiner les scripts. Si vous utilisé cette extension avec la minification automatique, le script minifié sera ajouté dans le header de votre site…ce qui n’est pas idéal.

En effet, il est préférable d’inclure les scripts dans le bas de page. Pour qu’un navigateur puisse afficher une page à l’utilisateur, il devra analyser la page. Si le navigateur rencontre un script externe, il y aura un blocage lors de l’analyse et il devra s’arrêter et télécharger ce Javascript. À chaque fois que le navigateur fait cela, il ajoute un aller-retour au serveur, ce qui retardera le temps de chargement de la page. Pour en savoir plus, rendez-vous sur le site de Google Developers

W3 Total Cache Minification Automatique

Pour transférer les JavaScripts dans le footer, vous devez seulement ajouter ceci &lt;!— W3TC-include-js-head —&gt; dans le footer.php de votre thème, juste avant la fermeture de la balise &lt;/body&gt; .

<!– W3TC-include-js-head –>
</body>