In addition, inline scripts are considered not safe when implementing a Content Security Policy (CSP). However, when overdone, inlining code can also have negative effects on the performance of the site: Because the code is not cacheable, the same content is sent to the client repeatedly, and it can’t be pre-cached through Service Workers, or cached and accessed from a Content Delivery Network. the time it takes for a page to become usable.) For instance, we can use the buffer of data delivered immediately when loading the site (around 14kb) to inline the critical styles, including styles of above-the-fold content (as had been done on the previous Smashing Magazine site), and font sizes and layout widths and heights to avoid a jumpy layout re-rendering when the rest of the data is delivered. As such, it is useful for improving the perceived performance of the site (i.e. Inlining is the process of including the contents of files directly in the HTML document: CSS files can be inlined inside a style element, and JavaScript files can be inlined inside a script element: īy printing the code already in the HTML output, inlining avoids render-blocking requests and executes the code before the page is rendered. In this article, we will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code. Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |