Cascading Style Sheets or CSS, This is what makes your websites more beautiful and fancy looking. It’s just for all the visual effects and with new version simple animation too. Allows you to specify things like the size of your text, the font you want on your page, whether the page is to have 2 columns, whether your text is to be in bold, underlined or italics, and so on. In other words you can say, it is the part that lets you control the appearance of your web page.
Java Script or JS, Javascript, Is the real programming language which runs in your browser. It gives your webpage power, it is managed everything that has to change after the website loaded, for example you can create a button that makes text disappear when you click on it, you can fairly do anything with JS or javascript, you even can load more and more data from the server, that you want to appear on the webpage. HTML alone can not do that.
CSS and JS are used in every website these days, especially Magento2 is using these two like anything.
Concatenation Of CSS and JS Files
Magento has this feature at the back-end that allows concatenation of the multiple web resources that are used by the application JavaScript and CSS files into a smaller number of files. Use of this feature can either reduce the size of applications or improve their start time. Lessen the amount of CSS and JS files or concatenate your CSS and JS files into one file.
For Example: If there are five JS files, that means they are occupying the size of five but if you concatenate those files into one, so the request will count as one instead of five.
Minify JavaScript and CSS : Mainly all pop ups are that comes between the websites are made up from Java Scripts. All the third party templates are so heavy so its necessary to minify them. Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified the CSS and JS files by removing extra spaces, characters, block delimiters and comments as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS. Let’s us show you the difference between the code with comments and white spaces and code without comments and white spaces through the screenshot I and II below:
Screenshot I
Screenshot II
Remove Duplicate Scripts : Always try to use CSS and JS library from Standard CDN. If you are not familiar with a content delivery network (CDN) we highly recommend you read our article on CDN. There are many types of CDN available in the market including Google CDN, CDNJS.com etc. Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution. Besides speeding up the delivery of your assets around the world, CDN also dramatically helps to decrease duplicate scripts.
That’s all in our this article, we will discuss about Expire Headers in our next article.
Stay Tuned !
Disclaimer: This Blog claims no credit for any images posted on this site unless otherwise noted. Images on this blog are copyright to its respectful owners and have been collected from numerous resources in the public domain across the internet.