Optimization, SEO

Janyl Jumadinova

April 25, 2025

Web Performance Optimization

  • Why performance matters:
    • 40% of users abandon sites that take >3 seconds to load
    • 1 second delay can reduce conversions by 7%
    • Impacts SEO rankings
    • Affects user experience and engagement

Minimizing Load Times

  • File Optimization:
    • Compress and minify CSS/JavaScript
    • Optimize images (WebP, SVG, responsive images)
    • Use modern formats like AVIF and WebP
  • Delivery Optimization:
    • Implement browser caching
    • Use Content Delivery Networks (CDNs)
    • Reduce HTTP requests

Example: CSS/JS Minification

Original CSS (256 bytes):

/* Button styling */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Minified CSS (154 bytes):

.button{background-color:#4CAF50;color:#fff;padding:10px 15px;margin:8px 0;border:none;border-radius:4px;cursor:pointer}

Original JS (237 bytes):

// Toggle menu visibility
function toggleMenu() {
    const menu = document.getElementById('menu');
    if (menu.style.display === 'none') {
        menu.style.display = 'block';
    } else {
        menu.style.display = 'none';
    }
}

Minified JS (120 bytes):

function toggleMenu(){const e=document.getElementById("menu");"none"===e.style.display?e.style.display="block":e.style.display="none"}

Tools for Minification

  • Command line tools:
    • Terser: npx terser script.js -o script.min.js
    • cssnano: npx cssnano styles.css styles.min.css
  • Build tools:
    • Webpack, Parcel, Rollup, Vite
    • Gulp/Grunt tasks
  • Online services:

More Load Time Optimization

  • Critical Rendering Path:
    • Reduce render-blocking resources
    • Inline critical CSS
    • Defer non-essential JavaScript
  • Responsive Design:
    • Mobile-first approach
    • Adaptive images
    • Media queries

Code Example: Lazy Loading

<!-- Basic image lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- With JavaScript -->
<img data-src="image.jpg" class="lazy" alt="Description">
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

SEO Basics

  • Search Engine Optimization: Techniques to increase visibility in search results
  • Why it matters:
    • 68% of online experiences begin with a search engine
    • 75% of users never scroll past the first page of results
    • Organic search drives ~53% of website traffic

On-Page SEO Factors

  • Content optimization:
    • High-quality, relevant content
    • Proper keyword usage
    • Structured content with headers
  • HTML elements:
    • Title tags: <title>Page Title</title>
    • Meta descriptions
    • Image alt text
    • Semantic HTML

Technical SEO

  • Mobile optimization
    • Mobile-friendly design is a ranking factor
    • Responsive design is preferred
  • Site speed
    • Core Web Vitals metrics
    • Lighthouse performance
  • HTTPS
    • Secure sites rank higher
    • Required for modern browser features

Performance Audits

  • Key metrics:
    • LCP (Largest Contentful Paint) - loading
    • FID (First Input Delay) - interactivity
    • CLS (Cumulative Layout Shift) - visual stability
    • TTFB (Time To First Byte) - server response

Performance Audit Tools

  • Google Lighthouse: Comprehensive analysis in Chrome DevTools
  • PageSpeed Insights: Online tool using Lighthouse
  • WebPageTest: Detailed waterfall analysis
  • Chrome DevTools: Performance and Network tabs
  • GTmetrix: Alternative with additional metrics

Google Lighthouse Report

Performance Audit Workflow

  1. Run initial audit to identify baseline metrics
  2. Analyze bottlenecks using waterfall charts
  3. Prioritize issues based on impact
  4. Implement optimizations one at a time
  5. Re-audit to measure improvements
  6. Document before/after metrics

Web Analytics

  • What is web analytics?: Collection, reporting, and analysis of website data
  • Why it matters:
    • Evidence-based decision making
    • Measure impact of optimizations
    • Understand user behavior
    • Track conversions and goals

Key Analytics Metrics

  • Traffic metrics:
    • Sessions, users, pageviews
    • Traffic sources
  • Engagement metrics:
    • Bounce rate
    • Average session duration
    • Pages per session
  • Conversion metrics:
    • Goal completion
    • Conversion rate

Setting Up Google Analytics

  1. Create Google Analytics account
  2. Set up property and data stream
  3. Add tracking code to your website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-MEASUREMENT_ID');
</script>

Using Analytics Data

  • Identify optimization opportunities:
    • High-bounce pages
    • Slow-loading content
  • Content strategy:
    • Most/least popular content
    • Entry and exit pages
  • User journey analysis:
    • Navigation paths
    • Drop-off points

Resources