Optimizations – How to Select The Working Optimization Options for Your Site

Overview

The optimization options of Easy Social Share Buttons for WordPress is a set of tools to optimize plugin work. All options you can find in Advanced -> Optimizations

Optimization Mode

The optimization modes are a selection of pre-set options in the optimization setup screen. You can use those modes as a starting point.

• Custom – reveal all optimization options for manual selection.
• No optimizations – turn off any option from this screen. You can use it if you have a cache solution or optimization plugin on your site.
• Cache/optimization plugin is running on the website – automatically apply the best options when a cache plugin (or server cache) is used.
• No cache or optimization plugin is installed – automatically apply the most common used optimizations when you don’t have a cache plugin installed.

Global Optimizations

• Share buttons’ CSS and Javascript files mode – control the version of the main static resources for the share buttons that the plugin will use. The default option is full (everything). But if you do not need all the templates or counter styles you can try the slim (almost half the size) or mini (highly optimized). Based on the selected mode, the plugin may deactivate some of the features.
• Remove the plugin version from static resources – this will remove the generated from Easy Social Share Buttons for the WordPress version on the static resources. Instead of this WordPress will generate its version or none if additional optimizations are used. This will make the visitor browser load at first from the browser cache if the static resources.
• Load static resources – select where you need to load the plugin resources. You can choose between Everywhere, Selected Post Types, or Selected Post/Page IDs. The default mode is everywhere and if you plan to use shortcodes, custom displays, or content builders we recommend keeping it that way. The other mode you have is “On activated post types in Where to display” – this will load resources only for the post types you choose to show share buttons. If you use plugin components (not only share buttons) outside that list you may see visual glitches. The last mode is to load on selected post/page IDs. Using this mode you can make resources loaded only on the provided IDs. You can use this mode if plugin features will run only on those pages. This mode can be used even if you build content custom with a builder.

Manual Configuration of Optimization Options

Combine CSS And Javascript Files (Pre-Compiled Mode)

This is a unique model of the plugin that will capture all used styles and scripts (including the dynamic generated) and generate static CSS and javascript files for use (one of type). And from now on it will use just those files only. For optimization purposes, those files will also load from the footer of the site (providing a non-render blocking page load).

• Enable combine CSS and Javascript files – enable usage of the mode.
• Optimize – select resources that plugin will optimize: CSS files, Javascript files or both (default).
• Cache data storage – select where the plugin will store the generated static files. WordPress content folder is the root wp-content folder of the installation (this folder may not have permissions to save files and if so you can change to one of the other available). WordPress upload folder is the default folder where WordPress stores all uploads (wp-content/uploads) – it is enabled for writing by default. The last option is to store the files inside the plugin folder. Be aware that if you choose this mode on each plugin update you need to refresh the pre-compiled mode cache (because of how WordPress does updates).
• Generate unique filename – make all the time plugin generates and unique file name of the static resources. That eliminates the possibility of the user to see a previous version from the browser cache. Recommended for usage if you setup expiration tags on a server level.
• Move loading of the CSS styles to the footer – move the dynamically generated styles into the footer of the website. This may produce cumulative layout shifts but it will optimize the initial page load.
• Load CSS asynchronously (rel=preload) – it will add rel=preload to the plugin stylesheets

CSS Style Optimizations

• Use minified CSS files – use the build plugin minified version of the CSS styles (recommended).
• Generate dynamic CSS in the footer instead of the header – dynamic styles are those that reflect specific changes or personalizations in the settings. For example, such a style can be a result of color change in the settings of the display method, building custom colors for various components, etc. The default loading is assigned like it is recommended to be in the header of the site (just after the static CSS files). The option here will change that behavior and load styles just before the end of the page. The option will make the header of site smaller (generated code from the plugin) but it may also produce “the blink” effect of styles (if your page content is larger). 
• Generate dynamic user styles for active display positions only – plugin generates the dynamic styles for all positions, no matter they are active or not. That is made because you can dynamically change the active positions using advanced options for post types, device types, etc. But if you do not make such advanced settings it is recommended to use this option to eliminate the generation of previous dynamic styles, not used currently on site.
• Don’t load the plugin CSS styles – If you enable this option plugin won’t load any styles. You need to write your own. The plugin won’t load also the icon font.

Script Optimizations

• Use minified javascript files – use the build plugin minified version of the javascript styles (recommended).
• Load javascript files in the header of the site – move the loading of plugin static javascript files into the header of the site. This option is not recommended to be used unless you have javascript errors on your site from other plugins that prevent work.
• Load plugin javascript files asynchronous/deferred – those options are optimized script loading methods. You can use one of them at the same time. If you are not sure what do they mean you can try the asynchronous load.