If you want to speedup the loading time of your Magento store, then configuring a CDN for loading static assets is always a preferred option. So the static resources like images, JavaScript and CSS files will be loaded from a third party CDN rather than from your server. This will increase the page load time of your Magento store. I we talk about the good options for CDN then I believe Amazon Cloudfront is the beast of all.
In this article I will tell you how to enable amazon cloudfront CDN in magento.
1. Go to https://aws.amazon.com/cloudfront/ and create your free account there.
2. Go to AWS console https://us-west-2.console.aws.amazon.com/console/home and select CloudFront:
3. Now you need to create a “Distribution” for your store:
4. For the delivery method, select “web”:
5. Now fill in the necessary details of your online store:
“Origin Domain Name”, which is the domain name of your store is the only required option. You can leave other fields as it is for starting.
6. Click on “Create Distribution”. It will take you to the Distribution listing page and will show all distributions you have created so far.
7. Initially the status of new distribution will be “In Progress”. Within few minutes, the status of new distribution will be changed to “Deployed”, it means distribution is ready for use on production.
8. Now click on Distribution ID and copy the “Domain Name”. It is the default domain name that Amazon has created for you. If you want your own subdomain instead of cloudfront domain, you can fill the Cname records of your domain.
Now our Amazon CloudFront CDN is ready to use. Now go to your Magento admin panel. Then go to System -> Configuration -> Web. Now we have an important point to note here. We should not use the CDN for all website including admin part od the store. If we do so, we may face some JavaScript Cross Origin issues while loading the wysiwyg editor in admin panel. To avoid this, we will configure CDN only for the frontend website.
1. Change the “Current configuration Scope” to “Main Website”.
2. Now in “General -> Web” tab change the base urls for skin, media and JavaScript as shown in below image. Note that this is the URL that we copied from CloudFront panel in step 8 above.
3. Change the base URLs as:
Skin: https://xxxxx.cloudfront.net/skin/
Media: https://xxxxx.cloudfront.net/media/
JavaScript: https://xxxxx.cloudfront.net/js/
4. Save the configuration and you are ready to go!
sir please visit my website http://www.edhik.com i hv done everything as per ur tutorial still facing problem
Great tutorial Ranjan. Do you think Cloudfront is a better CDN than Cloudflare? I am currently using Cloudflare on my PHP site because it can be easily enable from the Cloudways platform I am using. But I was wondering if there is a better CDN provider that can further reduce the load time of my website and caches more pages?