All of this is triggerred using the simple command: $ gulp css:uncssĪll you need to do next is load those newly generated CSS files in the corresponding pages layout files: styles-l-hp.css, styles-m-hp.css) and are automatically copied over to pub/static folder after static content regenaration (eg. Those files are saved in theme's web/css folder with names that correspond to the entrypoints given (eg. On our projects, we use another gulp task defined in the local gulpfile that takes config values (base url and entrypoints) from uncss.js and main styles from pub/static folder as input and generates appropriate CSS files. This task can be performed manually, but as per usual, there are tools that help us automate this process that will save a lot of time. Those files can be as small as 10-20% of the merged CSS file so quite substantial savings when it comes to reducing payload. Next step is to define common entrypoints for your website (HP, PDP, product listing page etc.) and create separate CSS files specific to those pages that contain only the rules that are being used on those pages and nothing more. You'll also need to remove those two CSS files from global layout in default_head_blocks.xml: There's multiple ways to do that but we like to use the Filament Group's method which doesn't rely on any external library: ĪssetRepo->getUrl('css/styles-m.css') ?>" media="print" onload="dia='all'" />ĪssetRepo->getUrl('css/styles-l.css') ?>" media="print" onload="dia='(min-width: 768px)'" /> You should start with loading the main css files (styles-m, styles-l) asyncronously. If performance is top priority on your project and you want to take the Eliminate render-blocking resources rule to the limit there's a couple of additional things you can do. You can also trigger the linting tool ad hoc by running: $ gulp less:lint Advanced optimization technique Rules, such as indentation, max-nesting-depth or selector-max-id can be defined in one of the configuration files. When we change any of the CSS files in the theme folder a linter is run before LESS is compiled to CSS warning of any issues. To run it, we simply start development task using: $ gulp dev This process is called linting and we use it as a gulp task in our FED development workflow which is defined in a local gulpfile. At Rocket Web, we use our own process for live checking CSS code after each file save, to catch any potential issues that violate our rules. For that reason, every team should have a set of rules in place that helps developers adhere to standards that will help maintain high quality of code and reduce the size assets at the same time. Linting your CSS during developmentĬreating strict budgetary restrictions for your assets is indeed the best practice but it's definitely not easy in case of more complex projects that are being worked on by many developers, all with various degree of experience. Page Score Insights reports this issue under Eliminate render-blocking resources rule and suggests to keep request counts low and transfer sizes small by utilizing performance budgets. Because CSS by default is downloaded before page render having large assets is not ideal in terms of performance because even though not as significant as non-optimized images, it can still have a substantial impact on page loading speed and Page Speed score. While utilizing Magento built-in tools definitely helps, even on fairly simple projects the size of minified and merged CSS can amount to at least a couple hundred of kBs which. Magento offers those tools out-of-the box and they should really be enabled by default (Configuration > Advanced > Developer > CSS Settings) on any Magento production site. They help reduce payload size and minimize the number of server requests which is always going to have positive impact on the overall performance. Merging and minifying CSS is a standard practice in the performance optimization world which can help significantly speed up a site as well as increase page score.
0 Comments
Leave a Reply. |