EsCeOh
Junior Member
- Dec 26, 2013
- 114
- 47
First, you should analyze your site and take a screenshot of your desktop and mobile score.
This tip will make a better difference with mobile scores.
> https://developers.google.com/speed/pagespeed/insights/
[CLEAN UNUSED CSS]
Screenshot: https://prnt.sc/pxue30
• Google has now introduced a really cool new feature in Chrome DEV TOOLS called "Coverage".
> This will audit your page to test for unused CSS. But it only does that one page, not the whole site. So you don't want to remove unused CSS from the global file that could impact other pages that might use an element (like an accordion).
> https://prnt.sc/pxueqp
• So, you will head to this site: https://purifycss.online/
> Turn off any Cache plugins on WordPress.
> Start with your largest CSS files.
> Download the clean version and FTP to your site to replace the file.
>> Backup your original CSS file first, you will probably need this later.
>> Since PurifyCSS isn't perfect, you will need to navigate a few pages on your site to test for some broken elements. If anything is broken, right-click the element and inspect it (https://prnt.sc/pxui0l), find the element CSS name, find it in the original file, copy and paste to the cleaned file.
>> You will have to do this each time you update your theme, but it only takes 30 seconds. Not to worry, you can just update your theme and re-use your clean file. You can use a "file diff online checker" to test the difference of the "original CSS file" and the new "original file CSS file". Or, just repeat the process above.
This tip will make a better difference with mobile scores.
> https://developers.google.com/speed/pagespeed/insights/
[CLEAN UNUSED CSS]
Screenshot: https://prnt.sc/pxue30
• Google has now introduced a really cool new feature in Chrome DEV TOOLS called "Coverage".
> This will audit your page to test for unused CSS. But it only does that one page, not the whole site. So you don't want to remove unused CSS from the global file that could impact other pages that might use an element (like an accordion).
> https://prnt.sc/pxueqp
• So, you will head to this site: https://purifycss.online/
> Turn off any Cache plugins on WordPress.
> Start with your largest CSS files.
> Download the clean version and FTP to your site to replace the file.
>> Backup your original CSS file first, you will probably need this later.
>> Since PurifyCSS isn't perfect, you will need to navigate a few pages on your site to test for some broken elements. If anything is broken, right-click the element and inspect it (https://prnt.sc/pxui0l), find the element CSS name, find it in the original file, copy and paste to the cleaned file.
>> You will have to do this each time you update your theme, but it only takes 30 seconds. Not to worry, you can just update your theme and re-use your clean file. You can use a "file diff online checker" to test the difference of the "original CSS file" and the new "original file CSS file". Or, just repeat the process above.