How to optimize Core Web Vitals of your WordPress website? This is a presentation deck by Arya (ThinkWeb.dev) on Dewatalks event July 1, 2021.

1. Optimizing
Core Web
Vitals.
Make Visitors and Search Engine Happy

2. • What
• Steps
• Examples
Talking Points:

3. What
A set of metrics created by Google
to ensure every visitor gets a
positive user experience.

4. Core Web Vitals
measures the initial loading
performance of the page
measures how long it takes for
visitors to interact with the page
measures the amount of page
layout shifts

5. What Matters Most ➟
Above
the Fold
Area

6. source: web.dev

7. Steps
Basic Principles ➟
Reduce
and
Simplify
request, size, structure

8. 1. Inline Critical CSS
<style id="inlined-critical-css-example">
html, body {
max-width: 100vw;
overflow-x: hidden;
background-color: #171717;
font-weight: 400;
font-size: max(16.5px,min(17px,(100vw - 100vmin)))
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
:root, html, body, button, input, select, textarea {
font-family: thinkweb,Tahoma,Geneva,sans-serif;
}
...
</style>
Can be created
• Using online tools:
1. https://www.sitelocity.com/critical-
path-css-generator
2. https://pegasaas.com/critical-path-
css-generator/
• Manually
Example:

9. 2. Check the Loaded Assets
Tools
• Gtmetrix’s Waterfal Tab
• Chrome Dev Tools
Example:

10. 3. Identify Unused Assets
Tools
• Chrome Dev Tools > Show
Coverage
Example:

11. 4. Handling Unused CSS
Tools
• Remove:
1. Manually
2. Plugins
• Purify:
1. https://purifycss.online/
2. https://uncss-online.com/
• Remove
• Purify

12. 5. Handling Unused JavaScript
Tools
• Remove:
1. Manually
2. Plugins
• Delay:
1. Flying Script (free) *WordPress
2. WP-Rocket (paid) *WordPress
• Remove
• Delay

13. How to remove assets in WordPress
/* to remove assets on every page */
function tw_unload_files() {
wp_dequeue_style ( 'optim-style' ); // *_style is for css
wp_dequeue_script ( 'jquery-core' ); // *_script is for JavaScript
}
add_action( 'wp_enqueue_scripts', 'tw_unload_files', 100 );
/* to remove assets on certain page or post-type */
function tw_unload_files() {
if ( is_front_page() || is_page([page-id]) || is_single() || is_product() ) {
wp_dequeue_style ( 'optim-style' );
wp_dequeue_script ( 'jquery-core' );
}
}
add_action( 'wp_enqueue_scripts', 'tw_unload_files', 100 );

14. 6. Handling Images
Tools
• Compress:
1. Online Tools
2. Offline Tools
• Delay:
1. Native Lazy Loading
2. JavaScript based
• Image Dedicated CDN:
Imagekit, Statically, AnyoneCDN, etc
• Compress, Reduce, and Resize
• Preload Critical Image
• Delay Below the Fold Images
• Use Image Dedicated CDN

15. 7. Handling Fonts
Basic Principles:
• Limit the number of text fonts
• Don’t use icon fonts
Best Practices:
• Self-host the font files
• Purified and Inline the CSS
• Preload critical font files

16. 8. Handling Above the Fold Area
1. Make it simple
a. Avoid using JavaScript driven content
b. Simplify the HTML structure
c. Limit the number of images
2. Make it fast & light
a. Establish early connections of critical 3rd party resource
b. Don’t combine CSS & JavaScript files
c. Preload any critical assets
d. Delay any non critical assets
e. Use full HTML page cache

17. q How to Establish Early 3rd Party Connection
/* to pre-connect to the google fonts server */
<link rel="preconnect" href="//fonts.gstatic.com">
/* to prefetch the dns of google fonts */
<link rel="dns-prefetch" href="//fonts.gstatic.com">
Example:
<link rel="preconnect" href="the-asset-source-domain-name">
<link rel="dns-prefetch" href="the-asset-source-domain-name">

18. q How to Preload Files
/* to preload image */
<link rel="preload" as="image" href="/wp-content/uploads/optimize-core-web-vitals-s.jpg">
/* to preload font */
<link rel="preload" as="font"
href="https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2" crossorigin>
/* to preload JavaScript */
<link rel="preload" as="script" href="/wp-content/themes/generatepress/assets/js/main.min.js">
/* to preload CSS */
<link rel="preload" as="style" href="/wp-content/themes/generatepress/assets/css/main.min.css">
Example:
<link rel="preload" as="the-asset-type" href="the-asset-url-path">

19. Example / Case Study
www.dewatalks.com

20. Thank You !