SlideShare a Scribd company logo
Optimizing
Core Web
Vitals.
Make Visitors and Search Engine Happy
• What
• Steps
• Examples
Talking Points:
What
A set of metrics created by Google
to ensure every visitor gets a
positive user experience.
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

Recommended for you

SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023

An SEO Audit report helps your website project and ranking factor that also define how many issue is going on in your site. It is the first step to implementation that will measurable results. The purpose of the audit report is to identify the affecting organic search performances as possible. For more information visit our page. Link: https://www.facebook.com/seo1918

seo servicesseodigital marketing
SEO - a brief introduction
SEO - a brief introductionSEO - a brief introduction
SEO - a brief introduction

A short introduction to SEO we use at Geronimo What it means, what can you do to help your website. What's SEM and how does it work (the basics!) Thanks go to Eaon Prichard

mcowenwilsonsimplegeronimo
On-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO TrafficOn-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO Traffic

This is a REAL sample report I ran for 1 of our on-site service pages. This on-page SEO report allows you you to optimize content of every page of your site for important targeted keywords you're looking to rank for. Some features on our onpage optimization report: We provide optimization advice for specific Search Engines We Determine ideal keyword density for your target keywords Analyzes keyword optimization of each HTML element We give you a general analysis of keyword use We outline problem areas on your pages We compare your page with your 10 top-ranking competitors We evaluate competitors' on-page optimization strategy We outline HTML-code element that you optimize right now In a nutshell, this report is the what we use to Optimize the content of every page of your website to ensure a well optimized page for SEO. This is one of the SEO reports you get when we perform a website SEO order for your business website. You can also read more about our SEO Audit Packages at http://www.seotraffic.co.za/seo-services/website-seo-audit-services/. To your SEO Sucess SEO Traffic

seo audit reportingsample seo audit reportsample seo report
What Matters Most ➟
Above
the Fold
Area
source: web.dev
Steps
Basic Principles ➟
Reduce
and
Simplify
request, size, structure
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:

Recommended for you

Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization

This document provides an overview of search engine optimization (SEO) including: - Defining SEO as the process of improving website visibility in organic search results. - Describing how search engines work by crawling, indexing, processing queries, and retrieving results. - Explaining the difference between on-page SEO which involves optimizing individual pages, and off-page SEO which focuses on links and relationships between sites. - Noting the importance of both technical elements like keywords and meta tags as well as content and links to effectively optimize a site.

Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success

A performance optimization presentation for WordCamp Sacramento 2016. Presented by Austin Gil. This presentation addresses issues in design, development, and project management, where performance is most greatly affected. We look at various opportunities and techniques within each stage that may offer more speed. The subjects range from beginner to advanced with tips and advice that just about anyone can walk away with, and we end with a collection of recommended tools. This presentation was designed so the slides would be useful even out of context of the presentation. Please enjoy.

htmloptimizationinternet
SEO Overview
SEO OverviewSEO Overview
SEO Overview

Complete overview of SEO strategies for 2020. Includes on-page SEO steps, Off-page SEO strategies and important tools for marketers.

marketingseocontent marketing
2. Check the Loaded Assets
Tools
• Gtmetrix’s Waterfal Tab
• Chrome Dev Tools
Example:
3. Identify Unused Assets
Tools
• Chrome Dev Tools > Show
Coverage
Example:
4. Handling Unused CSS
Tools
• Remove:
1. Manually
2. Plugins
• Purify:
1. https://purifycss.online/
2. https://uncss-online.com/
• Remove
• Purify
5. Handling Unused JavaScript
Tools
• Remove:
1. Manually
2. Plugins
• Delay:
1. Flying Script (free) *WordPress
2. WP-Rocket (paid) *WordPress
• Remove
• Delay

Recommended for you

Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil

The document discusses Google's Core Web Vitals metrics for measuring website performance. It covers the three metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. For each metric, it explains what the metric measures, how to measure it using lab and field tools, and provides optimizations to improve the metric such as reducing page size, prioritizing critical resources, and specifying element sizes. It also addresses frequently asked questions about the metrics and their impact on SEO and user experience. The overall message is that optimizing the Core Web Vitals will improve users' experience of a website which is important for both users and SEO.

web vitalswebperformanceux
Website Audit Report Sample
Website Audit Report SampleWebsite Audit Report Sample
Website Audit Report Sample

This is a sample of the website audit reports that my company, S3 Optimization provides. Because of all the recent changes within Google, we're offering these for free (a $500 value) to business owners who are serious about their rankings and being compliant with Google.

mobile websitesgoogle updateppc
Website Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation SlidesWebsite Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation Slides

This proposal provides a comprehensive website audit and strategy for improving a client's website. The audit will analyze the site's performance, architecture, SEO, and user experience to identify issues. A detailed report will be compiled with the site's traffic patterns, sources, conversion rates, and recommended improvements. The proposal outlines the audit process and timeline, deliverables, costs, and next steps to move forward with the project.

business proposalproposal templateswebsite audit proposal
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 );
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
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
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

Recommended for you

Foxtail Website Audit
Foxtail Website AuditFoxtail Website Audit
Foxtail Website Audit

This document provides recommendations from a website audit to help optimize the website for search engines and visitors. The recommendations focus on improving accessibility, indexability, on-page and off-page ranking factors, and information architecture. The implementation of these recommendations is important to make the website easier for search engines to understand and for users to use. Areas that need optimization include meta titles and descriptions, images, internal linking structure, backlink profile, and social sharing integration.

Seo proposal
Seo proposalSeo proposal
Seo proposal

The document provides an SEO proposal with 8 steps: 1) analysis of client needs, website, and competitors; 2) keyword research and analysis; 3) on-page optimization; 4) content optimization; 5) link building; 6) social media optimization; 7) reporting; and 8) feedback. It then outlines SEO packages with differing deliverables and costs, including on-page and off-page optimization tasks, and content creation. Payment is required upfront via PayPal.

seo servicesrequest for proposal
Website Audit Presentation
Website Audit PresentationWebsite Audit Presentation
Website Audit Presentation

The document discusses various aspects of website auditing including SEO auditing, content optimization, internal linking, URL structure, use of robots.txt and sitemaps, source code optimization, design and usability, and navigation. It provides tips on making a website more search engine friendly and improving its online presence through conversion rate optimization.

website auditsite audit
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">
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">
Example / Case Study
www.dewatalks.com
Thank You !

Recommended for you

Link building ppt
Link building pptLink building ppt
Link building ppt

Link building involves creating inbound links to a website from external sites to improve search engine rankings and increase targeted traffic. It is important to build quality links from relevant sites through methods like email outreach, guest blogging, and directory submissions. An effective link building strategy focuses on creating valuable content that other sites will want to link to organically over time in order to achieve business objectives through increased visibility and rankings.

Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.

This is one of my SEO, CRO Website audit. Note: This audit missed the report of google analytics, cause I have had no access for the GA account.

digital marketingcroseo
Google Search Console
Google Search ConsoleGoogle Search Console
Google Search Console

The document provides an overview of Google Search Console, which allows website owners to monitor how their site appears in Google search results and identify potential issues. It discusses how to register a site with Search Console and describes several tools available in Search Console, including tools for structured data, data highlighting, sitelinks, traffic analysis, the site index, crawling, and bounce rates. Reducing bounce rates is important as a high rate can indicate users are not engaged by the content or navigation.

googleseo

More Related Content

What's hot

SEO, Search Engine Ranking Position (SERP) Report
SEO, Search Engine Ranking Position (SERP) ReportSEO, Search Engine Ranking Position (SERP) Report
SEO, Search Engine Ranking Position (SERP) Report
Kevin James
 
Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.
Ian Lurie
 
Core Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay AttentionCore Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay Attention
TAC Marketing Group
 
SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023
SEO Expert
 
SEO - a brief introduction
SEO - a brief introductionSEO - a brief introduction
SEO - a brief introduction
Becky McOwen-Banks
 
On-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO TrafficOn-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO Traffic
SEO Traffic
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization
Computing Cage
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
Austin Gil
 
SEO Overview
SEO OverviewSEO Overview
SEO Overview
Bridgett Gutierrez
 
Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil
Aymen Loukil
 
Website Audit Report Sample
Website Audit Report SampleWebsite Audit Report Sample
Website Audit Report Sample
Jordyn Gingrich
 
