Optimizing s2Member Performance

[wiseeyesmedia]

I have been working on optimizing one of my s2Member sites recently and want to open a discussion about optimizing s2Member's dynamic CSS and JavaScript. Currently I have W3 Total Cache enabled on my site and pretty much fully optimized, so now I'm looking at s2Member.

Based on my Firebug/Google Page Speed plugins for Firefox I can see s2Member loads its own dynamic CSS and JS for each member which delays page loading. So I have a number of questions I thought I would pose that maybe can help start the discussion on optimization:

CSS Related
==========

1. Why is the CSS dynamic? Does the styling change from user to user or based on membership level?

2. Could the CSS be cached (static) by W3 Total Cache or other plugins without adversely affecting functionality?

3. Could the s2 CSS be loaded asynchronously to prevent blocking during initial page load? See possible example:
http://is.gd/L1hggh



JavaScript Related
================

1. Could s2Member provide an option to include its JS in the template footer (i.e. call wp_enqueue_script() with $in_footer = true) so that the rest of the page could load without blocking on s2's JS in the page head?

2. Could the s2Member JS be loaded asynchronously without negatively affecting its existing functionality? Something like a call to jQuery.getScript() near the footer of the page would be a great option to load the JS.

3. Could the s2Member JS be broken into a "semi-static" portion and a dynamic portion? The semi-static portion would be common data that could be cached and combined with other JS by W3 Total Cache or other and the dynamic portion would only have the variables directly related to the logged in user. Bonus if the dynamic JS could also dynamically loaded only when needed.


So those are rather technical questions, but I'd love to explore these options and help optimize s2Member. I know most people probably won't go into this level of detail, but for high-performance sites (and increased Google rankings), this type of optimization is a must!

Thanks for a great plugin and I look forward to having s2 on my site for a long time!

[Jason Caldwell]

Thanks for these excellent ideas. Some of these we are currently working toward, and I'll try to update this thread as changes are released to improve this aspect of s2Member.

CSS. No, s2Member's CSS files are assembled dynamically for greater extensibility, and only for that reason. In other words, yes, it's fine to cache s2Member's CSS output if you like; OR, even to exclude/replace it completely if you wish, using Hooks/Filters provided by s2Member.

s2Members JavaScript is another issue all together. Currently, s2Member's JavaScript library MUST be loaded dynamically, and s2Member will automatically allow browser caching of this file, on a per-User basis, using very advanced methodologies.

[wiseeyesmedia]

Jason,

Thanks for the response. I have added the s2Member CSS to my W3TC minified CSS which combines and minifies all CSS on a page so that there are less HTTP requests. This should cut down page load time by a couple hundred milliseconds. That may not seem like a lot, but it is when load times are just a few thousand milliseconds. So that's an easy way to address the CSS performance today.

In terms of JavaScript, I certainly understand why it needs to be dynamic with all the user data in the file. I reviewed the JavaScript and have a two suggestions that I believe are the "lowest hanging fruit" that would speed up performance:


1. Easiest. Provide an admin option to relocate the <script> tag to the template footer. Based on my review of the code, this wouldn't hinder a "stock" setup of s2Member since all your execution takes place using jQuery's document.ready() anyway. If an admin is using custom scripting that uses the S2MEMBER_* variables, then they would have the option to have the JS remain in the header. Or they could wrap their code in a jQuery document.ready() function. This would only improve page rendering time and not page load time, so Google ranking would not be increased, IIRC.


2. Better. Provide an admin option to load s2Member's JS asynchronously. This would require two minimal changes to the existing setup:

(a) In the itself (possibly user-configured for header or footer insertion), adding some scripting like this:

Code: Select all

<script>
jQuery(document).ready(function(){
   jQuery.getScript( "/?ws_plugin__s2member_js_w_globals....");
});
</script>


(b) In the s2Member dynamic JavaScript generator, move the form initialization code out of the jQuery(document).ready() calls since the document is already ready.

This would offer great performance gains in terms of the page load time since the loading would be done asynchronously. In my setup, this would remove another few hundred milliseconds out of the page load pipeline. When combined with the CSS caching, it should speed up page load by at least half a second.

[Jason Caldwell]

Thank you VERY much. I will certainly give these ideas serious consideration during our improvements. I really appreciate your feedback/ideas on this.

[wiseeyesmedia]

I'm happy to help, Jason. I have lots of thoughts on how we can continue to improve s2Member. We'll start with these and go from there

[ryannagy]

Is Wordpress Minify working for people? Any other suggestions? My S2Members sites are all LONG one-page landing pages and they can occasionally get large bursts of traffic when affiliates send out email blasts. I want the pages to load as quickly as possible. Every millisecond counts.

I see two minify options:

WP Minify
Better WordPress Minify

And I would be grateful for other suggestions. Thanks!

- Ryan

[ryannagy]

Here's another that looks good:

http://www.svachon.com/blog/wp-html-compression/

Combining HTML "minification" with cache and HTTP compression (WP Super Cache, or similar) will cut down your bandwidth and ensure near-immediate content delivery.

[wiseeyesmedia]

I would look at W3 Total Cache to speed up your page load times. It will minify HTML, JS, CSS and cache pages and database queries. If you get that all setup, you will see your page load times drop by 50%, IMHO.

[ryannagy]

I just watched their 12 minute demo video. Looks amazing. Will try it out immediately. - Ryan

[Cristián Lávaque]

There's also Jason's Quick Cache https://wordpress.org/extend/plugins/quick-cache/