This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Our next available supporter will start replying to tickets in about 2.27 hours from now. Thank you for your understanding.

This topic contains 1 reply, has 2 voices.

Last updated by Harshad 6 years, 8 months ago.

Assigned support staff: Harshad.

Author Posts
March 2, 2013 at 5:55 am #108265

blanco page

Hello,

Using several languages in WPML, and having selectors on the page activated, downgraded our Page Speed and YSlow grades quite some percentages, due the load of the language images.

However, we managed to optimize everything with a few simple steps, including one 'hack'.

First, we want images are small as possible, so we did release Kraken.io on all the flag PNG files. Not to much to gain there, but we're used to do this optimization on all our images. Overall a 13% image reduction was gained

Second, we wanted to get the HTTP requests down. We thought about 'spriting' the flags, like we use to do with other images that returns regular on our pages. However, while spriting all the flags is possible, it's not as economic in general, since most of the flags will never be used, but the sprite will get downloaded even with a single language activated.
So we walked another path, and decided to data URI the flag images. This makes perfect sense, since they are small. And since we are using 4+ languages soon, and have language selectors on every page, it will reduces quite some HTTP requests overall. Browsing the WPML code, we managed to make a small 'hack' by patching a few lines. Maybe not optimal, but its working perfectly:

In the sitepress.class.php file we added a few lines (showing the code from line 4984 and on):


                $flag = $this->get_flag($lang_code);

                if($flag->from_template){
                    $wp_upload_dir = wp_upload_dir();
                    $flag_url = $wp_upload_dir['baseurl'] . '/flags/' . $flag->flag;
                }else{
                    $flag_url = ICL_PLUGIN_URL . '/res/flags/'.$flag->flag;
                }
 
                // URI those Flag! - Patch by CK

				$flag_file = ICL_PLUGIN_PATH . '/res/flags/'.$flag->flag;

				// Read image path, convert to base64 encoding
				$flag_base64 = base64_encode(file_get_contents($flag_file));

				// Format the image SRC:  data:{mime};base64,{data};
				$flag_uri = 'data:image/png;base64,'.$flag_base64;

				$w_active_languages[$k]['country_flag_url'] = $flag_uri;

                //Commented original line below for URL -> URI
                //$w_active_languages[$k]['country_flag_url'] = $flag_url;

                // End URI Patch
                                                                                               
                $w_active_languages[$k]['active'] = $this->get_current_language()==$lang_code?'1':0;;
            }

You can see the results of this on hidden link - Vovone

Using this data URI method brought us back from 95 on Page Speed to 99, and from 93 on YSlow to 98: hidden link - Test results on GTmetrix

There is only one downside on this method: It only works with all 'modern' browsers, and IE browser from version 8 and up. Everything below IE8 will not show the images, however they still show the image tag.

You think there is a change that this 'patch' might get included into a next version of WPML?

Thanks

- Casper

March 2, 2013 at 8:22 am #108283

Harshad

Dear Casper,

I will add this to our to do list, so that our development team can review it.
I can get a feedback from them, If this can be added in next version.

The topic ‘[Closed] Optimizing WPML’ is closed to new replies.