There are several tools available that can help minify CSS, including CSS Compressor (used for our example above), CSSminifier and CleanCSS. Reducing your CSS by 31.89 percent is no small feat and can have a dramatic impact on your readership and even your ability to convert a visitor into a customer. Ultimately, minifying CSS is abbreviating CSS properties utilizing standard CSS rules and removing any unnecessary characters within the file. It’s important to keep in mind that there is no functionality loss when minifying your CSS file. Developers often leave an unnecessary semicolon on the last property-value when writing their declarations. Watch CSS notationsĬSS notation is a selector, followed by properties within parenthesis, separated by semicolons. Removing unnecessary CSS code like duplicate or unused declarations is one of the easiest ways to reduce your CSS file size. Be careful, though! Many times CSS declarations may be included for unique pages, tools, or media types that these tools can not identify. There are some tools on the web to identify declarations no longer in use. Over time, CSS files often become unruly and large as developers add CSS for different pages or integrations that may no longer be utilized. Ways to Minify CSS in WordPress Remove unnecessary CSS High - no readability and smallest file size (style-high.css).Moderate - moderate readability and smaller file size (style-moderate.css).Standard -maintains a balance between readability and smaller file size (style-standard.css).Low - maintains the high readability of your CSS (style-low.css).Original -this stylesheet has no minification (style.css).You can download all the example files here. We’re going to adjust our minification efforts at four levels of aggressiveness to show what the overall impact is. Some minification techniques are fairly simple – like removing notes and whitespace – and some are very aggressive – like utilizing shorthand. This is a fairly small CSS file already, but it’s not fully minified so we can shave off some of the load time. The original CSS stylesheet (style.css) is 102,951 bytes. Minifying CSS is the process of removing unnecessary characters from a CSS file, thus reducing the file size and increasing the speed at which a visitor can download your page.įor these examples, we’re going to utilize the famous Twenty Fifteen theme from WordPress. Media can be compressed, too, but that’s for another article. Minimizing the file size reduces the time for them to be downloaded. In order to speed up your site’s loading time - especially on the first visit - it’s imperative that your HTML, CSS and JavaScript be written so that the files are as small as possible. This will slow your page loading times unnecessarily. The problem with style sections and inline styles is that they will be loaded every time with the page and never cached by the browser. A best practice is to remove or minify CSS references in your HTML - whether it’s a style section in the head of the page or inline styles applied throughout the page elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |