Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #22602

    Hi there,

    I’ve come to learn that unfortunately Choices doesn’t play well with Caching plugins. I’ve tried several plugins and I’ve had the same result. Basically what happens is the slider descriptions and buttons get displayed unevenly. The tricky part is that it displays differently from browser to browser. So in one browser it looks fine, or slightly uneven, and then another browser the description container will be half the size that it’s supposed to be and the buttons will be smaller as well. I’ve come to learn that that this is due to the minification process that occurs in caching plugins. I’ve read that this can be prevented by excluding the files (javascript and/or css files) that handle the slider. The slider seems to be the only part of the website that has any trouble.

    So my questions is, what files handle the slider in choices? And should I exclude the javascript, css, or both?

    Also, if there’s a better fix for this issue, I’m definitely open to anything!

    Thanks in advance!

    #116344

    Hi,

    The file that handles the slider is js > avia.js. I’m not sure if you can exclude a certain file using any caching plugins though you can exclude pages. Let me tag the rest of the support team.

    Regards,

    Ismael

    #116345

    Hi,

    You have a few choices. You can try this plugin which I know works fine minifying with the latest theme.

    Have you tried: http://wordpress.org/extend/plugins/bwp-minify/

    But if you are serious about your minification , you can do it by hand , which is quite easy.

    1) inside your theme, there are 5 css files you need to find, copy their insides, and paste them on the bottom of style.css located in the main folder. its important that you paste them in this order. style.css + /css/grid.css + /css/base.css + /css/layout.css + /css/shortcodes.css + /css/slideshow.css

    2) You need to do a replace, ctrl+H in notepad, where you replace all instances of url("../ with url("

    3) open up header.php and remove the block of lines starting from 50-54. ( 5 lines in total).

    4) Make sure to test it and see that everything looks the same on website (just to make sure you pasted everything in the correct order.

    5) copy that huge style.css file (except for the original style.css which just has theme title block) and paste it into the text area on http://www.refresh-sf.com/yui/ .You should have all settings as on this image http://www.clipular.com/c?5524006=nNJ9YbsLcOEQDF7CnyWty2AptyU&f=.png … Make sure you have a backup of the code in case there is a problem. Copy the minified code and ->

    6) Add it back to styles.css after the original code in styles.css

    7) if you have problems, what you can do also, is take the // from the front of line 98 in header.php (custom.css file) and add the big block of minified code inside it, and leave style.css as you originally found it.).’

    The most important thing about minification is to do it gently by only removing comments and extra white space and to not allow these butchers of minifiers to move things around.

    Thanks,

    Nick

    #116346

    Sounds great! I’ll give these a try! Thanks for the options!

    #116347

    Hi,

    Sure please let us know how it went. Try the plugin first, and make sure that you add the css files in the same order as you see them when you view source. Perhaps that is the reason why w3tc was giving problems since the order of the css was not correct when you add them one at a time.

    Thanks,

    Nick

    #116348

    I still haven’t tried this yet, but I was able to determine that minification isn’t the problem, it’s the page caching itself. When I empty the cache and reload the page it’s fine. but when I reload the page in a different browser after I’ve already loaded it in another browser, that’s when the trouble occurs. To make sure this makes sense, I’ll give you an example. I emptied the page cache and then loaded the site in firefox and it looks fine. then I load the site in chrome, and the formatting is all jacked up. If I empty the cache and then reload the page in Chrome, everything will look fine. but if I load it in firefox again after that it won’t look okay in firefox. So it’s always the second browser the site is loaded in after the page cache has been emptied that has issues. I hope this makes sense.

    Caching speeds up our site immensely, so it’s something that I can’t just ignore. Is there anything you would recommend? I’m considering putting a different slider into the theme and seeing if that works.

    Any advice is welcomed! Thanks for the great support already!

    #116349

    Hi,

    Current version of Choices is 1.8 and you are using 1.6, please update on themeforest.net


    After reading what you wrote, I think you don’t understand or are confused about browser cache vs server cache, so its science fiction, and I can prove it very simply. Look at http://gwrw.com/ , I just slapped a Choices theme on it, a slider and some meaningless text with a photo of a shaved rabbit. I also gave it a hot pink design in wood. I put the css and javascript together as I suggested for you to do. Empty your browser cache as much as you would like in any browser.

    This is a chart of gwrw against your site. http://www.clipular.com/c?5808100=48ufs7lXyyE8am2OuIO20U4bHLI&f=.png

    I didn’t bother with minimizing images or concatenating the jquery. I put a 24 hour cache on images. Please feel free to look at it and see if anything is messed up. I am using w3 total cache with a cdn offload, and everything else turned on except the minimizer (which i did manually in 5 minutes as I described above).

    Run google rules on it. I get 93/100 .. and most of the problems are about things hosted on google, like their fonts, which I can simply import

    This website test said it is faster than 90% of tested websites, not too bad and I didn’t even start to optimize http://www.clipular.com/c?5600099=y9bkUj3usTnnTI8Pn_C16drsLz4&f=.png

    http://www.webpagetest.org/result/130505_RJ_GRH/ <— here .193 second to first byte and 1.7sec first load time… some image optimization and I get it down lower.

    After you load the page reload it, and then go to some other website and paste the url to gwrw.com back. you will see that the way it loads it has to be cached. In fact I am caching with the w3tc, apc, and with nginx micro cache, so that nothing hits the php5-fpm and instead the cached version is served directly by nginx.

    this is what i am using:

    <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

    Minified using disk: basic
    Page Caching using disk: enhanced
    Database Caching 30/34 queries in 0.014 seconds using apc
    Object Caching 3157/3163 objects using apc
    Content Delivery Network via Rackspace Cloud Files: cdn1.gwrw.com

    Served from: gwrw.com @ 2013-05-05 16:20:14 by W3 Total Cache -->

    Believe me, I been optimizing sites for speed long before WordPress was invented. For fun I see if I can optimize pages better then google speed module, and I can beat google consistently, http://www.webpagetest.org/result/111222_TD_1af0eaec938fa72076d7f82bb8976c54/ (i am on the left, and google’s attempt to optimize me only results in a worse time … by 40%)

    I am such a geek that after my mom passed away I paid an old lady to adopt me just so I can live in her basement. :)

    Thanks,

    Nick

    #116350

    You’re right, there’s definitely a lot about caching I don’t understand yet. But the test site you set up doesn’t have any descriptions or buttons in the slider, which is the only thing that get’s messed up for me when caching. See this image (http://mecsoft.com/testing/caching_error.jpg ) to understand what I’m referring to. The top screenshot is my test site (mecsoft.com/testing) with caching turned on loaded in Safari, and then the bottom screenshot is the same site loaded in Firefox. nothing else get’s messed up, and this only happens when page caching is turned on. If I turn off minification, but leave page caching turned on, it still happens. That’s why I haven’t tried manually combining the css and javascript together as you suggested.

    I will update to Choices 1.8 today and see if anything changes. Let me know if you have any suggestions in the meantime. Also, could you maybe try putting descriptions and buttons in your image slider on the gwrw site and see if the formatting get’s messed up like it does on my site?

    thanks for all your help,

    Tim

    #116351

    Hi,

    Oh, lol. I normally see the entire site being unreadable and completely destroyed, so I was picturing you in that same boat. This is nothing, you can just add inline css targeting the browser to fix it right up without annoying Google Speed. When you login with a browser in the html tag there are browser classes depending on how you connect, so just add the firefox and go from there. If you can show me the actual page with code, we can fix it right up.

    Thanks,

    Nick

    #116352

    Everything works fine, you can take a look. I emptied all server caches. So this is freshly cached again.

    Thanks,

    Nick

    #116353

    Okay good, I’m glad to hear it’s nothing too complicated! What page would you like me to show you in order to fix it?

    #116354

    Hi,

    Let’s begin with the page you said was broken and then move from there.

    Thanks,

    Nick

    #116355

    It’s just the homepage in the slider (mecsoft.com/testing). I’m a little confused, how would you like me to show you the page?

    #116356

    Hi,

    Well, if this is not a development but a live site, then you can setup a dev site on dev.your-domain.com and activate the w3 total cache plugin. Do not use the minimizer for javascript or css. When the slider buttons become distorted I will either provide the css code to fix them , or more likely see why that is happening and provide you with a solution. I can also scan the site and perhaps give you a few suggestions on ways to speed it up. Afterwards you can migrate it to the live site.

    Thanks,

    Nick

    #116357

    Hi Nick,

    My dev site is mecsoft.com/testing (main site is at mecsoft.com). w3 total cache is activated, and I’ve turned off the minimizer for css and javascript. The slider buttons are still being distorted. What should I do now?

    #116358

    Hi,

    Please send me a temp admin login/pw for the test site to usjahm (at) gmail (dot) com. do you have a cdn by any chance?

    If not. can you go into your dns (wherever you registered your domain) and create 4 cname records cdn1.your-domain.com cdn2, cdn3, cdn4, and have them all point to your.domain.com … so that if anyone types in cdn1.your-domain.com they will be instead taken to folder cdn at the root of your wordpress installation? Because I can quickly set you up so that all your files get broken up by subdomains , this way allowing browsers to go over the limit of 4 simultaneous connections. (you dont have to if you can’t now, i can otherwise just take care of the buttons first).

    Thanks,

    Nick

    #116359

    Hi Nick,

    I just added you as user. You should have received the login by email. Please let me know if you didn’t, and I’ll resend it myself. I’m definitely interested in setting up the cname records but let’s take care of the buttons first. That’s a higher priority to me right now. But thanks for thinking ahead, and thanks for all your help.

    #116360

    Hi,

    Sorry there was no email with a human to respond to.

    Please look, I do not see any problems with buttons but you know the way its supposed to look. You should look at the site logged out, since I set it to avoid logged in users. I minimized css and jquery. Once you are completely done with development, you should add all jquery files (except main jquery file itself) in the same order as on your website into a second .js file in the footer, and only keep jquery main file in the header after all the css. (this includes plugins js).

    And you should do the same with plugin css, except add it at the end of style.css and then rip out the 2 huge css blocks from the source and place those at the very end of the style.css file after the css of the plugins (and then remove the enqueue code from the plugins for the css, js so at end you will have 1 css file, and 2 .js files)

    My overall impression is that you are running on a very fast box, because the backend was nearly as fast as nginx, which is great for apache). I run that gwrw on 1/2 a gig of memory and one processor with 36 sites (a reason i am not using Apache). However you should tell ask your host if they have the mod_speed module and force them to install it. Now that’s optimization! ( https://developers.google.com/speed/pagespeed/mod )

    Thanks,

    Nick

    #116361

    Hi Nick,

    Thanks for all your help! Everything looks great, and runs very fast. I’m going to move the dev site today to the live site, so we can experience this speed on the live site.

    What would you recommend to be done next? CDN, the 4 cname records, or the mod_speed module?

    Thanks,

    Tim

    #116362

    Hi,

    With mod_speed, you can take off the plugin. You don’t need to do anything else but but make sure its configurated but thats more on the server admin side of things since requires root access. I think it may also take care of the cdn

    if you wanna do cdn and don’t want to rent a proper cloud based storage like at rackspace/google/amazon, then basically point the cnames at the main site url with a folder where wordpress is told in htaccess not to react to . and you add the ftp information into w3tc and that’s it, you fool browsers into thinking you in the clouds.

    Thanks,

    Nick

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Using Caching Plugin with Choices’ is closed to new replies.