Front-end optimization solution-CDN optimization

Front-end CDN optimization solutions mainly include:

1: Use CDN for domain names that load resources: Static resources referenced in front-end pages, such as css, js, images, etc., can be accelerated using CDN. Upload the resources to CDN, and then reference the resource link on the CDN in the page.

http://www.example.com/images/logo.png

The address after using CDN is:

http://cdn.example.com/images/logo.png

2: Use CDN to speed up font loading: If font files are used in the page, you can consider using CDN to speed up the loading of font files.

By using a CDN, fonts can be loaded on the server closest to the user, resulting in faster font loading.

Here are the steps to use a CDN to speed up font loading:

1. Find a reliable font CDN service provider. Google Fonts, Adobe Fonts and Fonts.com all provide CDN services. You may also use other third-party service providers.

2. Embed the font CDN link in your HTML file. The link format is similar to the following example:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>

3. Apply the font name to your CSS stylesheet. For example:

body {
    font-family: 'Open Sans', sans-serif;
}

4. Make sure the scenario is successful by using browser development tools to check if the fonts are loaded from the CDN.

Three: Set cache control: Setting cache control for static resources can effectively reduce the number of HTTP requests for the page and improve the page loading speed. Set Expires and Cache-Control response headers to control browser caching.

Expires and Cache-Control are HTTP response header fields used to control browser caching behavior.

Expires specifies the expiration time of the response, telling the browser that resources can be obtained directly from the browser cache before the expiration time. The expiration time is server time and needs to be set to a fixed time. For example, the specified resource expires after 5 minutes:

Expires: Wed, 21 Oct 2019 07:28:00 GMT

Cache-Control represents cache control, which can specify cache behavior, such as whether to cache, cache time, etc. Commonly used instructions are:

public: Indicates that the response can be cached by all users, including CDN, etc.
private: indicates that the response can only be cached by a single user and cannot be cached by CDN, etc.
no-cache: Indicates that the browser needs to re-verify the validity of the cache.
max-age: The maximum time the specified resource can be cached. For example, the specified resource can be cached for 10 minutes:

Cache-Control: max-age=600

When setting Expires and Cache-Control, you can set two response headers at the same time, such as:

Expires: Wed, 21 Oct 2019 07:28:00 GMT
Cache-Control: max-age=600, public

This means that the resource can be cached by all users before the expiration time, and can be cached for 10 minutes.

Four: Disable unnecessary cookies: For static resource requests, there is no need to set cookies, so unnecessary cookies can be disabled.

Disabling unnecessary cookies can reduce the size of HTTP request headers, thereby improving response speed. This can be achieved on the server side by setting the HttpOnly attribute or using a browser plug-in.

The HttpOnly attribute is added when setting the cookie. This attribute can prevent the cookie from being accessed by client JavaScript. In this way, the cookie cannot be exploited for cross-site scripting attacks, and the size of the cookie can also be reduced. You can set the following response headers on the server side:

Set-Cookie: mycookie=xxx; HttpOnly

Cookies can be selectively disabled using a browser plug-in. For example, the Chrome browser's EditThisCookie plug-in can easily manage cookies and disable or delete unnecessary cookies.

Five: Asynchronous loading of js: For some js that do not need to be loaded immediately, asynchronous loading can be used to avoid affecting the page loading speed.

Asynchronous loading (Asynchronous Loading) is a common method for optimizing web page performance, which can make pages load faster and improve user experience. Asynchronous loading of js files can avoid blocking page rendering and speed up page loading. Here are two ways to implement asynchronous loading of js:

1. Use the async attribute

In HTML5, adding the async attribute can load js files asynchronously, for example:

<script src="your-script.js" async></script>

In this way, the browser will download and execute your-script.js file asynchronously without blocking the rendering of the page. It should be noted that asynchronous loading of js files may cause the execution order of the files to change, and the dependencies between different files need to be ensured.

2. Use dynamically created script tags

Another way to implement asynchronous loading of js is to use JavaScript to dynamically create script tags, for example:

var script = document.createElement('script');
script.src = 'your-script.js';
document.head.appendChild(script);

This way, the browser will also download and execute your-script.js file asynchronously, making the page load faster. Compared with using the async attribute, using dynamically created script tags can better control the dependencies between files, and can load different js files asynchronously while ensuring the execution order.

Six: Use HTTP2 protocol: HTTP2 protocol can load resources and files faster, thereby improving the response speed of the website. Most CDN service providers support the HTTP2 protocol.

Using the HTTP2 protocol is an effective way to optimize website performance, which can speed up web page loading and improve user experience. The HTTP2 protocol has the following advantages over the HTTP1.1 protocol :

Multiplexing: The HTTP2 protocol supports multiplexing, which can transmit multiple requests and responses simultaneously in one connection, thus avoiding the head-of-line blocking problem in HTTP1.1.
Binary transmission: The HTTP2 protocol uses binary format to transmit data, replacing the text format in HTTP1.1, reducing the size of the transmitted data, thereby improving transmission efficiency.
Header compression: The HTTP2 protocol uses the HPACK algorithm to compress request and response headers, reducing the size of transmitted data and improving transmission efficiency.
Server push: The HTTP2 protocol supports server push, which can actively push some resources to the client before the client sends a request to speed up page loading.

To use the HTTP2 protocol, the following conditions need to be met:

The website must use the HTTPS protocol because the HTTP2 protocol can only be used over the HTTPS protocol.
The server and client must support the HTTP2 protocol. Most modern browsers and web servers already support the HTTP2 protocol, but you need to check whether additional configuration is required.
Make sure your website's resource sizes are appropriate for HTTP2 protocol multiplexing and header compression. If the resource is too small, multiplexing and header compression may introduce additional overhead.

Seven: DNS prefetching: Using DNS prefetching, you can obtain the DNS resolution results of third-party domain names in advance, thereby increasing the speed of resource requests.

DNS prefetching is a technology for optimizing website performance, which can reduce DNS query time and speed up web page loading. DNS query is the first step when the browser loads a web page. It needs to request the DNS server to resolve the IP address corresponding to the website domain name. DNS prefetching can resolve the IP address corresponding to the domain name to be used in the web page in advance before the browser starts loading the web page, thereby accelerating the DNS query process.

To use DNS prefetching, add the following code to the HTML code in the head of the web page:

<link rel="dns-prefetch" href="//example.com">

Among them, hrefthe attribute specifies the domain name to be prefetched. Multiple prefetched domain names can be added to the same page, with one line for each domain name.

Although DNS prefetching can speed up page loading, excessive use of DNS prefetching can also cause some problems. If many domain names are prefetched, it will increase network load and bandwidth overhead, and may cause DNS cache pollution. Therefore, the number of domain names to be prefetched should be selected based on the actual situation of the website.

Eight: Gzip compression: Using Gzip compression can reduce resource request size, reduce response time, and improve performance.

Gzip compression is a commonly used web page performance optimization technology that can reduce the size of text files such as HTML, CSS, and JavaScript, thereby speeding up page loading and reducing network transmission overhead. Gzip compression takes advantage of the repetitiveness of text files, retaining only one copy of the repeated content, and replacing multiple repeated content with a reference pointing to these repeated contents. Only one copy of the content is transmitted during transmission, thus reducing the network size. Transmission overhead.

Generally speaking, the Gzip compression function can be turned on on the server side. When the server sends a file, it will determine whether the client supports Gzip compression. If it does, the file will be compressed and then sent to the client. Most modern browsers support Gzip compression, so Gzip compression can be enabled on the server side to improve website performance.

For the Apache server, .htaccessGzip compression can be turned on by adding the following code to the file:

<IfModule mod_deflate.c>
    # force deflate for mangled headers
    # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
    <IfModule filter_module>
        FilterDeclare   COMPRESS
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/html
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/css
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/plain
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/x-component
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/javascript
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/json
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/rss+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/atom+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $image/svg+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $font/opentype
        FilterChain     COMPRESS
        FilterProtocol  COMPRESS DEFLATE change=yes;byteranges=no
    </IfModule>

    <IfModule !mod_filter.c>
        # Legacy versions of Apache
        AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
        AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
        AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
    </IfModule>
</IfModule>

The above is the configuration method for the Apache server. In other servers, the specific configuration methods may be different. You can check the corresponding server documentation for more information.

Nine: Image optimization: Large images can be cropped and compressed to reduce file size and improve page loading speed.

Commonly used front-end image optimization techniques include the following:

Compress images: Use professional image compression tools, such as TinyPNG, JPEGmini, etc., to compress the image size to a smaller size, thus reducing the file size. For PNG format images, lossy compression can be used to reduce file size.
Use WebP format images: The WebP format images developed by Google can compress the image size more efficiently, thereby reducing the file size and improving the loading speed of the website. However, WebP format images are not yet supported on some older browsers.
Delayed loading of images: For some larger images, you can use delayed loading of images to optimize loading speed. That is, the images on the page are loaded in sections. When the user scrolls the page to a certain position, the images below that position are loaded, thereby reducing the loading time of the first screen.
Use appropriate image formats: For different types of images, appropriately choosing different image formats can reduce file size. For example, for icons, simple vector graphics, etc., you can choose to use SVG format images; for complex images such as photos, you can choose to use JPEG format images.
CDN acceleration: Using the CDN acceleration service, you can cache images on the CDN server, thereby speeding up the loading of images, reducing the number of requests to the original server, and improving website performance and user experience.

Through the application of the above image optimization technology, the performance and user experience of the website can be greatly improved.

Ten: Compress and merge js and css files: Compress and merge some js and css files of the same type to reduce the file size, thereby reducing the number of requests and improving page loading speed.

Compressing js and css files can reduce the file size, thereby reducing network transmission overhead. There are two commonly used compression methods: one is to delete useless characters such as spaces, newlines, comments, etc. in the code, thereby reducing the size of the file; the other is to use a compression algorithm to compress the code, thereby further reducing the size of the file. The size of the file. Commonly used js and css file compression tools include UglifyJS, YUI Compressor, Google Closure Compiler, etc.

The configuration of these front-end CDN optimization solutions can be adjusted and optimized according to specific circumstances to achieve the best results.