How to Setup Mobile Based Displays of Easy Social Share Buttons with Most Popular Cache Plugins

How to Setup Mobile Based Displays of Easy Social Share Buttons with Most Popular Cache Plugins 1

[vc_row][vc_column][vc_column_text]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.[/vc_column_text][vc_column_text]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.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

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

[/vc_column_text][vc_column_text]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.

[/vc_column_text][vc_column_text css=”.vc_custom_1476256742323{padding-top: 15px !important;padding-right: 15px !important;padding-bottom: 15px !important;padding-left: 20px !important;background-color: #e6dcdb !important;}”]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.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Separate desktop/mobile displays and cache plugins

[/vc_column_text][vc_column_text]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.[/vc_column_text][vc_column_text css=”.vc_custom_1476265625211{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 15px !important;background-color: #f46665 !important;border-radius: 1px !important;}”]

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.

[/vc_column_text][vc_column_text]Here are some setting tips how to combine server based mobile display with cache plugin depend on the type of cache.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”WP Super Cache” title_align=”separator_align_left” align=”align_left”][vc_column_text]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.

[/vc_column_text][vc_single_image image=”3066″ img_size=”full” alignment=”center” onclick=”img_link_large”][vc_column_text]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.[/vc_column_text][vc_raw_html css=”.vc_custom_1476189790725{border-top-width: 1px !important;border-right-width: 15px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 10px !important;padding-right: 1px !important;padding-bottom: 10px !important;padding-left: 15px !important;border-left-color: #e7e7e7 !important;border-left-style: solid !important;border-right-color: #e7e7e7 !important;border-right-style: solid !important;border-top-color: #e7e7e7 !important;border-top-style: solid !important;border-bottom-color: #e7e7e7 !important;border-bottom-style: solid !important;}”]aVBob25lJTNDYnIlM0UlMEFpUG9kJTNDYnIlM0UlMEFBbmRyb2lkJTNDYnIlM0UlMEFCQjEwJTNDYnIlM0UlMEFCbGFja0JlcnJ5JTNDYnIlM0UlMEF3ZWJPUyUzQ2JyJTNFJTBBSUVNb2JpbGUlMkY3LjAlM0NiciUzRSUwQUlFTW9iaWxlJTJGOS4wJTNDYnIlM0UlMEFJRU1vYmlsZSUyRjEwLjAlM0NiciUzRSUwQU1TSUUlMjAxMC4wJTNDYnIlM0UlMEFpUGFkJTNDYnIlM0UlMEFQbGF5Qm9vayUzQ2JyJTNFJTBBWG9vbSUzQ2JyJTNFJTBBUDE2MFUlM0NiciUzRSUwQVNDSC1JODAwJTNDYnIlM0UlMEFOZXh1cyUyMDclM0NiciUzRSUwQVRvdWNoJTNDYnIlM0U=[/vc_raw_html][vc_column_text]

Activate Responsive Mode

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

How to Setup Mobile Based Displays of Easy Social Share Buttons with Most Popular Cache Plugins 2[/vc_column_text][vc_column_text]2. Scroll down at the same tab and activate Client Side Mobile Detection (Simple Responsive Mode) and turn on all the options that will be shown after the activation:

How to Setup Mobile Based Displays of Easy Social Share Buttons with Most Popular Cache Plugins 3

  • Width of screen – control the mobile responsive break point. Default is 840px but you can enter your own value
  • Hide read blocking methods – this option will ensure that read blocking methods like Sidebar, Pop up, Vertical Float, Fly In and etc. will remain hidden
  • Hide all share buttons on mobile – this option will ensure that every share buttons that are not part of the mobile displays will work
  • Control mobile optimized displays – this is the most important option that is required to work the responsive design

[/vc_column_text][vc_column_text]5. Update your settings and clear the cache.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”W3 Total Cache” title_align=”separator_align_left” align=”align_left”][vc_column_text]

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

screenshot_5[/vc_column_text][vc_column_text]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[/vc_column_text][vc_column_text]2. Scroll down to find Rejected User Agents section and paste there the list with the user agents shown above. Then save your settings.

If you do not wish to change settings of cache plugin you can try responsive mode – options are described at the top where WP Super Cache settings are provided.[/vc_column_text][vc_text_separator title=”WP Rocket” title_align=”separator_align_left” align=”align_left”][vc_column_text]

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

[/vc_column_text][vc_single_image image=”3093″ img_size=”full” alignment=”center” onclick=”img_link_large”][vc_column_text]2. Press Save Changes button and clear the cache.[/vc_column_text][/vc_column][/vc_row]