Home>Support>Rendering with CDN

Rendering with CDN

Hi there,

I’m using Vantage Premium with Meta Slider PRO and Page Builder (+Siteorigin widgets).

I’ve just changed the whole site to SSL and resolved all the issues therein.

I now have a problem when I enable CDN (maxcdn – shared ssl) using W3 Total Cache (using default settings). The page fails to render properly. No logo, no slider, fonts and alignment are all out of whack.

I’ve tried to make sure all the files needed have been included in the custom file list (just to be sure), but clearly Im missing some.

I am using a small amount of custom css in the Appearance -> Custom CSS but nothing extensive.

Can you let me know the files / folders that I should check are included to enable the Vantage theme to render properly? Or do you suspect there is a difference cause (i.e. settings within the CDN option of W3 Total Cache)?

BTW, I am a total newbie to WordPress and coding.

Thanks,

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago wpinster

    Hey guys, looks like this is a problem with tying to use CDN (even with Shared SSL)

  2. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Wpinster

    Sorry to hear about the hassles you’ve run into here. In order to run properly Vantage needs at one time or another, all the files in the theme folder. There are one or two there that aren’t crucial, but most are. I’m afraid this does sound like a greater WordPress / CDN challenge. Your hosting company or MaxCDN support might be better equipped to help out. Perhaps start by testing without your caching plugin enabled (clear it’s cache before de-activating). Caching plugins alone can introduce challenges.

  3. 9 years, 6 months ago wpinster

    Thanks for replying (particularly on a Sunday – you guys rock!).

    Thats ok. I went through the entire Vantage theme folder /subfolder structure and added each *.js and each *.css separately . I just thought there may have been another (not so obvious) file somewhere that I missed out.

    Thanks again.

  4. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    No problem, glad to hear you made progress. Let us know if you run into any challenges moving forward.

    Cheers :)

  5. 9 years, 6 months ago wpinster

    Hi Andrew,

    I managed to get the site up and running.

    One small problem. I can no longer see any of the Fontawesome icons I used. Any thoughts on how to get this resolved? I have read about similar problems when using CDN, and the articles often go on to say something about CORS, but it may as well be written in Klingon.

    I’ve used a couple of snippets of code in my .htaccess, but they have not worked. (example shown below):

    # ----------------------------------------------------------------------
    # CORS-enabled images (@crossorigin)
    # ----------------------------------------------------------------------
    # Send CORS headers if browsers request them; enabled by default for images.
    # developer.mozilla.org/en/CORS_Enabled_Image
    # blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
    # hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
    # wiki.mozilla.org/Security/Reviews/crossoriginAttribute
    <IfModule mod_setenvif.c>
      <IfModule mod_headers.c>
        # mod_headers, y u no match by Content-Type?!
        <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
          SetEnvIf Origin ":" IS_CORS
          Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
      </IfModule>
    </IfModule>
    # ----------------------------------------------------------------------
    # Webfont access
    # ----------------------------------------------------------------------
    # Allow access from all domains for webfonts.
    # Alternatively you could only whitelist your
    # subdomains like "subdomain.example.com".
    <IfModule mod_headers.c>
      <FilesMatch "\.(ttf|ttc|otf|eot|woff?|font.css|css)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>
    

    Any pointers would be greatly appreciated.

    Thanks

  6. 9 years, 6 months ago wpinster

    Don’t worry. Problem solved. Needed to purge the CDN.

  7. 9 years, 6 months ago wpinster

    Hi Andrew,

    I’ve managed to solve everything except for one item, which is really hard to ignore (and I can find no hint of a cause).

    When the site is viewed through a mobile the menu does not respond. Do you have any ideas?

    my site is https://equios.com

    I’d be grateful for any help.

    Thanks

  8. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Nicely done, you’ve implemented the htacess fix for CDN fonts that I would have recommended.

    The mobile menu issue looks to be due to a JavaScript conflict, please could you try temporarily de-activating all non-SiteOrigin plugins. Do this at once. If the menu works please try re-activating your plugins one by one, after each activation, re-check the problem.

  9. 9 years, 5 months ago wpinster

    Hi Andrew,

    Looks like the issue was because I minified the /themes/vantage/js/jquery.flexslider.js.

    mmm…..do you know if there are any known issues with deferring this script?

    Cheers,

    Kiran

  10. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Vantage doesn’t make use of the un-minified version of jquery.flexslider.js. Instead it uses the already minfied jquery.flexslider.min.js. Could you perhaps look into it from there.

    (As part of the WordPress.org guidelines we need to include all non-minified versions of minified scripts)

  11. 9 years, 5 months ago wpinster

    Hi Andrew,

    I did some testing. The issue was also present when I minified jquery.js.

    But, I don’t understand why this would be the case if, as you say, the Vantage theme only makes use of the min.js version.

    Something doesn’t add up, but I don’t have the skills to investigate. I’ll have to park this and move onto other issues highlighted by page speed.

    Thanks for your pointers. If you think of anything please let me know. Otherwise, I think this thread can be closed.

    Thanks,
    Kiran

  12. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the feedback. I’m not sure why an issue would have arisen due to jquery.theme-main.js being minified. The theme doesn’t use that file it uses the already minified version also located in the /js folder which is: jquery.theme-main.min.js. I’m not an expert in this area but I’d assume that file doesn’t need to be minified again.

    Sorry I don’t have an answer here. If you’d like to come back to this point, give us a shout and I’ll see if I can get one of the other guys to take a look.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More