From the author: If you have been working in development for a long time, you know that the main problem on the Internet is speed. It's simple: speed matters, and the faster the better. An easy way to improve performance is to use a CDN. We've already covered this topic several times on the CSS-Tricks website. The simplicity is that you don't have to rewrite the database and manually edit the content, but many of us don't pay enough attention to performance in this area. Hosting, servers and cPanel, oh my!

Luckily for us, CDN integration is not that difficult. Ideally, you set everything up, and services like Google PageSpeed ​​trumpet high performance your site, which in turn leads to higher rankings in search results, increased income, increased popularity and... well, you get the idea.

In this article, we'll walk through the process of setting up a CDN on a custom web application, after which we'll learn about a couple of tricks that will help you get the most out of a CDN. Like I said, setup should be easy, so let's get started and make the web faster!

It should be added that setting up a CDN for those who work on a CMS like WordPress, where there are special plugins for CDN deployment, may be even simpler than we will now tell you. Let's assume that not everyone has such luxury, so let's move on to more traditional way.

You lost me on the CDN

It won't hurt if we look at the basic concepts: what a CDN is, what they are needed for. Let's start with this.

JavaScript. Fast start

A CDN pulls static files from your site's server and caches them on its servers. When a browser accesses your site, the static content is loaded through the CDN, not from your site. This is much faster, since CDN servers are located all over the world. The CDN itself works on the principle of a proxy, determining the server closest to the user, which ensures faster and more convenient content delivery. The abbreviation stands for Content Delivery Network or Content Delivery Network.

So how does the browser determine when to download files via a CDN rather than from the site's server? The URL of static files is rewritten to point to the CDN.

For example, we want to set up a CDN for a subdomain. On the CSS-Tricks website, the address could be cdn.css-tricks.com. Accordingly, all links for files will go to the subdomain.

Roughly speaking, the addresses of the files on your site are:

http://www.css-tricks.com/image.jpg http://www.css-tricks.com/style.css http://www.css-tricks.com/script.js

http : //www.css-tricks.com/image.jpg http: //www.css-tricks.com/style.css http: //www.css-tricks.com/script.js

... will become like this:

http://cdn.css-tricks.com/image.jpg http://cdn.css-tricks.com/style.css http://cdn.css-tricks.com/script.js

http: //cdn.css-tricks.com/image.jpg http: //cdn.css-tricks.com/style.css http: //cdn.css-tricks.com/script.js

The browser sends requests to the CDN rather than to your site's server, which takes the lion's share of the load off the server and makes your site faster.

Wait, two servers on one site?

To a certain extent, this is true, but this does not mean that you will be managing two servers.

The point is that the CDN is used as a virtual layer between your server and the user's browser. This layer catches browser requests to the server and happily responds to them with cached files on behalf of your server.

In some cases, you can upload static files to a CDN directly, completely removing the load from the server. In this article, we will look at the process of obtaining CDN static files from your server and caching them so that you do not need to upload files to two servers and work with different addresses.

How to install a CDN on a custom application

There are many services, but the most commonly used are Amazon AWS and MaxCDN. Today we will look at the MaxCDN service.

Step 1: Choose a CDN and register your site

If you decide that your site will need a CDN, you will need to register. There are many, many ways, but so as not to weigh the pros and cons of each ( good topic for the next article), I will give a number of services:

The main purpose of registration is to create a download area. You can think of the download area in a CDN as a bucket that will contain all the supported files. The data will be automatically pulled from the directory you specify when you first request the file. For users, files will be downloaded either from a subdomain of the CDN or from a custom domain that points to the CDN. Data from the recycle bin is automatically deleted after reaching a specified period of time.

Step 2: Create a URL to your CDN

CDN URL is the address where all your files will be downloaded after setup. A good rule of thumb is to use simple names in the URL so that you can easily search for files and replace the addresses of all existing files in the database.

As with other subdomains, you will need to specify a cname record in DNS settings your host.

Step 3: Point your files to a CDN

Let's look at how you can create a variable for the CDN address, and how it can be used to programmatically insert static resources before the URL. Why this is necessary: ​​(1) it makes it harder to make mistakes in the markup and (2) it makes it easier to work with URLs that we will need to change.

To do this, we need a global variable for the CDN, which we will append to the left of the static resource URL. We will create the variable in both PHP and JS to make it easier to work with later. This variable will also help us easily disable the CDN if we want to. You will just need to replace the value with / to return the address to our server.

Please note that the following examples are just examples and should not be used. Actual use cases may vary.

Hello World! /* Let’s define a javascript global for using the CDN inside scripts */ var cdnURL = ""; js/main.js">

The world of free programs and useful tips 2024 whatsappss.ru