2. Create Critical CSS
Create critical css for Home, Pages, Single Pages, Product, Archive pages
Last updated
Create critical css for Home, Pages, Single Pages, Product, Archive pages
Last updated
Critical CSS is one technology to help your websites can load CSS for elements in the first view ( not scroll down ) - and makes your site can loads direct for readers in a very short time.
Our plugin uses a standalone server to generate automatic critical CSS for our client websites. However, sometimes you have to wait for the server to process your website. Even in many cases, the web does not create critical CSS because the customer's website has previous CSS errors.
To overcome this disadvantage, it is also convenient for both us and you, we've developed a tool to create critical CSS in the form of software running on the computer ( at this moment just works on Window )
The generated CSS will be saved to the wp-content/uploads/critical-css directory on the hosting.
Normally, you need to use the Critical CSS tool and generate the critical CSS files for 4 types of pages:
- Homepage URL
- A single post URL ( generate critical CSS for one single post page and it will apply for all single post pages )
- A Page URL ( generate critical CSS for one page and it will apply for all Pages )
- One category URL. ( generate critical CSS for one category page and it will apply for all category Pages, archive pages.. )
You can download the software from this URL
After downloading, extract the zip file into a folder on your computer. Eg 'D:/critical-win32-x64'. Double-click the critical.exe file to start running the application.
The first screen will ask you for information to login. In order to use the software, you need 2 information: website URL & purchase code. Fill in your website URL and purchase code to the field and click on the "Submit" button.
When you logged in, the software looks like this:
Main functions of the software:
Create critical CSS for URL
Purge cache for WordPress site
Validate CSS link or validate all CSS in URL
(1) Refresh Tool: reload application. Example: you have just created the CSS for one URL, and you click this button to see the results.
(2) Logout domain: log out the current domain, to return to the login screen.
Critical CSS (or optimized CSS ) is created for each different type of page, eg: homepage, page, single post, product, archive..and save this CSS code as a .css file located in resources\app\criticalcss\src\dest\$domain of the software.
And you need to copy the representative URL of each different type of page like: homepage, page, single post, product, archive... and add each representative URL to "put your link" to regenerate critical CSS for that type of page.
Each URL has 3 operations
(8) Remove CSS: remove critical CSS file for URL
(9) Remove URL: remove critical CSS file for URL & remove URL itself from URLs list.
(10) Validate CSS: validate single CSS file from an URL
(11) Generate CSS: create critical CSS for URL
(12) Upload CSS: manual upload ( or override if the old critical CSS file exists ) the critical CSS file of URL to the hosting.
You can also apply a series of URLs for the following actions:
(3) Remove all CSS: Delete CSS file of all URLs.
(4) Remove all URLs: Delete all CSS and URLs.
(5) Generate CSS for all URLs: Generates critical CSS for all URLs that have been added to the list. Note: you need to save the URLs and code before you can perform this operation by pressing the [save] button.
After the critical CSS is created successfully, you press the button (1) Refresh Tool to see the result. If the CSS file is created successfully, each URL will generate 2 .css files:
(6) View CSS for desktop: CSS used in desktop view.
(8) View CSS for mobile: CSS used in mobile view
Critical CSS is automatically uploaded to hosting via Wordpress Rest API, in case the web blocks this feature, you must upload it manually (button 13). All critical css are stored in the wp-content/uploads/critical-css directory on the hosting.
Note:
Create a critical-CSS directory on the hosting if it does not exist.
The CSS was created on the software and exists on the hosting, but you still see the layout lag -> most likely the URL is being cached, please clear the cache before testing. Tip: you can add any parameters to the end of the URL for quick testing
You can also check whether the Rest API works for your website or not by pressing the (12) Upload CSS button.
Important: If you change the layout affect much to the first screen like header style, featured slider style on the homepage ( the first screen is the preview on Google Page Speed - check this image to understand more detail ), then you should press the [Purge All] button from the plugin's Settings page & don't forget to re-create the critical css again and click to "Upload CSS" button on the Critical CSS Tool to update the critical CSS files to get the best results.
If you get an error when creating CSS, it means the tool found the error CSS syntax on the URL. A message dialog box is opened showing error information (in which file and line). And you need to fix the error before can regenerate CSS again.
You can validate the CSS syntax of the URL and the CSS file. Use the (10) validate CSS button if you want to check the CSS error of each URL.
Alternatively, you want to check the validity of a particular CSS file by entering the link to the CSS file in the "Enter CSS url .." field and pressing the (15) Validate CSS button.
(18) List remote CSS: Displays the list of critical CSS that have been uploaded to the website.
(17) Purge cache: purge cache for the web. Note: Penci Speed Optimizer is not a cache plugin, we clear the cache generated by cache plugins like w3 total cache, wp-rocket..
