How would I implement CDN functionality in a custom PHP-based CMS and application?

egoselfaxis
egoselfaxis used Ask the Experts™
on
I currently manage a site that was custom developed using PHP/MySQL, and that's powered by it's own custom CMS.

Recently, we've been discussing the possibility of adapting the site so that it serves up the static assets using a CDN (ie: CSS files, JS files and images).  Since the header and footer of the site are static, it would be simple enough for us to adapt those elements so that they pull the resources from a CDN,  However, .. what about the CMS?  

In other words, .. how would we adapt the CMS so that when images are uploaded through the back end, .. that they automatically get pushed up to the CDN (using PHP) ?  To be more specific .. how would we handle the Add / Modify / Delete functionality of images within this context?  And would the switching over to the serving up of those CDN hosted assets on the front end of the site be as simple as specifying a simple "base href" tag in the site's global header?  Please advise.

Thanks!
- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
Who is your CDN?

Author

Commented:
Hi Ray.  We haven't yet chosen or implemented one. We've just been discussing the possibility of using one, as part of our ongoing efforts to improve the site's performance.  

- Yvan
Most Valuable Expert 2011
Top Expert 2016

Commented:
Can you please post a link to the site?  If I see anything that will help it get faster, I'll be glad to share ideas.

One such idea:
https://www.experts-exchange.com/articles/18437/Improving-Web-Site-Performance-via-PHP-Cache.html
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Author

Commented:
Sure thing Ray.  Here is the currently unmodified "FOUC" version of the site's homepage:

https://www.evergladesholidaypark.com/

.. and here is a slightly improved version of that page with some of the elements moved around to help with the initial display when loading:

https://www.evergladesholidaypark.com/yvan.php

Thanks,
- Yvan
Most Valuable Expert 2011
Top Expert 2016
Commented:
Ahh, yes... The delightful flash of unstyled content! :-)  Love the images - I wanna ride.

First step - check this out and fix up anything that looks fixable.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.evergladesholidaypark.com%2Fyvan.php

Next try opening the images and resaving them with a slightly higher compression.  You can make them smaller without depreciating image quality on a browser or phone.  

Here is an original:
Originalhttps://iconoun.com/demo/storage/yvan_image1.jpg

Here is the compressed version (less than half the size):
Compressedhttps://iconoun.com/demo/storage/yvan_image1_compressed.jpg

You might want to look into a minifier for CSS and JS, and perhaps use Grunt to combine the files.  This will reduce the number of HTTP requests.
https://gruntjs.com/

You might try running YSlow and seeing what it suggests.
https://addons.mozilla.org/en-US/firefox/addon/yslow/

After you try those things, call up Akamai or some organization like them and check on pricing for CDN services.  You may get more bang for your buck with a few simple optimizations that you can work into the build process.

HTH, ~Ray
each cdn will use semantics different than yours and you won't be able to just use the image name.
you'll probably upload an image and be provided an id in return, which you use to build the corresponding url.

using a base tag won't account for such ids and anyway would also modify the behavior of forms and links on the site so unless you're using absolute urls everywhere on your site, that's an obvious no-go.

i'm unsure what your problem is but the cdn might not be your best choice.

among other things, and other than img optimization @ray already mentioned, your thumbnails are generated from the original image and resized by the browser so all the big images are downloaded when the user reaches the gallery. you might want to use actual thumbnails.

Author

Commented:
Thank you both for your suggestions.  I've been aware for some time that the images in that homepage slideshow could use some better compression, but we were intentionally ignoring the obvious until we could find a better way to deal with the other issues.  

Regarding the CDN .. I'm getting the impression that interfacing a CMS with a CDN isn't recommended, and that it presents too many challenges.  Am I mistaken about that?  If not, then how does the image URL and filename re-writing typically get handled? Does it have to get written to and retrieved from the database?  Or is there a way to handle it "on the fly" so to speak?

Ray .. I'll be experimenting with your suggested techniques in the next day or so.  Thanks again for your wise suggestions.

- Yvan
Most Valuable Expert 2011
Top Expert 2016
Commented:
I don't think the CMS is necessarily a problem.  Just consider the things that need to change if you're serving images or other large content (MP4, etc)  from different servers.  You probably have HTML page templates that incorporate all of your image links, so making those explicit and pointing to the CDN is not going to be much trouble.  If you're doing a lot of work with dynamic (client-uploaded) images you might want to consider how the CDN gets its images for your site, and how it names the images.  Or maybe the dynamic image part could remain on your site and just the large static files would be served by the CDN.  There is no reason this has to be "all or nothing."

Author

Commented:
Ray -- just one more question.  What tool did you use to re-compress the JPEG images?  And what types of settings did you use?   I ask because I'd like to share that information with the graphic artist.

Thanks,
- Yvan
Most Valuable Expert 2011
Top Expert 2016
Commented:
You can use Photoshop to set compression - most graphics folks know how to do this.  There are other tools that may be even better.  Google has some ideas here:
https://developers.google.com/speed/docs/insights/OptimizeImages

Author

Commented:
Thanks Ray!  The graphic designer and I both already use Photoshop for compressing images, actually. I just though there might be a better, more light-weight tool that we could use.  Regardless ... I noticed that the Google PageSpeed Insights reports provides a link to download optimized versions of the images .. so that's probably the best way for us to go.  

Thanks again guys!
- Yvan
any tool that can "save an image as" and let you choose the format including probably windows paint can do that. i usually use the gimp which is a free ~ equivalent of photoshop so is heavy as well. php libraries ( gd2 ) can transform images as well. i would recommend to do thumbnail generation in php. for the big images, try various compression algorithms : it is likely that gif will leave the text neater and pngs will likely be smaller than jpegs for equivalent quality... try it : that depends on the image.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial