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

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
egoselfaxisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Who is your CDN?
egoselfaxisAuthor 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
Ray PaseurCommented:
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
Expert Spotlight: Joe Anderson (DatabaseMX)

We’ve posted a new Expert Spotlight!  Joe Anderson (DatabaseMX) has been on Experts Exchange since 2006. Learn more about this database architect, guitar aficionado, and Microsoft MVP.

Read Article
egoselfaxisAuthor 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
Ray PaseurCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
skullnobrainsCommented:
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.
egoselfaxisAuthor 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
Ray PaseurCommented:
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."
egoselfaxisAuthor 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
Ray PaseurCommented:
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
egoselfaxisAuthor 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
skullnobrainsCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CMS

From novice to tech pro — start learning today.