Cioè come velocizzare il Google translate button nel tuo sito
Per tradurre le proprie pagine in tante lingue è molto utile l’uso del Google translate button cioè il tasto di traduzione delle pagine fornito dalla Google:
Però come molti scripts introduce un tempo di ritardo che rallenta il caricamento della pagina, nel caso specifico il ritardo tipico misurato perché appaia il pulsante è di circa 1,2 secondi.
Questo penalizza il tempo di caricamento della pagina come puoi misurare dal tool Google: PageSpeed Insights, il quale ti da un “Time to Interactive” alto, qui ti spiego come ridurre il tempo di caricamento del traduttore google e in generale di qualunque script utile ma non usato da tutti gli utenti della tuo sito.
Normalmente dovresti aggiungere nella tua pagina gli scripts:
<script type=”text/javascript”>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: ‘it’}, ‘google_translate_element’);
}
</script>
<script type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”>
</script>
e mettere il seguente codice dove vuoi che appaia il tasto:
<div id=”google_translate_element”></div>
Se usi il seguente trucco PHP puoi avere la funzionalità del Google translate button senza aumentare “normalmente” il tempo di caricamento,
aggiungilo nel punto dove vuoi che appaia il tasto:
<?php
if ($_GET[‘Transl’] == “1”)
{
echo ‘<div style=”text-align: center;” id=”google_translate_element”></div>’;
echo ‘<script type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>’;
echo ‘<script type=”text/javascript”>’;
echo ‘function googleTranslateElementInit() {‘;
echo ‘ new google.translate.TranslateElement({pageLanguage: \’it\’}, \’google_translate_element\’);}’;
echo ‘</script>’;
} else
{
echo ‘<a rel=”noopener noreferrer nofollow” href=”tua_pagina.php?Transl=1″ title=”Google translate”>’;
echo ‘<img src=”tua_immagine.png” alt=”Google translate” title=”Google translate”></a>’;
}
?>
Dove tua_pagina.php è la tua pagina da tradurre e tua_immagine.png è l’immagine iniziale, che fa da segnaposto, ad esempio un’immagine simile al tasto stesso, che puoi eventulmente sostituire con del semplice testo, ad esempio Translate, rimuovendo l’immagine dal link.
Come funziona:
– all’apertura della tua pagina appare l’immagine o il testo messo come semplice link, quindi lo script non viene interpretato e il caricamento è veloce
– nel raro caso in cui l’utente vuole la traduzione preme il link e viene richiamata la stessa pagina con il parametro ?Transl=1
– si riapre la pagina ma questa volta il controllo if ($_GET[‘Transl’] == “1”) la apre con il tasto di traduzione vero e proprio, in questo raro caso l’utente è ben disposto ad aspettare quel secondo in più perché ha richiesto una funzione specifica a lui indispensabile.
– A questo punto l’utente sceglie la lingua in cui tradurre e Google translate fa il resto.
Rifai la misura con il PageSpeed Insights, e vedrai un “Time to Interactive”, e non solo quello, decisamente più basso.
Questa è la misura con lo script inserito:
Quest’altra è la misura senza script sempre inserito:
Suggerisco di aggiungere il Google translate button in cima, al centro o a destra, dove normalmente l’utente che non conosce la tua lingua ma è interessato alla tua pagina si aspetta e spera di trovare il link alla traduzione nella propria lingua.
Questo trucco per inserire il traduttore google è usato in questa pagina che stai leggendo, vedi il tasto al centro alla prima riga in cima accanto al menu; puoi fare la misura del tempo di caricamento con e senza il parametro ?Transl=1, cioè con e senza gli script del tasto di traduzione e vedere la differenza; puoi anche semplicemente fare il refresh della pagina e vedere nei due casi la differenza di caricamento.
Ricorda che il tempo di caricamento della pagina è fortemente influenzato dall’ hosting che usi, quelli gratuiti sono in genere piuttosto lenti, ti suggerisco uno di questi servizi affiliati, che al costo di pochi caffè al mese ti offrono un ottimo rapporto qualità/prezzo e una notevole velocità, per i miei siti li uso entrambi:
| SiteGround | Hosting Europeo |
| VHosting | Hosting Italiano |
