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
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 );
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">