Loading speed is one of the most important things for each website owner. Everybody care how fast their site is. And that is absolutely understandable. It is really irritating, when you browse slow site, isn’t it? That is the reason cache plugins to be one of the most popular applications. We have noticed that 85 % of our customers have cache plugin installed or any cache option activated.

To meet our customers’ needs we have worked over several modules and features of Easy Social Share Buttons that help about speed optimization.
With version 4 we have entirely put into action “load on demand” technology. We have Build-In cache module and static resource optimizations that can help load optimize the site even without any separate cache plugin.
The other change we have made on loading speed point was long time ago. Since version 2 of Easy Social Share Buttons we provide divided desktop and mobile display methods, which is really big step about speed optimization.

Why separate desktop and mobile display methods are better than responsive design?

The conventional responsive design includes into page size all the functions necessary to visualize the buttons on the desktop and mobile device. The control over the visibility is based on the width of the screen. No matter of the device used, with each load the code for desktop and mobile is generated, but only one of them is visualized.

With the mobile displays we have applied at Easy Social Share Buttons the check for the type of the device is on server level. That way ESSB loads only the code that respond the device type used. The advantages of that technique are three:

  1. Avoid loading unnecessary data – As you probably can guess less code means faster load. Is there need to explain more? 🙂
  2. Additional mobile speed optimization can be done 
  3. Control over everything – On mobile you can set absolutely different outlook of the buttons, that fit best on your mobile website design and functionality. On out thought that is something really important! There are really great desktop displays, but they are not appropriate for mobiles, because of the small width of the screen. That is why we offer our customers the freedom to make choice.

It is very important to mention that Easy Social Share Buttons supports responsive display too! But with that method the outlook of the buttons can be changed only for those displays, marked as mobile. We say that because sometimes our users insist to use responsive type of display with non-mobile based displays and in same time want to change the mobile display of the buttons.

Separate desktop/mobile displays and cache plugins

The users that care about the loading speed usually combine server detected mobile display with cache plugin. What is really important in that setting configuration is the type of the cache plugin used. Most of the cache plugins do not support separate cache for desktop and mobiles and for that reason the methods set for each device type do not display correctly. In that case desktop and mobile displays are transposed and which of them will display depends on what devise each URL is opened for first time. That issue is easy to be explained – with the first open of the URL cache plugin store the data for the page. And when there is no mobile cache, whit mobile load for the same URL content displayed is the same as desktop – including buttons display.

The most popular cache plugins that do not support separate desktop and mobile cache are WP Super Cache and W3 Total Cache.

Popular cache plugin that does separate desktop and mobile cache is WP Rocket.

Here are some setting tips how to combine server based mobile display with cache plugin depend on the type of cache.

WP Super Cache

That is free cache plugin that works well and for that reason it is very popular. But as we said it does not support mobile cache. So here are the settings need to be done to have different displays for desktop and mobile:

  1. Go to WP Super Cache Settings -> Advanced and activate the option Mobile device support. Then press Update Status button.

2. Scroll down at Advanced tab and find Rejected User Agents area. Then paste that list with mobile user agents and press Save UA Strings button to apply the agents.

iPhone
iPod
Android
BB10
BlackBerry
webOS
IEMobile/7.0
IEMobile/9.0
IEMobile/10.0
MSIE 10.0
iPad
PlayBook
Xoom
P160U
SCH-I800
Nexus 7
Touch

3. Go to mobile settings of Easy Social Share Buttons found under Social Sharing -> Mobile: Display Options and choose one of the three methods marked with ticket mobile:

mobile_display_essb

4. Scroll down at the same tab and activate Client Side Mobile Detection and turn on all the options that will be shown after the activation:

client_mobile_detection

5. Update your settings and clear the cache.

W3 Total Cache

  1. Go to Browser Cache settings under Performance tab and:
  • enable Browser Cache option
  • disable Set expires header

screenshot_5

2. Go to Page Cache, find Rejected User Agents section and paste there the list with the user agents shown above. Then save your settings.

WT Cache

2. Scroll down to find Rejected User Agents section and paste there the list with the user agents shown above. Then save your settings.

3. The settings at Easy Social Share Buttons need to be done are the same as described above. Please find steps 3., 4., 5. under WP Super Cache setting tips and follow them.

WP Rocket

  1. Go to WP Rocket settings, find the Mobile cache section and activate the mobile cache at it is shown below:

2. Press Save Changes button and clear the cache.

appscreo

Written by appscreo

AppsCreo is a team of web professionals who has delivered Envato market best selling social networking plugin of all time. Our mission is to create a perfect product that is easy to use, highly customizable and including innovative features you cannot find anywhere and has not seen before. View our prodcuts