Google Translate - translateelement.css is render-blocking

[Benny]

Hi,

When checking my site speed on PageSpeed Insights, I'm seeing that this file is render-blocking my page and lowering my speed rank:

• https://translate.googleapis.com/translate_static/css/translateelement.css

Is there a way to resolve this?

I was thinking of downloading the css file and uploading it to my site and minifying it, but I can't figure out where to call the file from..

I'm using a custom module that integrates Google Translate with Opencart, and the module's developer said it's out of his control and to ask here, since he didn't change anything in the original code from Google..

Any ideas?

Thank you!

www.gadecosmetics.ca

Opencart 1.5.4.1

Google Translate module by:

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5368&filter_search=translate

[Miguel García Sánchez - Colomer]

¡Hi Benny!,

i have solved this issue using google translate with "flags icons":

A sample to translate to Chinese;

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Czh-CN&amp;hl=es&amp;ie=UTF8');return false" title="Google-Translate-Chinese (Simplified) BETA"><img style="border:0 solid;cursor:pointer;width:32px;height:32px" alt="Google-Translate-Chinese" src="[CHINA_FLAG_ICON_32X32]" title="Google-Translate-Chinese"></a>

Best regards,

[Benny]

Hi Miguel!

Thank you for your response!

I'm not sure what I'm supposed to do here.. Do I need to manually create each and every translation feed in that way?

Like I mentioned before, I'm using a module that works 'out of the box' and I'm really not sure how to go about creating every link manually inside that module..

All I need is to understand which function (or which part of the code) is making the call to that external css file, so I can redirect the path to my own server.

If that's not possible, then I'd really appreciate if you can elaborate on your method in more detail..

Thanks again!

[Miguel García Sánchez - Colomer]

Hi Benny!,

but what's your score?.

With my example you have to build your own source code based on it:

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Czh-CN&amp;hl=es&amp;ie=UTF8');return false" title="Google-Translate-Chinese (Simplified) BETA"><img style="border:0 solid;cursor:pointer;width:32px;height:32px" alt="Google-Translate-Chinese" src="[CHINA_FLAG_ICON_32X32]" title="Google-Translate-Chinese"></a>

<a target="_blank" rel="nofollow" --> that part of the code it's to open the web translated in another window.

onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=es%7Czh-CN&amp;hl=es&amp;ie=UTF8');return false" title="Google-Translate-Chinese (Simplified) BETA"> --> it's to translate to Chinese the URL when the user click on it.

<img style="border:0 solid;cursor:pointer;width:32px;height:32px" alt="Google-Translate-Chinese" src="[CHINA_FLAG_ICON_32X32]" title="Google-Translate-Chinese"></a> --> You can insert in [CHINA_FLAG_ICON_32X32] a 32x32 icon with the Chinese Flag.

You can use this code with different flags and different Google-Translate-[language] to translate your web.

It's another method to use Google Translate but without .css or .js in your web. It's an example.

If you copy the code to your hosting (like Google Drive or something), If Google updates its code, you will not have that update and you might have bugs.

You can use the method you like. But if your score it's not bad, don't worry it's only a suggestion not a mandatory change.

Best regards!