I know, GD Star Rating has a lot (or maybe too many) settings. But that’s what it takes to make a plugin that can be customized to the extent this plugins does. But, all that will require some tweaking and optimizations for better performance. This post will explain JavaScript and CSS used by the plugin and how is best to set both.
JavaScript
There are two ways to include JavaScript code needed for the rating to work. First is to integrate it directly into the page header section, and the other one is external file. First method is dirty, and should be avoided, but if you want it can be done. Image bellow shows the options on the first Settings tab (Features). First option let’s you select if the javascript will be embedded or linked as external. This JS file can’t be cached by the browser. But since it’s only 5kb it’s not a big problem. Why this file can’t be cached will be explained in the second optimization post.
First tip: link javascript as external file.
Also, this image is taken from 1.4.6 version, so it may be looking different on older versions.
JS and CSS Settings
CSS
With CSS there are more things to consider. At first, main CSS was small file. It was created based on stars selected on the settings panel. But, that was very limiting in terms of having differently styled active rating blocks. So, I decided to change that and create a CSS that will support all (or selected) stars sets installed with the plugin. Also, this only affects active rating blocks: blocks that actually allow you to set the rating. Static results are rendered differently and they are not affected by this CSS file (widgets for instance).
But if you include all 10 default sets with all 6 sizes, this file will grow to 200 KB. In reality you will use 3-4 sets for active rendering and 2-3 sizes. With that, this file will be some 50-60 KB. Add to that caching, and things are looking very differently.
Similar to JS file, CSS can be embedded into the page or linked as an external file. Embedding is not recommended especially with large CSS file, but it can be done. That is controlled with second option on the image above.
Second tip: link CSS as external file.
Beside this main CSS file, there is an additional file located outside of plugins folder. This ‘rating.css’ file is located in ‘wp-content/gd-star-rating/css’ folder and contains additional styles used by the templates. You can edit this file from Tools panel and all changes will remain even after you upgrade the plugin.
Third tip: link the additional ‘rating.css’ CSS file.
Sets to include in CSS
But the main optimization with CSS is in including sets you actually plan to use. This is done using the Graphics tab on the Settings panel. This will show you all the sets, both default and extras.
Fourth tip: check only sizes and sets you plan to use for the active rating blocks.
The last thing you need to check is something that will be included from 1.4.6 release (june 22. 2009), caching of the main CSS file. Last option from the first image tells the plugin to add cache headers to the CSS file, instructing browsers to cache the file. So, even if the file is big, it will be transferred only once. But, if you make some change, select different sets, plugin will know that things are changed, and will serve new file. Browser will get new version and will cache it instead of the old one.
Fifth tip: leave the caching of main CSS active.
So, I hope that this will help you to optimize the performance of the plugin. You can expect more post like this one soon. Next one will cover rendering of static results and AJAX.
loading...
Share this:
