IWT Unit 6: Website Testing, Optimization & Deployment

Internet & Web Technologies · Unit 6

Unit 6 — Website Testing, Performance Optimization & Deployment

1. Introduction to Website Testing & Quality Assurance

Building an interactive web application is only half the engineering lifecycle. Website Testing systematically evaluates a website to ensure that it functions correctly, displays consistently across diverse client environments, remains secure, and delivers an optimal user experience.

1.1 Types of Web Testing

Testing Type	Focus & Objective	Common Scenarios Tested
Functional Testing	Verifying that features, forms, and business logic operate as specified.	Submitting forms, validating input constraints, navigation link checks, search functionality.
UI / Usability Testing	Assessing visual hierarchy, readability, and ease of task completion.	Navigation clarity, color contrast compliance (WCAG), button feedback states.
Responsive Testing	Verifying layout integrity across multiple screen resolutions and orientations.	Testing layout at $375\text{px}$ (mobile), $768\text{px}$ (tablet), and $1440\text{px}$ (desktop).
Cross-Browser Testing	Ensuring uniform appearance and behavior across disparate browser engines.	Testing on Google Chrome (Blink), Mozilla Firefox (Gecko), Apple Safari (WebKit).
Performance Testing	Measuring load speeds, page weight, memory footprint, and network latency.	Lighthouse audits, Time to First Byte (TTFB), Largest Contentful Paint (LCP).
Security Testing	Identifying vulnerabilities in data transmission and input processing.	HTTPS SSL/TLS verification, XSS (Cross-Site Scripting) prevention, form protection.

2. Cross-Browser Compatibility Testing

Different browsers rely on different rendering engines:

Blink: Google Chrome, Microsoft Edge, Brave, Opera.
Gecko: Mozilla Firefox.
WebKit: Apple Safari (iOS and macOS).

Because browser vendors implement newly emerging CSS specifications and JavaScript APIs at differing paces, websites can exhibit layout bugs, missing fonts, or broken interactions if not tested across engines.

2.1 Causes of Cross-Browser Inconsistencies

Vendor Engine Differences: Varying default user-agent stylesheets (e.g., default form input padding or select dropdown arrows).
Unsupported Modern CSS/JS Features: Older browsers lacking support for modern features (e.g., CSS Subgrid, :has() selector, or ES6+ syntax).
OS-Level Font Rendering: Typography antialiasing differences between Windows (DirectWrite), macOS (Core Text), and Linux (FreeType).

2.2 Compatibility Solutions

CSS Reset / Normalize (Reboot): Leveling default margins, line heights, and borders before applying custom styles.

Vendor Prefixes (Autoprefixer): Adding experimental engine prefixes:

-webkit-transform: rotate(45deg); /* Chrome, Safari, newer Edge */
-moz-transform: rotate(45deg);    /* Firefox */
-ms-transform: rotate(45deg);     /* Internet Explorer */
transform: rotate(45deg);         /* Standard W3C Specification */

Feature Queries (@supports): Applying styles conditionally only when the user's browser supports that CSS feature:
```
@supports (display: grid) {
  .gallery { display: grid; }
}
```
Polyfills: JavaScript libraries that inject missing browser capabilities into older engines (e.g., polyfills for fetch or IntersectionObserver).

3. Browser Developer Tools Debugging Techniques

Browser DevTools (accessible via F12) provide indispensable real-time diagnostic utilities:

3.1 Debugging in the Sources Panel

Instead of scattering temporary console.log() statements throughout your code, modern web engineers leverage the Sources debugger:

Line-of-Code Breakpoints: Click on a code line number in the Sources panel. When the browser executes that line, execution pauses, allowing you to inspect active variables in the Scope pane.
Conditional Breakpoints: Breakpoints that only pause execution when a specified expression evaluates to true (e.g., studentId === null).
Step Controls:
- Step Over (F10): Advances to the next line without stepping inside function calls.
- Step Into (F11): Follows execution inside the invoked function.
- Step Out (Shift+F11): Executes the remainder of the current function and returns to the caller.
DOM Breakpoints: Right-click a DOM node in the Elements panel and select Break on $\rightarrow$ Subtree modifications or Attribute modifications to find the exact JavaScript responsible for mutating an element.

3.2 Network Waterfall Analysis

The Network panel records every HTTP transaction:

Status Codes: Spot failing requests immediately (red 404 Not Found or 500 Server Error).
Timing Breakdown: Analyze DNS Lookup, Initial Connection (TCP), SSL Handshake, Waiting for Server Response (TTFB), and Content Download.
Network Throttling: Test page loading under simulated slow connections (e.g., "Slow 3G") to observe fallback behaviors.

4. W3C Standards Validation

The World Wide Web Consortium (W3C) publishes official international standards for HTML and CSS. Writing standards-compliant markup ensures predictable browser rendering, accessibility, and robust search engine indexing.

4.1 Official W3C Validation Tools

W3C Markup Validation Service: `https://validator.w3.org/` checks HTML documents for syntax errors, unclosed tags, duplicate IDs, missing alt attributes, and invalid element nesting.
W3C CSS Validation Service: `https://jigsaw.w3.org/css-validator/` checks stylesheets for vendor syntax errors, invalid color values, and unsupported properties.

4.2 Benefits of Validating Markup

Debugging Efficiency: A subtle missing closing </div> or unquoted attribute can destabilize an entire layout. Validators pinpoint exact line and column numbers.
Consistent Cross-Engine Rendering: Standards-mode rendering depends on valid doctype and syntax; invalid markup triggers Quirks Mode or error-correction algorithms that differ across engines.
SEO & Crawlability: Search engine crawlers can index clean, well-formed HTML much more efficiently than malformed documents.

5. Website Performance Optimization

A fast website improves user retention, lowers bounce rates, and boosts Google search ranking. Studies demonstrate that a 1-second delay in page load time decreases conversions by up to 7%.

5.1 Google Core Web Vitals

Google evaluates real-world user experience using three core metrics:

+-------------------------------------------------------------------------+
|                         CORE WEB VITALS METRICS                         |
|                                                                         |
|  1. LCP (Largest Contentful Paint)   -> Loading Speed    (Target: < 2.5s)|
|  2. INP (Interaction to Next Paint)   -> Responsiveness   (Target: < 200ms)|
|  3. CLS (Cumulative Layout Shift)    -> Visual Stability (Target: < 0.1) |
+-------------------------------------------------------------------------+

LCP (Largest Contentful Paint): Measures perceived loading speed. Marks when the main content (hero image or primary heading) has rendered. Good: $< 2.5\text{s}$ .
INP (Interaction to Next Paint): Measures user responsiveness. How quickly the page responds to clicks, taps, and keyboard input. Good: $< 200\text{ms}$ .
CLS (Cumulative Layout Shift): Measures visual stability. Prevents unexpected layout jumps while images, ads, or fonts load asynchronously. Good: $$< 0.1$$ .

5.2 Image & Media Optimization Techniques

Images typically account for 60% to 70% of total page weight:

Modern Formats: Convert legacy JPEG/PNG files to next-generation formats like WebP (25%–35% smaller file size with equivalent visual quality) or AVIF.
Native Lazy Loading: Add loading="lazy" to off-screen images so they only download when the user scrolls near them:
```
<img src="campus-photo.webp" alt="Campus library" loading="lazy" width="800" height="450">
```
Explicit Dimensions to Prevent Layout Shift: Always include width and height attributes on <img> tags. This enables the browser to reserve the exact aspect ratio box before image bytes arrive, eliminating CLS.

Responsive Images (<picture> & srcset): Serve different image resolutions tailored to the user's viewport:

<picture>
  <source media="(min-width: 1024px)" srcset="banner-large.webp">
  <source media="(min-width: 600px)" srcset="banner-medium.webp">
  <img src="banner-small.webp" alt="Annual College Hackathon">
</picture>

5.3 Asset Minification & Bundling

