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.
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
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
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
- Yvan
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
One such idea:
https://www.experts-exchange.com/articles/18437/Improving-Web-Site-Performance-via-PHP-Cache.html
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
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
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:
https://iconoun.com/demo/storage/yvan_image1.jpg
Here is the compressed version (less than half the size):
https://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
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:
https://iconoun.com/demo/storage/yvan_image1.jpgHere is the compressed version (less than half the size):
https://iconoun.com/demo/storage/yvan_image1_compressed.jpgYou 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.
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.
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
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
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."
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
Thanks,
- Yvan
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
https://developers.google.com/speed/docs/insights/OptimizeImages
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
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.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial