Jishnu was an extremely fast and highly customizable theme I developed in 2013 based on a popular theme known as Arjuna X. Unfortunately, I didn’t develop Jishnu with the mobile web in mind, and thus, development ended in 2014. With the pace WordPress moves at, I suspect Jishnu wouldn’t work with newer versions of WordPress anyway.

For years I had multiple pages that contained various Jishnu-related documents: however since to my knowledge as of 2020 there are only a handful of sites that still use Jishnu, all the pages have been merged with this one.

For those who did make use of Jishnu, I hope it served you well for the time you used it.

If by chance you’re still using it (wow!) and have come across this page, perhaps some of the documentation below will be of interest to you!

–

There are 2 fantastic themes I’d like you to meet:

Meet Arjuna

Meet Jishnu

A few minor differences (I suppose I should have changed the title in the 1st one, mind you), but really, don’t they kinda look the same?

…how about now?

Arjuna Waterfall

Jishnu Waterfall

I’ll get to the point: Arjuna X (by SRS Solutions) was a fantastic theme. And like many other users, I was disappointed when parts of it broke in WordPress 3.5 and it wasn’t updated. After getting those issues worked out, I decided to start tuning things, and rewriting much of the layout to use CSS instead of images. It took a few hundred hours, but I think you’ll agree that I managed to get it looking pretty darn close to the original, and maybe even a little better in some areas.

At some point around the 100 hour mark, I decided I’d turn my little project into a fork so that others could benefit too. Hence, Jishnu was born.

From there, I began fixing other bugs, and adding a few features – mainly stuff that I wanted myself and figured others might too. Some bigger things – for example, it’s many times more customizable than Jishnu was – you can choose from any number of colors, and Jishnu will calculate gradients (and in some cases, color-schemes) on-the-fly. This is done in a fairly simple manner so that in many cases you can select 1 color and a whole bunch of other colors will automatically be calculated for you (though you can use custom CSS if you really want to be meticulous about it). You can read up on a few of the differences in the comparison section further below.

A quick look at the Jishnu Customizer (video):

Some smaller levels of customization are available too – like if you hate the “Powered by WordPress using the Jishnu theme” stuff in the footer, there’s a setting to replace it with whatever you want, right in the Jishnu Advanced Options – no need to manually edit the theme file. I actually added a lot of “i wish i didn’t have to edit the theme file to do X…” stuff.