Minification: Stripping whitespace, comments, line breaks, and shortening variable names from production files (style.min.css, app.min.js), reducing file transfer size by 30% to 50%.
Script Loading Optimization: Preventing parser blocking:
- <script src="app.js">: Blocks HTML parsing while downloading and executing.
- <script async src="app.js">: Downloads in background; executes immediately upon download (order not guaranteed; ideal for independent analytics).
- <script defer src="app.js">: (Best practice) Downloads in background; executes in strict document order only after the HTML DOM is fully parsed.

5.4 Caching & Content Delivery Networks (CDNs)

HTTP Browser Caching: Using Cache-Control: max-age=31536000, immutable headers so returning visitors load static assets (CSS, JS, images) directly from local disk cache in 0ms.
Content Delivery Network (CDN): A distributed network of proxy edge servers geographically positioned around the world (e.g., Cloudflare, jsDelivr, CloudFront). Delivering assets from the server physically closest to the user dramatically reduces network round-trip time (RTT).

6. Static Website Deployment & Maintenance Workflows

6.1 Deployment to GitHub Pages (Step-by-Step)

GitHub Pages provides free static web hosting directly from a GitHub Git repository:

Initialize Git Repository:

git init
git add .
git commit -m "Initial release of StudyDump"

Push to GitHub Remote:

git remote add origin https://github.com/username/studydump.git
git branch -M main
git push -u origin main

Enable GitHub Pages:
- In GitHub repository settings, navigate to Settings $\rightarrow$ Pages.
- Under Build and deployment $\rightarrow$ Source, select Deploy from a branch.
- Select branch main and root folder / (root). Click Save.
- In 1–2 minutes, the live site is published at: https://username.github.io/studydump/.

6.2 Custom Domain Configuration (DNS Integration)

To point a custom domain (e.g., www.studydump.in) to GitHub Pages or Netlify:

In your domain registrar (GoDaddy, Namecheap), navigate to DNS Management.
Apex Domain (studydump.in): Create four A records pointing to GitHub's server IPs:
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
Subdomain (www.studydump.in): Create a CNAME record with Host www and Value username.github.io.
SSL / HTTPS: Enable "Enforce HTTPS" in repository settings for free automatic SSL certificate generation via Let's Encrypt.

6.3 Post-Deployment Maintenance Checklist

Link Rot Monitoring: Periodically run automated broken link checkers to ensure external and internal URLs remain valid.
Lighthouse Audits: Regularly test pages with Chrome Lighthouse to maintain scores above 90 in Performance, Accessibility, Best Practices, and SEO.
Content Synchronization: Whenever new notes or question banks are added, regenerate search indices and manifest via npm run sync.
SSL Certificate Renewal: Verify HTTPS certificates auto-renew before expiry to avoid security warning barriers.

7. Whole-Course Summary & Exam Checklist (Lectures 1–30)

Unit	Core Topics	Key Focus Areas for Exams
Unit 1	Internet Architecture, Client-Server, HTTP, DNS, Hosting	4-layer model, 8-step DNS lookup, HTTP request/response components, hosting comparison.
Unit 2	HTML5 Semantic Layout, Multimedia, Forms, SEO	Semantic tags (`<header>`, `<nav>`, `<article>`), input validation, form attributes, `<audio>`/`<video>`, meta SEO.
Unit 3	UI/UX Principles, Usability, Accessibility, Modern Styles	UCD 5 stages, Hick's Law, Nielsen heuristics, WCAG contrast ratios, Flat vs Minimalist design.
Unit 4	CSS3, Selectors, Box Model, Flexbox, Media Queries	Specificity calculation, `box-sizing: border-box`, Flexbox container vs item properties, `@keyframes`.
Unit 5	Bootstrap 5, 12-Column Grid, Utilities, Components	Grid math (`col-12 col-md-6`), responsive breakpoints, cards, modals, mobile-first design.
Unit 6	Testing, DevTools Debugging, Validation, Optimization	Core Web Vitals, image optimization (`loading="lazy"`, WebP), `<script defer>`, GitHub Pages deployment.