Website Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation SlidesWebsite Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation Slides
SlideTeam
 
Foxtail Website Audit
Foxtail Website AuditFoxtail Website Audit
Foxtail Website Audit
Foxtail Marketing
 
Seo proposal
Seo proposalSeo proposal
Seo proposal
kadajb
 
Website Audit Presentation
Website Audit PresentationWebsite Audit Presentation
Link building ppt
Link building pptLink building ppt
Link building ppt
Chaitanya Raavi
 
Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.
Tarak Turki
 
Google Search Console
Google Search ConsoleGoogle Search Console
Google Search Console
Hekmat Sarwarzada
 
Website audit
Website auditWebsite audit
Website audit
David Durham
 
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search MarketingIntro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
HawkEye Search Marketing
 

What's hot (20)

SEO, Search Engine Ranking Position (SERP) Report
SEO, Search Engine Ranking Position (SERP) ReportSEO, Search Engine Ranking Position (SERP) Report
SEO, Search Engine Ranking Position (SERP) Report
 
Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.
 
Core Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay AttentionCore Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay Attention
 
SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023SEO Audit Report | Analyze Website Free 2023
SEO Audit Report | Analyze Website Free 2023
 
SEO - a brief introduction
SEO - a brief introductionSEO - a brief introduction
SEO - a brief introduction
 
On-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO TrafficOn-Page Optimization SEO Report Sample by SEO Traffic
On-Page Optimization SEO Report Sample by SEO Traffic
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
SEO Overview
SEO OverviewSEO Overview
SEO Overview
 
Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil
 
Website Audit Report Sample
Website Audit Report SampleWebsite Audit Report Sample
Website Audit Report Sample
 
Website Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation SlidesWebsite Audit Proposal Template PowerPoint Presentation Slides
Website Audit Proposal Template PowerPoint Presentation Slides
 
Foxtail Website Audit
Foxtail Website AuditFoxtail Website Audit
Foxtail Website Audit
 
Seo proposal
Seo proposalSeo proposal
Seo proposal
 
Website Audit Presentation
Website Audit PresentationWebsite Audit Presentation
Website Audit Presentation
 
Link building ppt
Link building pptLink building ppt
Link building ppt
 
Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.Website Analysis Report : SEO, CRO Website Audit.
Website Analysis Report : SEO, CRO Website Audit.
 
Google Search Console
Google Search ConsoleGoogle Search Console
Google Search Console
 
Website audit
Website auditWebsite audit
Website audit
 
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search MarketingIntro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
Intro to Pay-Per-Click (PPC) Marketing - HawkEye Search Marketing
 

Similar to Core Web Vitals Optimization for any website, especially WordPress

performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
Minimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tipsMinimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tips
CgColors
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
Patrick Huesler
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk
 
Ui dev@naukri-2011
Ui dev@naukri-2011Ui dev@naukri-2011
Ui dev@naukri-2011
Pankaj Maheshwari
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
Bastian Grimm
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
12 GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
12   GoMeasure (sg and kl) - page speed light speed path to conversions - joh...12   GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
12 GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
Vinoaj Vijeyakumaar
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
Matthew Lancaster
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
Speed!
Speed!Speed!
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Design for Performance
Design for PerformanceDesign for Performance
Design for Performance
Jon Boutelle
 

Similar to Core Web Vitals Optimization for any website, especially WordPress (20)

performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Minimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tipsMinimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tips
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Ui dev@naukri-2011
Ui dev@naukri-2011Ui dev@naukri-2011
Ui dev@naukri-2011
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
12 GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
12   GoMeasure (sg and kl) - page speed light speed path to conversions - joh...12   GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
12 GoMeasure (sg and kl) - page speed light speed path to conversions - joh...
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Speed!
Speed!Speed!
Speed!
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Design for Performance
Design for PerformanceDesign for Performance
Design for Performance
 

More from ClementYo

Sharing Prompt AI yang Efektif Dalam Pembuatan Konten
Sharing Prompt AI yang Efektif Dalam Pembuatan KontenSharing Prompt AI yang Efektif Dalam Pembuatan Konten
Sharing Prompt AI yang Efektif Dalam Pembuatan Konten
ClementYo
 
