That is how to speed up the Google translate button on your site
To translate your pages into many languages it is very useful to use the Google translate button, i.e. the page translation button provided by Google:
However, like many scripts, it introduces a delay time that slows down the loading of the page, in this specific case the typical delay measured for the button to appear is about 1.2 seconds.
This penalizes the page load time as you can measure from the Google tool: PageSpeed Insights,which gives you a high “Time to Interactive”, here I explain how to reduce the loading time of the google translator and in general of any script that is useful but not used by all the users of your site.
Normally you should add the scripts to your page:
<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>
and put the following code where you want the key to appear:
<div id=”google_translate_element”></div>
If you use the following PHP trick you can have the functionality of the Google translate button without increasing the loading time “normally”,
add it where you want the button to appear:
<?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>’;
}
?>
Where your_page.php is your page to be translated and your_image.png is the initial image, which acts as a placeholder, for example an image similar to the key itself, which you can eventually replace with simple text, for example Translate, by removing the image from the link.
How does it work:
– when you open your page, the image or text placed as a simple link appears, so the script is not interpreted and loading is fast
– in the rare case in which the user wants the translation, he presses the link and the same page is called up with the parameter ?Transl=1
– the page is reopened but this time the if control ($ _GET [‘Transl’] == “1”) opens it with the translation key itself, in this rare case the user is willing to wait for that second moreover because it required a specific function that was indispensable to him.
– At this point the user chooses the language in which to translate and Google translate does the rest.
Redo the measurement with the PageSpeed Insights,and you will see a “Time to Interactive”, and not only that, much lower.
This is the measure with the inserted script:
This other is the measure without script always inserted:
I suggest adding the Google translate button at the top, center or right, where normally the user who does not know your language but is interested in your page expects and hopes to find the link to the translation in their language.
This trick to insert the google translator is used in this page you are reading, see the button in the center of the first line at the top next to the menu; can you measure the loading time with and without the parameter? Transl = 1, i.e. with and without the translation key scripts and see the difference you can also simply refresh the page and see the difference in loading in both cases.
Remember that the page loading time is strongly influenced by the hosting you use, the free ones are usually quite slow, I suggest one of these affiliate services, which at the cost of a few coffees a month offer you an excellent quality / price ratio and a remarkable speed, for my sites I use both:
| SiteGround | European Hosting |
| VHosting | Italian Hosting |
