Test your website using Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
On the bottom, you’ll see a link to download an archive containing optimized images, JS and CSS resources. You have to get it and replace your website’s files using archive content.
But after you unpack this archive, you will have all files moved to new locations based on file type, like this:
| <? | |
| /* | |
| Since WooCommerce CSS is a piece of shit and tries to style selectors like '.button' and 'img', it's a good idea to remove this shitty CSS. But! it's hard to implement all styles properly because WooCommerce templates is a hell on Earth without classnames consension and full of server-side rendering. So you cannot “just style it again”. You have to change almost every template function. And even you have enough time for it, there is a lot of things to change before you get a frontend that is OK. | |
| So, a better idea is to remove WooCommerce classnames from your frontend root and move them to WooCommerce content root, a safe place where you want these styles. | |
| */ | |
| function remove_woocommerce_body_classes() { | |
| remove_filter('body_class', 'wc_body_class'); | |
| } | |
| add_action('init', 'remove_woocommerce_body_classes'); |
| .vue-drag-select { | |
| position: relative; | |
| user-select: none; | |
| } | |
| .vue-drag-select-box { | |
| position: absolute; | |
| background: rgba(0, 162, 255, .4); | |
| z-index: 99; | |
| } |
| module.exports = { | |
| "styles:watch": { | |
| "watch": { | |
| "--pattern": "sources/styles/**/*.{sass,scss}", | |
| "--command": "npm run styles:build" | |
| } | |
| }, | |
| "styles:build": [ | |
| "npm run sass:once", | |
| "npm run postcss:once" |
| // Task to compile styles with PostCSS | |
| elixir.extend('processStyles', options=> { | |
| var name = 'processStyles' | |
| var sourcemaps = require('gulp-sourcemaps') | |
| var err = e => { | |
| console.log(require('gulp-util').colors.bgRed('PostCSS - Error')) | |
| console.log(e.message) | |
| } | |
| var notification = require('laravel-elixir/Notification') | |
| new elixir.Task(name, ()=> { |
| { | |
| "name": "85", | |
| "description": "NetCat CMS template for shop", | |
| "scripts": { | |
| "watch:config": "node node_modules/watch-cli/bin/watch", | |
| "watch:styles": "npm run watch:config -- --pattern 'assets/source-styles/**/*.styl' --command 'npm run build:styles'", | |
| "build:styles": "npm run stylus:once && npm run postcss:once", | |
| "stylus:config": "node node_modules/stylus/bin/stylus --sourcemap --sourcemap-root ./assets/source-styles --use nib --out ./assets/css", | |
| "stylus:once": "npm run stylus:config -- ./assets/source-styles/styles.styl", | |
| "postcss:once": "node node_modules/postcss-cli/bin/postcss --config postcss.json", |
| // ---- | |
| // Sass (v3.4.21) | |
| // Compass (v1.0.3) | |
| // ---- | |
| /// Map of breakpoints | |
| /// @type Map | |
| $breakpoints: ( | |
| 'small': '(min-width: 860px)', | |
| 'medium': '(min-width: 1000px)', |
| <body class="t-light"> | |
| <article class="c-modal c-modal--wide js-modal is-open"> | |
| <div class="c-modal__content"> | |
| <div class="s-cms-content"> | |
| ... | |
| </div> | |
| </div> | |
| <div class="c-modal__foot"> | |
| <p class="o-layout"> | |
| <span class="o-layout__item u-1/3"> |
| <body class="light"> | |
| <article class="modal wide open"> | |
| <div class="modal__content"> | |
| ... | |
| </div> | |
| <div class="modal__foot"> | |
| <p class="layout"> | |
| <span class="layout__item 1/3"> | |
| <a href="btn btn--negative">Cancel</a> | |
| </span> |
