Favorite CDN Discussion
By Jannik L. on Monday, 16 June 2014
Posted in General
Likes 0
Views 1K
Votes 0
After the success of my Favorite Template Framework discussion here on stackideas.com, I figured let's have an equally interesting conversation about CDNs.

Personally, I have very little experience with CDNs, I tried CloudFares free CDN for a little bit back when I was hosting on MediaTemple as they had a partnership. Now I am hosting on Linode, and I am trying to decide what CDN to use for my EasySocial based site.

Everyone please weigh in on your experiences and thoughts regarding the various CDNs.

Please cover:
Ease of Setup
Performance
Compatibility with EasySocial
Support
etc.

Mark and Stackideas team, also please weigh in with your experiences, as you clearly have developed Stackideas with CDN compatibility in mind.

Also, it would be cool to see some guides on how to setup various CDNs with EasySocial in the Documentation ;-)
For me personally, this is the combination that I personally prefer

1. mod_pagespeed
2. CDN (Cachefly)
3. Using CDN For Joomla to replace urls. (However, I did ran some stress test on this particular plugin and it's really heavy if your site has lots of html codes)

In your cdn, set a cache expiry for items that are not going to be updated constantly. For instance, images. Javascript files from EasySocial should be fine as well because we name our javascript file based on the current version that we released.
Mark
·
Monday, 16 June 2014 12:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Sweet, that was exactly the type of info I was looking for. What is your experience with mod_pagespeed in combination with Nginx + php-fpm + apc, is is compatible?
Jannik L.
·
Monday, 16 June 2014 13:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Hm, I never really played around with nginx extensively (mostly apache) but I think it's pretty much the same. APC on the other hand is a cache engine which caches the contents as opposed to pagespeed. Pagespeed optimizes / compresses / minifies.
Mark
·
Tuesday, 17 June 2014 00:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Ok, so I got mod_pagespeed to work on NGINX. I have purchased CDN For Joomla Pro and installed it. I have subscribed to Cachefly.

Now, my next question is, what is the easiest way to setup Cachefly? Any tips, or do you know of any guides out there?
Jannik L.
·
Wednesday, 16 July 2014 09:18
·
0 Likes
·
0 Votes
·
0 Comments
·
You need to request cachefly to get the reverse proxy to work. Then, use cdn for Joomla or pagespeed to rewrite the domain urls for assets
Mark
·
Wednesday, 16 July 2014 11:33
·
0 Likes
·
0 Votes
·
0 Comments
·
ah thanks, I will ask CacheFly to get the reverse proxy to work then
Jannik L.
·
Wednesday, 16 July 2014 11:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Ok, I got the CDN working, but it is not perfect. Some EasySocial icons aren't rendering, such as the notification icons. Additionally Font Awesome icons from my template arent loading it seems. Any ideas?

Also, I was wondering, what are the best settings for each of your components now that I use CDN? Should I keep them all on optimized, or change them all to static?

Shall I keep JavaScript compression? or disable it now that I have Mod Pagespeed and CDN?

Also, should I keep Inline configuration on or off, with mod pagespeed and cdn?
Jannik L.
·
Wednesday, 16 July 2014 14:50
·
0 Likes
·
0 Votes
·
0 Comments
·
I have attached screenshot and site admin.
Jannik L.
·
Wednesday, 16 July 2014 14:56
·
0 Likes
·
0 Votes
·
0 Comments
·
Loading font icons via cdn is a little troublesome for Firefox and IE9 I believe. You need to follow the guides at http://stackideas.com/forums/toolbar-icons-problem-with-cdn
Mark
·
Wednesday, 16 July 2014 15:01
·
0 Likes
·
0 Votes
·
0 Comments
·
I am on NGINX, so my solution would be a bit different. I tried adding:

}
location ~ /\.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

It hasn't fixed it yet.
Jannik L.
·
Wednesday, 16 July 2014 15:22
·
0 Likes
·
0 Votes
·
0 Comments
·
Hm, I have never really tested nginx but adding this on the htaccess for apache seems to work fine. Don't you need to place this directive on specific folders for nginx?
Mark
·
Wednesday, 16 July 2014 23:40
·
0 Likes
·
0 Votes
·
0 Comments
·
I'm using:

1. mod_pagespeed

##

## Mod_Pagespeed

##

<IfModule pagespeed_module>

   ModPagespeed on  

   ModPagespeedEnableFilters extend_cache,combine_css,collapse_whitespace,move_css_to_head,remove_comments,lazyload_images

</IfModule>


2. CDN (Amazon Cloudfront)

3. CDN For Joomla

I'm using the Pro version and with it created 3 CDN's to split images, documents, and web files.

It was easy to setup, performs well, and from memory the only issue with EasySocial compatibility was an error on my side, when I omitted the protocol specifier from the CDN URL. Support questions answered completely and their procedure is to follow-up to be sure my question was answered.
Kevin
·
Thursday, 17 July 2014 00:40
·
0 Likes
·
0 Votes
·
0 Comments
·
A related question to the community for those using a CDN on the mix of tools to use for performance improvements:

1) If you're using mod_pagespeed (there are many filters you can apply) it would appear the use of JCH_Optimize is rendered moot as those optimizations are already applied at the server.

2) Is it correct to say further that the plugin JCH_Optimize creates "dynamic" files that don't benefit from a CDN which stores static files?

3) For those using mod_pagespeed, the "Too many files" plugin is still useful for it's capability to ensure certain libraries are only loaded 1x.
Kevin
·
Thursday, 17 July 2014 01:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Yeah, I think you are right on all three counts. Personally, I am trying to disable all joomla based optimizations, and do everything server side. It is proving to be a bit challenging. But I am getting there... I managed to fix the fonts/icons. Now I just need to get Mod pagespeed to cooporate with Cachefly. It is partially working, but not completely.

If anyone has experience with NGINX, Mod_Pagespeed and CDNs, please review my config file. Let me know if there are areas I can improve upon.

Here are my settings:

server {

        listen	     23.239.10.236;



        server_name statusselect.com http://www.statusselect.com;

        server_name_in_redirect off;

        pagespeed on;

        pagespeed Domain statusselect.cachefly.net;

        pagespeed Domain statusselect.com;

        pagespeed MapRewriteDomain http://statusselect.cachefly.net *statusselect.com;

        pagespeed RewriteLevel PassThrough;

        pagespeed EnableFilters rewrite_domains,extend_cache,combine_css,inline_css,combine_javascript,inline_javascript,rewrite_javascript,collapse_whitespace,move_css_to_head,defer_javascript,remove_comments,recompress_images,lazyload_images;



        pagespeed FileCachePath /var/ngx_pagespeed_cache;



	access_log /var/log/virtualmin/statusselect.com_access_log;

	error_log /var/log/virtualmin/statusselect.com_error_log;

        

        location ~* ^/assets/ {

          expires 1y;

          add_header Cache-Control public;



          if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$){

             add_header Access-Control-Allow-Origin *;

          }

          break;

      }

        



        root /srv/http/statusselect-com/public_html;

        index index.php index.html index.htm default.html default.htm;

        # Support Clean (aka Search Engine Friendly) URLs

        location / {

                try_files $uri $uri/ /index.php?$args;

        }



        # deny running scripts inside writable directories

        location ~* /(images|cache|media|logs|tmp)/.*\.(php|pl|py|jsp|asp|sh|cgi)$ {

                return 403;

                error_page 403 /403_error.html;

        }



        location ~ \.php$ {

            fastcgi_pass unix:/var/run/php5-fpm.sock;

            fastcgi_index index.php;

            include fastcgi_params;

            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

            include fastcgi_params;

            fastcgi_read_timeout 600;

        }



        # caching of files 



        # CSS and JavaScript : 1 week



        location ~* \.(css|js)$ {

		access_log off; log_not_found off;

		expires 1w;

        }





        # Image files : 1 month



        location ~* \.(bmp|gif|jpg|jpeg|jp2|png|svg|tif|tiff|ico|wbmp|wbxml|smil)$ {

		access_log off; log_not_found off;

		expires 1M;

        }





        # Document files : 1 month



        location ~* \.(pdf|txt|xml)$ {

		access_log off; log_not_found off;

		expires 1M;

        }





        # Audio files : 1 month



        location ~* \.(mid|midi|mp3|m4a|m4r|aif|aiff|ra|wav|voc|ogg)$ {

		access_log off; log_not_found off;

		expires 1M;

        }





        # Video files : 1 month



        location ~* \.(swf|vrml|avi|mkv|mpg|mpeg|mp4|m4v|mov|asf)$ {

		access_log off; log_not_found off;

		expires 1M;

        }

        location ~* \.(eot|otf|ttf|woff)$ {    

                add_header Access-Control-Allow-Origin *;

        }



	fastcgi_read_timeout 60;

}
Jannik L.
·
Thursday, 17 July 2014 02:02
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post