SEO & Security in Web Performance Optimization
April 16, 2025
SEO & Security in Web Performance Optimization April 16, 2025 1 / 67
Overview I
Importance of SEO in Web
Development
Core Web Vitals and SEO
Security implications in SEO
practices
SEO & Security in Web Performance Optimization April 16, 2025 2 / 67
Overview II
Web performance optimization
and its dual impact on UX and
SEO
Preventive strategies against
SEO attacks
SEO & Security in Web Performance Optimization April 16, 2025 3 / 67
What is SEO? I
SEO = Search Engine
Optimization
Enhances visibility in search
engine results
Combines technical, creative,
and strategic elements
SEO & Security in Web Performance Optimization April 16, 2025 4 / 67
What is SEO? II
Attracts organic (non-paid)
traffic
SEO & Security in Web Performance Optimization April 16, 2025 5 / 67
Core Components of SEO I
1. On-Page SEO
Title tags, meta descriptions
Semantic HTML, alt attributes
- Semantic HTML means
using HTML elements
according to their
SEO & Security in Web Performance Optimization April 16, 2025 6 / 67
Core Components of SEO II
meaning and not just for
visual presentation
- <div class=”header”> vs
<header>, <div class=”nav”>
vs <nav>, <div
class=”footer”> vs <footer>
Structured data (schema.org)
SEO & Security in Web Performance Optimization April 16, 2025 7 / 67
Core Components of SEO III
2. Off-Page SEO
Backlinks( links from one
website to another)
Social proof and authority
3. Technical SEO
Crawlability and indexability
HTTPS, mobile-first design
SEO & Security in Web Performance Optimization April 16, 2025 8 / 67
Core Components of SEO IV
Sitemaps, robots.txt
SEO & Security in Web Performance Optimization April 16, 2025 9 / 67
Why SEO Matters in Web Development I
1
Increased Visibility and
Organic Traffic
2
Better User Experience
3
Cost-Effective Marketing
4
Analytics and Insight
Generation
SEO & Security in Web Performance Optimization April 16, 2025 10 / 67
Why SEO Matters in Web Development II
5
Security and Trust
(HTTPS)
SEO & Security in Web Performance Optimization April 16, 2025 11 / 67
SEO and User Experience I
Fast loading pages → Lower
bounce rate
Mobile responsiveness → Better
rankings
Clear navigation → Enhanced
engagement
SEO & Security in Web Performance Optimization April 16, 2025 12 / 67
SEO and User Experience II
Semantic content →
Accessibility
SEO & Security in Web Performance Optimization April 16, 2025 13 / 67
How Does Google Know If Users Are Engaged? I
Google can’t see everything, but
it uses smart signals:
Search behavior (clicks, time on page)
Chrome browser data (anonymized)
Core Web Vitals (user experience metrics)
Google Analytics/Search Console (if installed)
SEO & Security in Web Performance Optimization April 16, 2025 14 / 67
Search Behavior: Dwell Time & Pogo-Sticking I
Dwell Time: How long a user
stays on a page before returning
to search results
Pogo-Sticking: Clicking
multiple search results quickly
— signals dissatisfaction
SEO & Security in Web Performance Optimization April 16, 2025 15 / 67
Search Behavior: Dwell Time & Pogo-Sticking II
Google tracks this behavior from
its search engine
SEO & Security in Web Performance Optimization April 16, 2025 16 / 67
Chrome Data & Core Web Vitals I
Google Chrome collects anonymized usage
stats:
Scroll activity, time on tab, interactions
Core Web Vitals:
LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
SEO & Security in Web Performance Optimization April 16, 2025 17 / 67
Optional Tools: Analytics & Console I
Google Analytics (if used)
shows:
Bounce rate, session duration, pageviews
Google Search Console (if
linked) provides:
Click-through rates(measures the percentage of
users who click on a link after seeing it.),
impressions, indexing data
SEO & Security in Web Performance Optimization April 16, 2025 18 / 67
Web Developer’s Role in SEO I
Area Developer Task SEO Benefit
Page Speed Optimize media, defer JS Higher Core Web Vitals
Mobile Design Responsive layouts Mobile-first indexing
URLs Semantic and clean Better indexing
Accessibility Alt text, ARIA labels SEO and UX alignment
Structured Data Use JSON-LD markup Rich snippets in SERPs
SEO & Security in Web Performance Optimization April 16, 2025 19 / 67
Popular SEO Tools for Developers I
Google Lighthouse – SEO
audits & Core Web Vitals
Google Search Console –
Indexing, performance
Screaming Frog – Technical
SEO crawler
SEO & Security in Web Performance Optimization April 16, 2025 20 / 67
Popular SEO Tools for Developers II
Ahrefs, SEMrush, Moz –
Backlinks, keywords
Yoast SEO (WordPress) –
On-page optimization
SEO & Security in Web Performance Optimization April 16, 2025 21 / 67
Core Web Vitals & SEO I
Core Web Vitals are metrics
introduced by Google to measure
user experience:
Largest Contentful Paint
(LCP) – loading performance
(<2.5s)
Measures: Loading performance (how quickly the
main content appears).
SEO & Security in Web Performance Optimization April 16, 2025 22 / 67
Core Web Vitals & SEO II
Goal: Should occur within 2.5 seconds of page
load.
What it tracks: The render time of the largest
image or text block visible in the viewport.
First Input Delay (FID) –
interactivity (<100ms)
Measures: Interactivity (how fast a page responds
to user input).
Goal: Should be less than 100 milliseconds.
SEO & Security in Web Performance Optimization April 16, 2025 23 / 67
Core Web Vitals & SEO III
What it tracks: The delay between a user’s first
interaction (click, tap, etc.) and the browser’s
response.
Cumulative Layout Shift
(CLS) – visual stability (<0.1)
Measures: Visual stability (unexpected layout
shifts).
Goal: Score should be less than 0.1.
What it tracks: Unexpected movement of page
elements (e.g., ads loading late and pushing
content down).
SEO & Security in Web Performance Optimization April 16, 2025 24 / 67
Core Web Vitals & SEO IV
Why Are Core Web Vitals
Important?
SEO Impact: Google uses them as ranking factors.
User Experience: Faster, more stable pages reduce
bounce rates and improve engagement.
Enhances overall search visibility
Performance Optimization: Helps developers identify
and fix critical issues.
SEO & Security in Web Performance Optimization April 16, 2025 25 / 67
Core Web Vitals & SEO V
How to Measure Core Web
Vitals?
Google PageSpeed Insights
Chrome User Experience Report (CrUX)
Lighthouse (for lab testing)
Search Console (Core Web Vitals Report)
Best Practices for
Improvement:
SEO & Security in Web Performance Optimization April 16, 2025 26 / 67
Core Web Vitals & SEO VI
LCP: Optimize images, use efficient hosting, reduce
server response time.
FID/INP: Minimize JavaScript execution time, use
Web Workers, defer non-critical scripts.
CLS: Specify image/dimensions, avoid dynamically
injected content above existing content.
Optimizing a website for very
slow networks (< 1Mbps,
SEO & Security in Web Performance Optimization April 16, 2025 27 / 67
Core Web Vitals & SEO VII
similar to 3G or poor 4G
connections)
1. Critical Rendering Path
Optimization
Goal: Load the bare minimum
needed to display usable content
quickly.
SEO & Security in Web Performance Optimization April 16, 2025 28 / 67
Core Web Vitals & SEO VIII
A. Minimize & Prioritize
Above-the-Fold Content(
portion of a webpage that is
visible to the user without
scrolling.)
Lazy load all non-critical images/videos (use
loading=”lazy”).
Inline critical CSS (or use server-side rendering for
faster initial paint).
SEO & Security in Web Performance Optimization April 16, 2025 29 / 67
Core Web Vitals & SEO IX
Defer all non-essential JavaScript (async, defer).
Use ¡link rel=”preload”¿ for key resources (fonts, hero
images).
B. Extreme File Size
Reduction
Images:
Convert to WebP/AVIF (30-50% smaller than
JPEG/PNG).
Use compression tools (Squoosh, TinyPNG).
SEO & Security in Web Performance Optimization April 16, 2025 30 / 67
Core Web Vitals & SEO X
Set explicit width & height to prevent layout shifts
(CLS).
Fonts:
Use system fonts (Arial, Helvetica) if possible.
If custom fonts:
- Load only required weights (no font-display:
swap unless critical).
- Subset fonts (e.g., Google Fonts with &text=).
JavaScript/CSS:
Minify & tree-shake (remove unused code).
Serve Brotli/Gzip-compressed assets.
SEO & Security in Web Performance Optimization April 16, 2025 31 / 67
Core Web Vitals & SEO XI
2. Reduce Network Requests
Goal: Fewer HTTP requests =
faster load at ¡1 Mbps.
Combine & inline small CSS/JS files.
Use SVG instead of icons fonts/images.
Cache aggressively (Cache-Control:
max-age=31536000 for static assets).
Host assets on a CDN (reduces latency).
SEO & Security in Web Performance Optimization April 16, 2025 32 / 67
Core Web Vitals & SEO XII
3. Optimize Server &
Delivery
Goal: Reduce TTFB (Time to
First Byte) and improve reliability.
Use a fast, global hosting provider (e.g., Cloudflare,
Vercel, Netlify).
Enable HTTP/2 or HTTP/3 (multiplexing reduces
latency).
Reduce redirects (each adds extra round trips).
SEO & Security in Web Performance Optimization April 16, 2025 33 / 67
Core Web Vitals & SEO XIII
Serve a static version if possible (SSG ¿ SSR ¿ CSR).
4. Progressive Enhancement
& Fallbacks
Goal: Ensure usability even if some
resources fail to load.
Show text fallbacks while images load.
Use skeleton screens for perceived performance.
Service Workers: Cache core assets for offline use.
SEO & Security in Web Performance Optimization April 16, 2025 34 / 67
Core Web Vitals & SEO XIV
5. Testing & Monitoring
Goal: Verify performance under
real <1 Mbps conditions. Tools:
Chrome DevTools (Throttling):
Simulate Slow 3G ( 0.4 Mbps) or custom <1 Mbps
throttling.
WebPageTest (Advanced Settings):
Test with actual 3G throttling from global locations.
SEO & Security in Web Performance Optimization April 16, 2025 35 / 67
Core Web Vitals & SEO XV
Lighthouse (Mobile + Throttling):
Run audits with 4x CPU slowdown + 0.5 Mbps
throttling.
Key Metrics to Watch:
LCP < 2.5s (prioritize text over
images if needed).
CLS < 0.1 (avoid sudden layout
shifts).
SEO & Security in Web Performance Optimization April 16, 2025 36 / 67
Core Web Vitals & SEO XVI
FID/INP < 100ms (keep JS
minimal).
SEO & Security in Web Performance Optimization April 16, 2025 37 / 67
Structured Data & Schema Markup I
Structured Data: Enhance SEO
performance by adding structured
data and running an SEO audit to
identify improvements.
JSON-LD, Microdata, RDFa –
formats to annotate HTML
SEO & Security in Web Performance Optimization April 16, 2025 38 / 67
Structured Data & Schema Markup II
Helps search engines understand
the content better
Structured Data & Schema Markup III
Benefits:
Enables rich snippets (ratings,
FAQs, prices)
Increases CTR (Click-Through
Rate)- measures the percentage
of users who click on a link after
seeing it.
SEO & Security in Web Performance Optimization April 16, 2025 40 / 67
Structured Data & Schema Markup IV
Enhances semantic relevance of
content
SEO & Structured Data Integration in a Simple Blog
Website
Figure: directory structure
SEO & Security in Web Performance Optimization April 16, 2025 42 / 67
Store blog data I
1. data/posts.json – Store Blog Data
[
{
"id": "1",
"title": "Core Web Vitals in 2025",
"author": "Jane Doe",
"date": "2025-04-01",
"content": "Largest Contentful Paint (LCP),
First Input Delay (FID)...",
"image": "images/post1.jpg"
},
SEO & Security in Web Performance Optimization April 16, 2025 43 / 67
Store blog data II
{
"id": "2",
"title": "Structured Data Simplified",
"author": "Jane Doe",
"date": "2025-04-05",
"content": "JSON-LD is the preferred
format for structured data...",
"image": "images/post2.jpg"
}
]
SEO & Security in Web Performance Optimization April 16, 2025 44 / 67
HTML I
2. index.html – Blog Home
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Jane’s SEO Blog</title>
<link rel="stylesheet"
href="css/styles.css" />
<script src="js/main.js" defer></script>
</head>
<body>
SEO & Security in Web Performance Optimization April 16, 2025 45 / 67
HTML II
<header>
<h1>Jane’s SEO Blog</h1>
</header>
<main id="posts"></main>
<footer>
<p>© 2025 Jane Doe</p>
</footer>
</body>
</html>
SEO & Security in Web Performance Optimization April 16, 2025 46 / 67
JS I
3. js/main.js – Dynamically Render Posts
fetch(’data/posts.json’)
.then(response => response.json())
.then(posts => {
const container = document.getElementById
(’posts’);
posts.forEach(post => {
const card = document.createElement(’div’)
card.innerHTML = ‘
<h2><a href="post.html?id=${post.id}">
${post.title}</a></h2>
SEO & Security in Web Performance Optimization April 16, 2025 47 / 67
JS II
<p>By ${post.author} on ${post.date}</p>
‘;
container.appendChild(card);
});
});
SEO & Security in Web Performance Optimization April 16, 2025 48 / 67
Individual Post Page I
4. post.html – Individual Post Page with Dynamic
JSON-LD Schema
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Post</title>
<script src="js/main.js" defer></script>
</head>
<body>
<main id="post-container"></main>
SEO & Security in Web Performance Optimization April 16, 2025 49 / 67
Individual Post Page II
</body>
<script>
const params = new URLSearchParams(
window.location.search);
const id = params.get("id");
fetch(’data/posts.json’)
.then(res => res.json())
.then(posts => {
const post = posts.find(p => p.id === id);
const container = document.getElementById
(’post-container’);
SEO & Security in Web Performance Optimization April 16, 2025 50 / 67
Individual Post Page III
container.innerHTML = ‘<h1>${post.title}
</h1>
<p><em>${post.author},
${post.date}</em></p>
<p>${post.content}</p>‘;
const jsonLd = {
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": post.title,
"author": {
"@type": "Person",
SEO & Security in Web Performance Optimization April 16, 2025 51 / 67
Individual Post Page IV
"name": post.author
},
"datePublished": post.date,
"mainEntityOfPage": {
"@type": "WebPage",
"@id": window.location.href
}
};
const script = document.createElement
(’script’);
script.type = ’application/ld+json’;
SEO & Security in Web Performance Optimization April 16, 2025 52 / 67
Individual Post Page V
script.textContent = JSON.stringify
(jsonLd);
document.head.appendChild(script);
});
</script>
</html>
SEO & Security in Web Performance Optimization April 16, 2025 53 / 67
Deploy to GitHub Pages I
Deploy to GitHub Pages
1. Create a GitHub Repository
Name it something like seo-blog-demo
Clone it locally or upload your folder
contents.
2. Push the Project
git init
git remote add origin https://github.com/
yourusername/seo-blog-demo.git
SEO & Security in Web Performance Optimization April 16, 2025 54 / 67
Deploy to GitHub Pages II
git add .
git commit -m "Initial blog commit"
git push -u origin master
3. Enable GitHub Pages
Go to Settings Pages
Choose source: main (or master) branch
Set root folder as / (root)
GitHub will give you a live link like:
https://yourusername.github.io/
seo-blog-demo/
SEO & Security in Web Performance Optimization April 16, 2025 55 / 67
SEO Spam and Black Hat SEO I
SEO Spam involves injecting
malicious or irrelevant content
to manipulate search engines.
Black Hat SEO uses unethical
techniques that violate search
engine guidelines.
SEO & Security in Web Performance Optimization April 16, 2025 56 / 67
SEO Spam and Black Hat SEO II
Both may lead to penalties or
site blacklisting by Google.
SEO & Security in Web Performance Optimization April 16, 2025 57 / 67
Examples of SEO Spam & Black Hat Tactics I
Keyword Stuffing:
Overloading pages with repeated
keywords
Cloaking: Showing different
content to users and search
engines
SEO & Security in Web Performance Optimization April 16, 2025 58 / 67
Examples of SEO Spam & Black Hat Tactics II
Link Farms: Creating fake
backlink networks
Comment/Link Spam:
Posting irrelevant links in
comment sections
SEO & Security in Web Performance Optimization April 16, 2025 59 / 67
Examples of SEO Spam & Black Hat Tactics III
Invisible Text: Hiding
keywords using same-color text
and background
Sneaky Redirects:
Redirecting users to unrelated or
harmful pages
SEO & Security in Web Performance Optimization April 16, 2025 60 / 67
Examples of SEO Spam & Black Hat Tactics IV
Malicious Script Injection:
Inserting harmful links into
vulnerable sites
SEO & Security in Web Performance Optimization April 16, 2025 61 / 67
Consequences of Black Hat SEO I
Search Engine Penalties:
Lower rankings
Deindexing (removal from search results)
Loss of credibility and user trust
Exposure to phishing or malware risks for users
SEO & Security in Web Performance Optimization April 16, 2025 62 / 67
Preventing SEO Spam and Black Hat SEO Attacks I
Use strong CMS security
practices and regular plugin
updates
Avoid buying backlinks or
joining link schemes
CAPTCHA and comment
moderation
SEO & Security in Web Performance Optimization April 16, 2025 63 / 67
Preventing SEO Spam and Black Hat SEO Attacks II
Completely Automated Public Turing test to tell
Computers and Humans Apart
It’s a security mechanism used to verify that the
user is human and not a bot.
Easy for humans & Hard for bots or scripts
Types: Text, Image, reCAPTCHA(Google),math
CAPTCHA
Regular SEO audits and
monitoring tools
SEO & Security in Web Performance Optimization April 16, 2025 64 / 67
Preventing SEO Spam and Black Hat SEO Attacks III
Audit and monitor your site
using:
Google Search Console
Website scanning tools (e.g., Sucuri,
VirusTotal)
Implement security headers and
CAPTCHA protection
SEO & Security in Web Performance Optimization April 16, 2025 65 / 67
Conclusion I
Conclusion
SEO is more than just keywords
– it involves performance and
security
Core Web Vitals are crucial for
modern SEO ranking
SEO & Security in Web Performance Optimization April 16, 2025 66 / 67
Conclusion II
Structured data helps search
engines and users alike
Preventing SEO spam protects
your site’s integrity and
trustworthiness
SEO & Security in Web Performance Optimization April 16, 2025 67 / 67