Prinsip Dasar Desain Website
Prinsip Dasar Desain WebsitePrinsip Dasar Desain Website
Prinsip Dasar Desain Website
ClementYo
 
Site Structure - Present.pdf
Site Structure - Present.pdfSite Structure - Present.pdf
Site Structure - Present.pdf
ClementYo
 
Whatsapp 101 on WordPress
Whatsapp 101 on WordPressWhatsapp 101 on WordPress
Whatsapp 101 on WordPress
ClementYo
 
Best Practice Elementor Optimization For WordPress.pptx
Best Practice Elementor Optimization For WordPress.pptxBest Practice Elementor Optimization For WordPress.pptx
Best Practice Elementor Optimization For WordPress.pptx
ClementYo
 
Business Mindset: Agency vs Freelancer
Business Mindset: Agency vs FreelancerBusiness Mindset: Agency vs Freelancer
Business Mindset: Agency vs Freelancer
ClementYo
 
How To Create A High Converting Landing Page + Case Studies
How To Create A High Converting Landing Page + Case StudiesHow To Create A High Converting Landing Page + Case Studies
How To Create A High Converting Landing Page + Case Studies
ClementYo
 
SEO Copywriting - A presentation by Andi Datin Hardyanti
SEO Copywriting - A presentation by Andi Datin HardyantiSEO Copywriting - A presentation by Andi Datin Hardyanti
SEO Copywriting - A presentation by Andi Datin Hardyanti
ClementYo
 
Better UX = Better Web Conversion
Better UX = Better Web ConversionBetter UX = Better Web Conversion
Better UX = Better Web Conversion
ClementYo
 

More from ClementYo (9)

Sharing Prompt AI yang Efektif Dalam Pembuatan Konten
Sharing Prompt AI yang Efektif Dalam Pembuatan KontenSharing Prompt AI yang Efektif Dalam Pembuatan Konten
Sharing Prompt AI yang Efektif Dalam Pembuatan Konten
 
Prinsip Dasar Desain Website
Prinsip Dasar Desain WebsitePrinsip Dasar Desain Website
Prinsip Dasar Desain Website
 
Site Structure - Present.pdf
Site Structure - Present.pdfSite Structure - Present.pdf
Site Structure - Present.pdf
 
Whatsapp 101 on WordPress
Whatsapp 101 on WordPressWhatsapp 101 on WordPress
Whatsapp 101 on WordPress
 
Best Practice Elementor Optimization For WordPress.pptx
Best Practice Elementor Optimization For WordPress.pptxBest Practice Elementor Optimization For WordPress.pptx
Best Practice Elementor Optimization For WordPress.pptx
 
Business Mindset: Agency vs Freelancer
Business Mindset: Agency vs FreelancerBusiness Mindset: Agency vs Freelancer
Business Mindset: Agency vs Freelancer
 
How To Create A High Converting Landing Page + Case Studies
How To Create A High Converting Landing Page + Case StudiesHow To Create A High Converting Landing Page + Case Studies
How To Create A High Converting Landing Page + Case Studies
 
SEO Copywriting - A presentation by Andi Datin Hardyanti
SEO Copywriting - A presentation by Andi Datin HardyantiSEO Copywriting - A presentation by Andi Datin Hardyanti
SEO Copywriting - A presentation by Andi Datin Hardyanti
 
Better UX = Better Web Conversion
Better UX = Better Web ConversionBetter UX = Better Web Conversion
Better UX = Better Web Conversion
 

Recently uploaded

Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
taqyea
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
taqyea
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
taqyea
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
taqyea
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
taqyea
 
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
taqyea
 
Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)
Kashyap J
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
ubufe
 
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
taqyea
 
Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
Serva AppLabs
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Thiên Đường Tình Yêu
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
taqyea
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
taqyea
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
Bestdesign2hub
 
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
taqyea
 
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
taqyea
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
taqyea
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
Serva AppLabs
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
thomaskurtha9
 

Recently uploaded (20)

Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
一比一原版(ukc毕业证书)英国肯特大学毕业证如何办理
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
 
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
 
Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
 
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
一比一原版(soas毕业证书)英国伦敦大学亚非学院毕业证如何办理
 
Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
 
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
 
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
 

Core Web Vitals Optimization for any website, especially WordPress

  • 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
  • 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