As for speed, it’s pretty snappy on it’s own but there are quite a few things you can do to speed up Jishnu even further (and really, just about any WordPress theme. I’ve got a few examples listed on the “Speeding up Jishnu even further…” section.

I know, I know, you’re waiting for the bad news. To start with, IE6-9 don’t support CSS3 and thus, they get a lot of “fall back” support (they’re not technically supported, though IE10 is). IE9 misses out on some of the gradients, the header design, and gets a few square-instead-of-curvy borders. IE7 and 8 don’t get any curved borders. IE6 was broken so badly that the theme all-out disables a couple menus if an IE6 user stumbles upon the site. I do have a “known issues” section with further details there. That said, if you’re looking for an Arjuna alternative that maintains the same overall look & feel (but is compatible with newer versions of WordPress), I urge you to download Jishnu and give it a try!

Download link:

jishnu-1.1.1.zip – Jishnu v1.1.1 (Feb 4, 2014)
-Tweaked post/page behaviour to eliminate duplicate content issues. Disabling pingback in adv options will now affect the http “X-Pingback” headers as well. Removed some old non-html5 stuff from the head . Some previously hard-coded items are now enqueued through WordPress’s wp_head. Added support for 404 Redirect Reloaded for those who have it enabled. For those who are not using custom footer text in Advanced Options, the default “jishnu theme” footer links are no longer site-wide (only main page, which is also no-followed now), with the remainder simply being text. Numerous other changes.

jishnu-1.1.0.zip – Jishnu v1.1.0 (Jan 7, 2014)
-Support for longer header titles/taglines (smaller text option). Extra options for author link. Comments renamed from “Written by X” to “Comment from X” to address certain Google Plus issues. Additional CSS moved from style.min.css to the head
jishnu-1.0.9.zip – Jishnu v1.0.9 (Dec 11, 2013)
-full fix for sidebar widget text – you can now use unlimited lines of text without the image sprite spilling over. Added a mouseover-animated HTML5 header background option called “animated mouseover circles”, available in the Customizer under “Secondary Design”. A few typos fixed in the code comments. A little text cleanup in Advanced Options.
jishnu-1.0.8.zip – Jishnu v1.0.8 (May 25, 2013)
-sidebar widget text (for twitter button, facebook button, youtube button, etc) now works correctly when longer than 1 line. Note that you’ll want to limit your text to 2 lines – see “known issues” for details
jishnu-1.0.7.zip – Jishnu v1.0.7 (Jan 29, 2013)
-minor adjustment (1 px) to mid-left and mid-right sidebar widths related to below
jishnu-1.0.6.zip – Jishnu v1.0.6 (Jan 29, 2013)
-bugfix for sidebar mid-left and mid-right widths
jishnu-1.0.5.zip – Jishnu v1.0.5 (Jan 25, 2013)

A Comparison between Jishnu and Arjuna

The same, but different. Faster on the front-end and more powerful on the back-end. That was the philosophy behind Jishnu.

On the surface, Jishnu and Arjuna look the same in most ways. In fact, one of the goals I had with Jishnu was to keep the same look and feel so that it could be swapped right in without site visitors necessarily realizing there had even been a theme change. SRS Solutions created a beautiful looking theme with Arjuna, and the intent was really to make it faster – not to create a whole new design. That said, a number of customization settings have been added if you *do* want to make your site look a little more unique.

To give you a quick idea of the same-but-different philosophy in action, take a look at the comment bubbles:

Arjuna comment bubbles

Jishnu comment bubbles

Arjuna used a background image for the comment bubbles. It was one of the smaller images, but still an extra browser request. The Jishnu bubbles on the other hand were recreated entirely with CSS. You’ll also notice that Jishnu uses a more vivid grey for comments (while trackbacks keep the old color). If you pick a different color scheme in the Customizer, Jishnu automatically calculates a slightly lighter version of that color for the trackbacks. Though if you really wanted them to be hot pink regardless as to the customizer color you picked, you could do that by plugging some custom CSS into the Advanced Options section.

So it’s the same, but different.

Lets dig into just a few key differences though (these are from a few builds ago):

There are many changes beyond those, but here’s the short comparison the way I see it:

• Jishnu is oriented towards sites that put more value into fast page loading than into backwards-compatibility for older versions of IE. It is highly flexible, offering a lot of common (but optional) performance-related options that you would normally have to go into the template files to add. The parts of the look you-can-not-change varies in a few areas, so depending on your taste it might (or might not) be more appealing to you aesthetically. However there is much more of the look-you-can-change.
• Arjuna is tried, tested, and true. The look is very consistent throughout. It doesn’t take advantage of cutting-edge HTML/CSS features, but is much more backwards-compatible with older versions of IE. For those willing to make the couple small changes for it work properly in WP3.5, it’s a solid, well-rounded theme.

Really, the best way to see the difference is to install both. See which you prefer.

Known Issues….

(and my take on the current situation)

1. When picking a dark or vivid color scheme, a number of issues can arise (generally darker = worse).

I’ve worked around most of the serious ones, but a number of them (pagination bar is hard to read when dark for example) haven’t been completely addressed. Some of these take a lot of math on my part (and a lot of trial-and-error) to get Jishnu good at guessing whether to lighten a certain element or darken it based on the 1 color you picked. Contact me with the ones that are most important to you.

2. The little next/prev “arrows” on the pagination bar don’t have sharp tips on the left/right.

Limitation of the current implementation (CSS triangles are even px, the current text is odd px). Right now it’s a choice between not-being-vertically-centered, having text that seems too big/small (or same size but then the text not vertically centered), using an image (losing the ability to match the color you selected), or this. If I come across another solution I may have missed, I’ll get it resolved.

3. CSS Tidy destroys the CSS giving a partially white, unformatted page.

Tends to happen if you use W3TC and chose “CSS Tidy”. Tidy hasn’t been updated in ages and trips up hard over the CSS in the theme, completely butchering it (and thus, destroying the layout). If using W3TC, setting the CSS minifier to “Default” should work. Note that Jishnu already serves up minified CSS, so if you run into too many issues having W3TC minify, you may want to disable it for the HTML, and choose “Combine Only” for the actual CSS files.

4. Blank white screen in Jishnu Customization

This is typically caused by JQuery not being loaded correctly, which normally only happens if you’ve moved it to the footer (though if you’ve done so through the setting in Jishnu Advanced Options it usually works). In any case, if moving it back to the head doesn’t solve it, you might have a plugin causing an issue – temporarily disable them all and chances are the customization section will work again. Once you’ve set up the customization, it’s all saved in the database so you’re free to enable whatever-was-causing-the-problem again.

5. Theme contains a lot of CSS in the head.

It’s a trade-off. There was almost no CSS in the head until I added Mr Customizer. Trying to automatically pump the customizations into another file would be the start of a perilous journey (there is no *ideal* way to do it). I did actually spend a few hours implementing it (as well as an option to put *everything* in the head), but removed both in the end. Not clean on either end of the spectrum. For now, do your best to make sure compression is enabled on your server – much of the CSS is vendor-prefixed stuff which should compress incredibly well. If there is demand, I could shrink down the header prefixed stuff by utilizing browser detection via the Advanced Options panel (I believe WordPress even has some detection built in), but because that wouldn’t work with caching plugins, I haven’t bothered at this point.

6. Sometimes drop-down menus leave a “ghost” in the background.

I believe this only happens if you’re logged in and have the WordPress menu bar showing when browsing pages. If it’s happening when *not* logged in, send me an email and I’ll see if I can narrow down the cause. I’m assuming it’s a javascript issue.

7. If using a % width (variable-width) anywhere instead of fixed pixel widths, content wraps around the sidebars. Update: this actually annoyed me enough to fix, and I added “max-width” while I was at it. There is now a checkbox if you would like your content to use up space below sidebars (disabled by default – be aware that if you enable it, a number of plugins can break the layout). For the theme width you can now choose:

• a fixed pixel width – just type in a number like 980 (or 980px or iwant980pixels… Jishnu will figure out what you mean)
• a percentage – such as 100%.
• a max width – you enter this as max980 or 980max or max-width:980px etc. As long as you have the word “max” in there, Jishnu will figure out what you want.

Note: If you choose a % (or a max-width above 640px) the min-width will automatically be set to 640px to keep your content from becoming utterly crushed by a small browser window (because 640px is not always ideal, you may want to use custom CSS to tune this… it’s just a fail-safe for now to limit the damage).

8. Featured images are pretty small (100px x 100px).

These were added pretty last minute, and it happened to be what jived well with excerpts when someone was using default widths and 1 sidebar. If there’s demand for it, I can add an option in Jishnu Advanced Options to adjust this pretty easily (and would add an option to change the default excerpt length at the same time).

9. Header background designs don’t really work with near-white header colors.

I played with these a good bit, and while I could have Jishnu auto-switch to a dark color (black for instance) when the main color gets light enough, it’s really hard to determine when *you* might want the color to switch. White designs tend to work even with really light backgrounds. Black for the semi-transparent designs usually doesn’t turn out so good. A separate color picker could be feasible but then we’re getting into huge feature bloat – imagine a color picker for each one of the circles that shows up! Might sound exciting, but then I’d be potentially adding a few more color pickers to that section which has the potential to overwhelm some people. Short version: at this point, you’ll have to delve into custom CSS if you really need/want something other than white designs. I’m always open to suggestions here though if you think of something that will work in a fabulous manner.

10. Only 5 background header designs.

These are really time-consuming to come up with (you have no idea how long the circles took, and I even based those upon some pre-existing demos). Anything diagonal is also a no-go for the time being, as some of the vendor prefixes will only do the diagonal as a square, and workarounds behave inconsistently. If you have some stellar designs you’d like added to the theme though, feel free to send them along. Because it’s a drop-down box, I don’t mind loading it up with a few more options.

11. If sidebar is an odd pixel width WHILE using mid-left and mid-right sidebar widgets (the thin half-width ones), there is a 1px gap between the left and right headers in those widget locations. This can be quite noticeable when resizing the browser window while using a % or max-width for the total theme width.

These little imperfections really drive me up the wall. I could have Jishnu calculate this out for those using fixed pixel widths, but that’s the one case where the issue is easily avoided. Short version here if this affects you is either (1) use an even width for the sidebars or (2) if you must use an odd pixel width or are using variable-width but would prefer the overlap, put .sidebarRight{padding-left:13px !important;} into the Custom CSS section of Jishnu Advanced Options. Essentially, the choice was between making things “happy” at an even pixel width, or at an odd pixel width (either getting a possible 1px gap or a possible 1px overlap). Since visitors probably won’t notice the gap unless they’re actively resizing the browser window, I went with that option.

12. “Social icons” in the sidebar start to cause issues if the attached text is 3 lines or more. Update: I know this only affected about 1% of people out there, but it’s been fixed as of version 1.0.9.

In 1.0.8, I implemented a quick fix so that more than 1 line of text would work (previously if the attached text was longer than 1 line, it slammed into the next line). I only had 1 report of this, so haven’t gone and done the full/proper fix. If you’re wanting to use 3+ lines, send me an email and I’ll get on the full fix sooner rather than later.

13. Content breaks part-way through the page and then continues after the end of the sidebar when “should content use the extra space below sidebars” is selected in the customizer.

The method used to get content to “flow” under the sidebars when that option is selected is… very delicate. That’s one of the major reasons it’s off by default. If you enabled it and are running into this issue, chances are you have a plugin that uses “clear:both” inside your content – plugins that create social/share icons are common culprits. Unfortunately, there’s nothing I can do to fix it on my end (every workaround creates other issues). Your only options in this case are to disable that option for wrapping text below the sidebars in the customizer, or to disable the offending plugin and try to find another that works.

IE gets it’s own little section. I understand that not everybody has a VM and extra copies of Windows to test with, so I’ll start with some images so you can *see* what Jishnu looks like in each of them (just click for larger images).

These were from a few builds ago, but the current build is largely the same (I worked out the major IE kinks some time ago).

Short version is that IE8+ is about the minimum for nothing to look obviously wrong (in other words, decent) to a random visitor. Nothing curved, and boring colors, but usable.

IE7 is pretty bad. Usable, but bad.

IE6 is a train wreck.

On the other end, IE10 looks just dandy – just as good as Firefox, Chrome and Safari. IE9 is somewhere between 8 and 10.

The remaining IE-specific issues just plain aren’t going to be fixed. IE6-9 were *considerably* more broken when I first started, and I’ve gone as far as I’m willing to go to accommodate them. This is what’s left over. They’re here so you’re aware of them.

Note that while old versions of Chrome/Firefox/Safari may exhibit a few similar quirks (in particular, lack of gradients and square corners), they all push their own auto-updates down the line now, so I’m not too concerned there. It’s mainly Microsoft who thought it would be cute to limit certain versions of IE to newer versions of their OS.

By default, there is a message placed at the top of the screen for IE6-9 users, which you may have noticed in the image. It is enabled by default, but can be disabled or changed in Jishnu Advanced Options if you’d like. Originally it also provided a link to IE 10, but since they’ll only let Win7/8 users install IE10, I removed it and it just suggests FF/Chrome/Opera now. Really, if Microsoft doesn’t want marketshare, that’s fine by me.

A final note, the missing menu bars in IE6 are intentionally disabled with a conditional (yes, it was that bad).

Speeding up Jishnu even Further

Ok, so Jishnu is already quick. 1 tiny image, and no javascript (aside from jQuery that WordPress includes by default). If you looked at the comparison page, you probably noticed that by default on a fresh blog, with proper .htaccess settings (you know, so the server compresses things and sets nice headers and all that) it scores 95% on PageSpeed and 94% on YSlow!.

So how do we get this:

To do this?

First: Where there’s a will, there’s a way (yes, I pulled out all the tricks to get that score).

Second: While PageSpeed and YSlow are good indicators, they’re not a hard-and-fast rule. In fact, some of the things I did to reach that score actually made the site slightly slower (in terms of the total page-load time for real visitors) and I ended up turning a few things off.

If you’re really aiming for that 100% mark, it’s often as simple as ditching external javascript (no adsense/analytics), using W3TC to combine your CSS & javascript and load the JS as non-blocking in the footer, setting up proper caching in .htaccess (W3TC can actually do this too, mind you), disabling query strings (which you can do in the Jishnu Advanced Options, though I kinda recommend against it since it can cause problems with stale CSS/JS), and… well that usually about does it.

Like I said though, a high PageSpeed/YSlow score isn’t everything. Your goal should be to focus on the page load time for users.

So that said, you’re already using one of the quickest WordPress themes out there, so let’s look at a few more things you should consider doing…

Try to get scripts out of the head and into the footer

This one is one of the hardest things to pull off. Don’t get me wrong, moving the scripts is easy. Sadly, a lot of plugins and features require some sort of javascript to be called in the head. Before I discourage you before you’ve even tried, let’s look at the potential benefits:

Above, you see a “waterfall” for a typical post with 7 images on a WordPress site running Jishnu after a fresh install. A brief explanation as to what you’re seeing, just in case you aren’t familiar with these:

• The time moves left to right. The left side is T=0 (the moment we tried getting the webpage). The right-side is when everything has finished loading (roughly a second later). Each bar represents a file that Firefox is getting to load the page.
• The first bar (top one) is the HTML itself. If you’ve ever done “View Source” on a webpage, that’s essentially what this is.
• The next 3 bars (that start at the same time) are the CSS stylesheet, and 2 JavaScript files. You’ll notice they start at the same time.
• The remainder are images that were in the post, except the last 1 which is the image sprite the theme uses.

You might notice that all those images take a while to start. In fact, they wait until after the CSS and javascript have finished. This is because that javascript is in the <head> section of the page, which “blocks” everything that comes after it. The details as to how and why this happens are a little beyond the scope of what I’m trying to convey here, so let’s just see what happens when javascript is moved to the footer:

Notice the difference?

All we did was move that javascript to the bottom and suddenly, just about everything tries to load (or “parallel download”) at the same time! This is pretty nifty.

You might wonder why that last file is a bit of a straggler. Actually, it’s the image sprite that the theme uses, and by default it isn’t called until the CSS is loaded. If you look at where the CSS download ends (that’s the 2nd file), you’ll see it lines up with where the last file starts.

Let’s pretend we’re all hard-core and OCD about things lining up….

Fixt!

Ok, so how did we do this? Actually, in Jishnu Options, there’s an “Advanced Options” section (you know, the one with the big red warning).

All we did was check the following 2 boxes in the Tweaks to HEAD, Performance Tweaks, SEO, and Miscellaneous area:

• Preload image sprite (for that last one!)
• Move jQuery to footer (update: I recommend using a plugin for this now)

To move jQuery to the footer, I recommend using a plugin called Autoptimize rather than the setting built into Jishnu. Autoptimize will actually gather all your scripts (though you can exclude some if necessary) and load them in the footer in a “deferred” way which shouldn’t block the page load. It can also combine your CSS, and minify both of those (plus the HTML). I suggest setting the plugin to INLINE your CSS because the page will tend to “show up” much quicker for visitors the first time they visit your page. Separate CSS files always result in an extra request and usually all that overhead adds additional time. Autoptimize also works out-of-the-box with Jishnu.

If you’re using other performance-oriented plugins, I suggest enabling the Autoptimize settings one-at-a-time so that if something gets wonky you can narrow it down. As an example of something “wonky”, if you have W3TC installed and have the “minify” section enabled for the HTML, trying to optimize the HTML in Autoptimize too will give you the following message:

PHP message: PHP Fatal error: Cannot redeclare class Minify_HTML

So enable things gradually, checking to make sure everything works after each change. Remember, the plugin works great with Jishnu but that doesn’t mean all your other plugins will get along with it!

—

All that being said, moving jQuery to the footer can be risky business. Some plugins really rely on it to be in the head. If you go this route, you might want to start by disabling all your plugins, enable the JS-related settings, make sure everything works, and then start enabling plugins again one at a time. Don’t let the potential pitfalls discourage you though – the performance gains by getting javascript out of the head and loading it in a deferred way are pretty significant.

(now is probably a good time to mention that if you’re using Google Analytics, rather than using a plugin to insert the code, you can manually put the code in your HTML very easily with Jishnu by plugging it into the Custom HTML section).

Moving on to plugins…

“Use Google Libraries”

Wed Aug 7th 2013 Note: I hit an issue in WordPress 3.6 where replying to comments from within the backend no longer works with this plugin enabled. I’m assuming the plugin will be updated at some point to address the issue, but I’ve been seeing better improvements by simply using the Autoptimize plugin mentioned previously.

Use Google Libraries (author link here) is a plugin. Normally, your site serves up the jQuery that comes with WordPress to all your visitors. It’s only 33KB (compressed), but let’s face it – that’s bigger than everything else in the theme put together. It also has a “query” string added to it, which means it won’t be cached by some proxy servers.

The solution? Google has jQuery available for anyone to use. And the “Use Google Libraries” plugin will tell WordPress to use that one instead. 4 quick benefits…. First, there’s no query string. Second, Google’s servers are… probably a little bit faster and a bit more distributed-around-the-world than the one your website is running on, so it should load lightning-fast for somebody on the other side of the world. Third, because a large number of sites are doing this, there’s a good chance the Google version will ALREADY be cached by your visitor before they even arrive on your site!. So they won’t have to download it at all when your page loads! And fourth, it’s a little less data transfer (and one less file request) coming from your end.

That on it’s own is great, and even if you do *nothing else* (no W3TC, etc), it’s a smart thing to use.

The only downside… in order to be “safe”, it checks every so often to make sure that jQuery is still up on Google, so there’s the potential for a page load to take a little extra time every so often when it wants to check. Oh, and it creates an insane number of PHP ticks (over 300) which might give you a miniature heart attack if you watch that sort of thing.

WP-Smush.it and others

I’ll admit it, I’m bad when it comes to uploading images on a page. Those images at the top…? They’d probably be half the size if I’d converted them to JPG’s before uploading.

One thing you *can* do though is install WP-Smush.it (author link here). It will automatically “Smush” the images you upload to your site. For those who aren’t in-the-know, when you take a screenshot, save an image from your camera, or save a picture in paint or photoshop, it isn’t always saved as efficiently as possible. WP Smush it will run your images through a few algorithms to make them smaller.

An even better (but manual) option for Mac users is to use ImageOptim. It uses a number of tools to squeeze down the size of images – typically getting them smaller than any other program out there does. Unfortunately I’m not aware of any Windows-based all-in-one solutions that even come close to comparing (though saving in Adobe Fireworks can get it close enough for Smush-it to get close).

Typically, what you’d do with ImageOptim is zip your entire wp-uploads folder, download it, unzip, and drag it right into ImageOptim. Let it go to work on all your images and once complete, re-zip, upload it, and copy it over the originals (be careful to hang on to the original zip file and any backups just in case something goes wrong). From then on, every so often you could just zip up the last few months worth of images and repeat the process. Or better yet, use ImageOptim before you upload your images (though it won’t help the thumbnails that way).

Just to emphasize how beneficial these things can be, the images I have on the previous page… ImageOptim shrunk them by 40%.

Use a cache program (Lite Cache, Hyper Cache, W3TC, Super Cache, etc)

If you remember in the images from previous pages, we were looking at roughly 800-1000 ms (just under a second) for the page to load.

Actually, each of those purple bars were the browser waiting on the server (which includes WordPress) to piece together each page – the downloading part was so quick, you probably can’t see it in the images (look for a dark green sliver at the end of each bar).

Let’s see what Lite Cache does:

The bars look similar (it always stretches them to fill the screen), but look closer… Look at those times!

We went from 804 ms all the way down to 528 ms!

That’s because the page itself went from over 400 ms down to about 130 ms!

Here’s a comparison to help show it:

Yes, Lite Cache is impressive. And so are the others I’m about to mention!

Here’s a quick list of common cache plugins for WordPress:

• Lite Cache (author link) which we looked at above is very simple, clean, and efficient, but can be slightly complicated to set up unless you’re familiar with adding values to wp-config.php and .htaccess (it tells you what to add, mind you and it only takes 20 seconds or so).
• W3TC (author link) is easier to set up (it injects the changes into wp-config and .htaccess for you), is the most popular, is most flexible, and can also combine/minify your CSS & Javascript (amongst other performance enhancing tricks). It’s a little more heavy-weight, but is more of a 1-stop-shop when it comes to performance. Note that you want to be careful not to simply enable everything in W3TC. If you’re a beginner, start with Disk:Enhanced caching, and perhaps minifying CSS & JS (and moving the JS to the bottom if you can). You can move on to Browser Caching stuff later. I recommend against using the Database or Object cache unless you understand what they do. W3TC is very powerful, but with power comes the ability to shoot-yourself-in-the-foot if you blindly start messing with things you don’t understand.
• WP Super Cache (author link) is another popular one with it’s own set of features, and should also be easy to set up (I believe it also injects changes for you).
• Hyper Cache (author link) is created by the person who makes Lite Cache. Hyper Cache has been around longer, and could also be worth a look.

Note that the cache programs I’ve tended to use in the past have been Hyper Cache and W3TC. This was the first time I’d actually used Lite Cache (figured I’d check it out while testing). I always liked the simplicity of Hyper Cache, and W3TC tends to do the best job when it comes to combining/moving JS, particularly when you’re aiming for a JS file without a query string.

As a side-benefit, the caching programs can all reduce server load, since WordPress doesn’t have to regenerate the page for each and every visitor.

Oh, and if you’ve never used a caching plugin before…. only install ONE.

.htaccess stuff – caching and compressing

The vast majority of people have their sites hosted on a Linux host, running Apache. And most of the time, there is an .htaccess file in your web directory. Here, you can set up a few extra rules for Apache when serving up your content.

This isn’t specific to WordPress, but can keep things quick for frequent visitors. Somebody shared it quite some time ago, and I’ve used it on a few sites. Note that W3TC (mentioned last page) adds similar things if you make use of the “Browser Cache” setting there, so if you’re using it, no need to go plugging this stuff in.

Most of this “checks” to make sure your server allows you to use each rule, but just-in-case something goes wonky, make sure you quickly check your site after saving this to .htaccess to ensure your site still works! If it doesn’t, you’ll want to quickly remove it and save again.

It’s a little small, because…. well, it’s kinda long. Details afterwards (which you should read!).

# BEGIN Browser Caching/Headers
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
</IfModule>
<FilesMatch "\.(css|js|CSS|JS)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
</FilesMatch>
<FilesMatch "\.(rtf|rtx|svg|svgz|txt|xsd|xsl|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SWF|TAR|TIF|TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
</FilesMatch>
# End Browser Caching/Headers

Again, make sure you’re using an editor that won’t break down if for some reason pasting this into .htaccess breaks your site. If you’re on a host that uses cPanel, the editor that comes with the file manager will do fine.

For a quick (but important!) explanation, this is essentially what this stuff does:

• Adds a lot of “types” based on file extensions.
• Adds expiration dates to different types of files. Note that many of these types are set to 1-year (31536000 seconds, actually). So after a browser grabs one of your javascript files, if it still has it in it’s cache 360 days from now, it will use that same file. This is a double-edged sword. On one hand, it’s great that somebody can grab a javascript file, an image, etc., once and not have to get it again each time they visit your site. However, what if you change one of those files? Well, if it has the same name, your user is seeing the old version for up to a year. WordPress works around this for *it’s* stuff by appending “query strings” to the end of the javascript and CSS it serves up. Stuff like wp-admin.css?ver=3.5 (which is different than say, wp-admin.css?ver=3.4). In any case, it’s something to keep in mind. If a year seems a bit long for your files to be cached, you can always lower it. Note that the above does not set expiry dates on your actual content (the HTML), because that is very likely to change at any given moment.
• Adds compression to “text” types of files (with exceptions for a few browsers that will hiccup if it’s set). Compression just on stuff like your HTML, CSS, javascript, etc. Things that compress easily.
• Configures “ETags”. If that sounds boring, just skip to the next point. If you want to know what they are, keep reading…. Essentially, when the expiry date is reached, or if a visitor hits refresh on your site, their browser might still have a file in the cache but isn’t sure if it’s the latest one, so it sends a request with the “ETag” it has for files it would normally download – essentially a small checksum based on the file size and last-modified date. Your server can tell if the browser has the latest version based on that code, and if it does, it sends “304 – not modified” rather than sending the file. On the other hand, if the browser doesn’t have the latest version, it sends the new file. As for configuring it, what the code above does is set it to calculate the ETag based on file size + last modified date/time.
• Adds some Cache-Control headers.

These are handy things that can help speed up your site, while increasing PageSpeed and YSlow scores. Do use them with caution though – if you constantly change files that would normally be static for a long period of time, at the very least you may want to dig in and modify the expiry time.

Using Custom CSS with Jishnu

A quick video example, showing how to use some custom CSS to change a specific text color in Jishnu with the help of Google Chrome:

A few other things that might help you (this is a work in progress)…

Resolution:

1. Not mentioned in the customizer, you can set a max-width as the theme’s total width. Simply add the word “max” to the pixel length you’re typing. Example: “1080max” or “max-width:1080px” (Jishnu looks for the word “max” in the string and then uses whatever number it finds). If using a max-width of above 640px, a min-width of 640px will automatically be set, since the layout usually starts getting pretty crushed by then. You can override this by plunking the following into the Custom CSS section in Advanced Options:

.pageContainer{min-width:700px !important;} (this would set a 700px min width)

2. A percentage can be used for widths as well (theme total, or sidebar). If the theme total is a percentage, the same min-width mentioned above will be applied. Jishnu *is* picky about the formatting of these in the customizer. You can not use spaces, and the % sign must come after the number. Examples:  20% 100% 35% will all work. If using a percentage for a sidebar, be sure to widen/shrink your browser width to make sure that items inside which do not shrink well do not overflow (Adsense, search bar, etc). If you need to add a minimum width here, the custom CSS would be as follows:

.contentWrapper .sidebarsLeft{min-width:190px !important;}
.contentWrapper .sidebarsRight(min-width:250px !important;}

3. For all intents and purposes, treat the iPhone 5 and iPad 3 as though their actual screen width is about 980px (though text on the iPhone gets quite tiny by that point). If you use a fixed width above that, iPhone users will have to use their finger to pan left/right. For iPad users, the text will keep shrinking for a while yet beyond 980. If you use a fixed width below 980px, everything gets a little more zoomed (better for the iPhone, but senseless for the iPad). For % (or a max-width of above 980px), 980px is assumed to be 100% (and the max-width) by both devices.I may add an Advanced Option at some point to add some iPhone-specific CSS in the future since the text (and buttons) all have the potential to get kinda small on the iPhone right now.

Header “designs”

1. These are output by the theme itself (they’re not located in the CSS file).

2. If you have a custom CSS design you’ve created (or found on the web), disable the header designs in the Customizer and use the following CSS in the custom CSS section to insert the following with your code between the {} :

.headerDesign0{} .headerDesign_shell_0{}