Squarespace Performance Optimization: Complete Guide#

1
<!-- Preload critical images -->
2
<link rel="preload" as="image" href="/s/hero-image.jpg" fetchpriority="high" />
3

4
<!-- Optimize hero images -->
5
<img
6
  src="/s/hero-image.jpg?format=webp&width=1920"
7
  alt="Hero Image"
8
  loading="eager"
9
  fetchpriority="high"
10
/>

1
// Auto-optimize images on load
2
document.addEventListener("DOMContentLoaded", function () {
3
  const images = document.querySelectorAll("img[data-src]");
4

5
  const imageObserver = new IntersectionObserver((entries, observer) => {
6
    entries.forEach(entry => {
7
      if (entry.isIntersecting) {
8
        const img = entry.target;
9
        const src = img.dataset.src;
10

11
        // Add WebP support detection
12
        const supportsWebP = (function () {
13
          const canvas = document.createElement("canvas");
14
          return canvas.toDataURL("image/webp").indexOf("webp") !== -1;
15
        })();
16

17
        if (supportsWebP && src.includes("squarespace-cdn.com")) {
18
          img.src = src + "?format=webp";
19
        } else {
20
          img.src = src;
21
        }
22

23
        observer.unobserve(img);
24
      }
25
    });
26
  });
27

28
  images.forEach(img => imageObserver.observe(img));
29
});

1
// Defer non-critical JavaScript
2
function deferScript(src) {
3
  const script = document.createElement("script");
4
  script.src = src;
5
  script.defer = true;
6
  document.head.appendChild(script);
7
}
8

9
// Load analytics after user interaction
10
let analyticsLoaded = false;
11
function loadAnalytics() {
12
  if (!analyticsLoaded) {
13
    deferScript(
14
      "https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
15
    );
16
    analyticsLoaded = true;
17
  }
18
}
19

20
// Trigger on first user interaction
21
["mousedown", "touchstart", "keydown"].forEach(event => {
22
  document.addEventListener(event, loadAnalytics, { once: true });
23
});

1
/* Reserve space for images */
2
.image-container {
3
  aspect-ratio: 16/9;
4
  position: relative;
5
  overflow: hidden;
6
}
7

8
.image-container img {
9
  position: absolute;
10
  top: 0;
11
  left: 0;
12
  width: 100%;
13
  height: 100%;
14
  object-fit: cover;
15
}
16

17
/* Prevent font loading shifts */
18
@font-face {
19
  font-family: "CustomFont";
20
  src: url("/assets/font.woff2") format("woff2");
21
  font-display: swap;
22
}
23

24
/* Reserve space for ads/widgets */
25
.widget-placeholder {
26
  min-height: 250px;
27
  background: #f5f5f5;
28
  display: flex;
29
  align-items: center;
30
  justify-content: center;
31
}

1
<!-- Squarespace responsive image markup -->
2
<img
3
  src="/s/image.jpg?format=1500w"
4
  srcset="
5
    /s/image.jpg?format=300w   300w,
6
    /s/image.jpg?format=500w   500w,
7
    /s/image.jpg?format=750w   750w,
8
    /s/image.jpg?format=1000w 1000w,
9
    /s/image.jpg?format=1500w 1500w
10
  "
11
  sizes="(max-width: 640px) 100vw,
12
            (max-width: 1024px) 50vw,
13
            33vw"
14
  alt="Descriptive alt text"
15
  loading="lazy"
16
/>

1
// WebP detection and implementation
2
class ImageOptimizer {
3
  constructor() {
4
    this.supportsWebP = this.checkWebPSupport();
5
    this.init();
6
  }
7

8
  checkWebPSupport() {
9
    return new Promise(resolve => {
10
      const webP = new Image();
11
      webP.onload = webP.onerror = () => {
12
        resolve(webP.height === 2);
13
      };
14
      webP.src =
15
        "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
16
    });
17
  }
18

19
  async init() {
20
    const supportsWebP = await this.supportsWebP;
21
    this.optimizeImages(supportsWebP);
22
  }
23

24
  optimizeImages(supportsWebP) {
25
    const images = document.querySelectorAll('img[src*="squarespace-cdn.com"]');
26

27
    images.forEach(img => {
28
      const src = img.src;
29
      if (supportsWebP && !src.includes("format=webp")) {
30
        img.src = src + (src.includes("?") ? "&" : "?") + "format=webp";
31
      }
32
    });
33
  }
34
}
35

36
new ImageOptimizer();

1
// Enhanced lazy loading for Squarespace
2
class SquarespaceLazyLoader {
3
  constructor() {
4
    this.imageObserver = new IntersectionObserver(
5
      this.handleImageIntersection.bind(this),
6
      {
7
        rootMargin: "50px 0px",
8
        threshold: 0.01,
9
      }
10
    );
11

12
    this.init();
13
  }
14

15
  init() {
16
    // Target Squarespace image containers
17
    const imageContainers = document.querySelectorAll(
18
      ".sqs-image-container, .gallery-item, .portfolio-item"
19
    );
20

21
    imageContainers.forEach(container => {
22
      this.imageObserver.observe(container);
23
    });
24
  }
25

26
  handleImageIntersection(entries) {
27
    entries.forEach(entry => {
28
      if (entry.isIntersecting) {
29
        this.loadImage(entry.target);
30
        this.imageObserver.unobserve(entry.target);
31
      }
32
    });
33
  }
34

35
  loadImage(container) {
36
    const img = container.querySelector("img");
37
    if (img && img.dataset.src) {
38
      img.src = img.dataset.src;
39
      img.onload = () => {
40
        container.classList.add("loaded");
41
      };
42
    }
43
  }
44
}
45

46
new SquarespaceLazyLoader();

1
<!-- Critical CSS inlining -->
2
<style>
3
  /* Above-the-fold critical styles */
4
  .header,
5
  .nav,
6
  .hero-section {
7
    /* Critical styles here */
8
  }
9

10
  /* Font loading optimization */
11
  @font-face {
12
    font-family: "Primary";
13
    src: url("/assets/font.woff2") format("woff2");
14
    font-display: swap;
15
  }
16
</style>
17

18
<!-- Preload critical resources -->
19
<link rel="preload" href="/assets/critical.css" as="style" />
20
<link
21
  rel="preload"
22
  href="/assets/font.woff2"
23
  as="font"
24
  type="font/woff2"
25
  crossorigin
26
/>
27

28
<!-- DNS prefetch for external resources -->
29
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
30
<link rel="dns-prefetch" href="//www.google-analytics.com" />
31

32
<!-- Preconnect to critical third-parties -->
33
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

1
<!-- Deferred JavaScript loading -->
2
<script>
3
  // Service Worker for caching
4
  if ("serviceWorker" in navigator) {
5
    window.addEventListener("load", () => {
6
      navigator.serviceWorker
7
        .register("/sw.js")
8
        .then(registration => console.log("SW registered"))
9
        .catch(error => console.log("SW registration failed"));
10
    });
11
  }
12

13
  // Performance monitoring
14
  function logPerformanceMetrics() {
15
    if ("performance" in window) {
16
      window.addEventListener("load", () => {
17
        setTimeout(() => {
18
          const perfData = performance.getEntriesByType("navigation")[0];
19
          const metrics = {
20
            DNS: perfData.domainLookupEnd - perfData.domainLookupStart,
21
            TCP: perfData.connectEnd - perfData.connectStart,
22
            TTFB: perfData.responseStart - perfData.requestStart,
23
            Download: perfData.responseEnd - perfData.responseStart,
24
            DOM: perfData.domContentLoadedEventEnd - perfData.responseEnd,
25
          };
26

27
          // Send to analytics
28
          gtag("event", "page_timing", metrics);
29
        }, 0);
30
      });
31
    }
32
  }
33

34
  logPerformanceMetrics();
35
</script>
36

37
<!-- Third-party script optimization -->
38
<script>
39
  // Intersection Observer for ads/widgets
40
  const lazyWidgets = new IntersectionObserver(entries => {
41
    entries.forEach(entry => {
42
      if (entry.isIntersecting) {
43
        const widget = entry.target;
44
        if (widget.dataset.src) {
45
          const script = document.createElement("script");
46
          script.src = widget.dataset.src;
47
          document.head.appendChild(script);
48
          lazyWidgets.unobserve(widget);
49
        }
50
      }
51
    });
52
  });
53

54
  document.querySelectorAll("[data-lazy-widget]").forEach(widget => {
55
    lazyWidgets.observe(widget);
56
  });
57
</script>

1
/* Critical above-the-fold styles */
2
.critical-styles {
3
  /* Header styles */
4
  .header {
5
    position: fixed;
6
    top: 0;
7
    width: 100%;
8
    background: #fff;
9
    z-index: 1000;
10
  }
11

12
  /* Navigation styles */
13
  .nav {
14
    display: flex;
15
    justify-content: space-between;
16
    padding: 1rem;
17
  }
18

19
  /* Hero section */
20
  .hero {
21
    height: 100vh;
22
    display: flex;
23
    align-items: center;
24
    justify-content: center;
25
  }
26
}
27

28
/* Non-critical styles - load async */
29
.non-critical-styles {
30
  /* Footer, sidebar, below-fold content */
31
}

1
<!-- Inline critical CSS -->
2
<style>
3
  /* Critical CSS here */
4
</style>
5

6
<!-- Async load non-critical CSS -->
7
<link
8
  rel="preload"
9
  href="/non-critical.css"
10
  as="style"
11
  onload="this.onload=null;this.rel='stylesheet'"
12
/>
13
<noscript><link rel="stylesheet" href="/non-critical.css" /></noscript>
14

15
<!-- JavaScript fallback for CSS loading -->
16
<script>
17
  function loadCSS(href) {
18
    const link = document.createElement("link");
19
    link.rel = "stylesheet";
20
    link.href = href;
21
    document.head.appendChild(link);
22
  }
23

24
  // Load non-critical CSS after page load
25
  window.addEventListener("load", () => {
26
    loadCSS("/additional-styles.css");
27
  });
28
</script>

1
// Utility for async script loading
2
class ScriptLoader {
3
  static async loadScript(src, options = {}) {
4
    return new Promise((resolve, reject) => {
5
      const script = document.createElement("script");
6
      script.src = src;
7
      script.async = options.async !== false;
8
      script.defer = options.defer || false;
9

10
      script.onload = resolve;
11
      script.onerror = reject;
12

13
      if (options.attributes) {
14
        Object.entries(options.attributes).forEach(([key, value]) => {
15
          script.setAttribute(key, value);
16
        });
17
      }
18

19
      document.head.appendChild(script);
20
    });
21
  }
22

23
  static async loadMultipleScripts(scripts) {
24
    const promises = scripts.map(script => {
25
      if (typeof script === "string") {
26
        return this.loadScript(script);
27
      }
28
      return this.loadScript(script.src, script.options);
29
    });
30

31
    return Promise.all(promises);
32
  }
33
}
34

35
// Usage example
36
const scripts = [
37
  { src: "/analytics.js", options: { defer: true } },
38
  { src: "/widgets.js", options: { async: true } },
39
  "/non-critical.js",
40
];
41

42
ScriptLoader.loadMultipleScripts(scripts)
43
  .then(() => console.log("All scripts loaded"))
44
  .catch(error => console.error("Script loading failed:", error));

1
// Efficient event handling for Squarespace
2
class SquarespaceEvents {
3
  constructor() {
4
    this.init();
5
  }
6

7
  init() {
8
    // Use event delegation for better performance
9
    document.addEventListener("click", this.handleClick.bind(this));
10
    document.addEventListener(
11
      "scroll",
12
      this.throttle(this.handleScroll.bind(this), 16)
13
    );
14

15
    // Intersection Observer for animations
16
    this.setupAnimationObserver();
17
  }
18

19
  handleClick(event) {
20
    const target = event.target;
21

22
    // Handle different click types
23
    if (target.matches(".gallery-item")) {
24
      this.handleGalleryClick(target);
25
    } else if (target.matches(".nav-link")) {
26
      this.handleNavClick(target);
27
    }
28
  }
29

30
  handleScroll() {
31
    // Throttled scroll handling
32
    const scrollY = window.scrollY;
33

34
    // Update header on scroll
35
    if (scrollY > 100) {
36
      document.body.classList.add("scrolled");
37
    } else {
38
      document.body.classList.remove("scrolled");
39
    }
40
  }
41

42
  setupAnimationObserver() {
43
    const animationObserver = new IntersectionObserver(
44
      entries => {
45
        entries.forEach(entry => {
46
          if (entry.isIntersecting) {
47
            entry.target.classList.add("animate-in");
48
          }
49
        });
50
      },
51
      { threshold: 0.1 }
52
    );
53

54
    document.querySelectorAll(".animate-on-scroll").forEach(el => {
55
      animationObserver.observe(el);
56
    });
57
  }
58

59
  throttle(func, limit) {
60
    let inThrottle;
61
    return function () {
62
      const args = arguments;
63
      const context = this;
64
      if (!inThrottle) {
65
        func.apply(context, args);
66
        inThrottle = true;
67
        setTimeout(() => (inThrottle = false), limit);
68
      }
69
    };
70
  }
71
}
72

73
new SquarespaceEvents();

1
// Optimized Google Analytics implementation
2
class OptimizedAnalytics {
3
  constructor(measurementId) {
4
    this.measurementId = measurementId;
5
    this.loaded = false;
6
    this.queue = [];
7
    this.init();
8
  }
9

10
  init() {
11
    // Load analytics on user interaction
12
    this.loadOnInteraction();
13

14
    // Fallback: load after 3 seconds
15
    setTimeout(() => {
16
      if (!this.loaded) {
17
        this.loadAnalytics();
18
      }
19
    }, 3000);
20
  }
21

22
  loadOnInteraction() {
23
    const events = ["mousedown", "touchstart", "keydown", "scroll"];
24
    const loadAnalytics = () => {
25
      this.loadAnalytics();
26
      events.forEach(event => {
27
        document.removeEventListener(event, loadAnalytics);
28
      });
29
    };
30

31
    events.forEach(event => {
32
      document.addEventListener(event, loadAnalytics, { once: true });
33
    });
34
  }
35

36
  loadAnalytics() {
37
    if (this.loaded) return;
38

39
    // Load gtag script
40
    const script = document.createElement("script");
41
    script.async = true;
42
    script.src = `https://www.googletagmanager.com/gtag/js?id=${this.measurementId}`;
43
    document.head.appendChild(script);
44

45
    // Initialize gtag
46
    window.dataLayer = window.dataLayer || [];
47
    window.gtag = function () {
48
      dataLayer.push(arguments);
49
    };
50

51
    gtag("js", new Date());
52
    gtag("config", this.measurementId, {
53
      page_title: document.title,
54
      page_location: window.location.href,
55
    });
56

57
    // Process queued events
58
    this.queue.forEach(event => gtag(...event));
59
    this.queue = [];
60
    this.loaded = true;
61
  }
62

63
  track(...args) {
64
    if (this.loaded) {
65
      gtag(...args);
66
    } else {
67
      this.queue.push(args);
68
    }
69
  }
70
}
71

72
// Usage
73
const analytics = new OptimizedAnalytics("GA_MEASUREMENT_ID");
74

75
// Track events
76
analytics.track("event", "page_view");
77
analytics.track("event", "click", {
78
  event_category: "engagement",
79
  event_label: "header_logo",
80
});

1
// Lazy load social media widgets
2
class SocialWidgetLoader {
3
  constructor() {
4
    this.widgets = new Map();
5
    this.init();
6
  }
7

8
  init() {
9
    this.setupObserver();
10
    this.registerWidgets();
11
  }
12

13
  registerWidgets() {
14
    // Facebook
15
    this.widgets.set("facebook", {
16
      script: "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0",
17
      init: () => window.FB && FB.XFBML.parse(),
18
    });
19

20
    // Twitter
21
    this.widgets.set("twitter", {
22
      script: "https://platform.twitter.com/widgets.js",
23
      init: () => window.twttr && twttr.widgets.load(),
24
    });
25

26
    // Instagram
27
    this.widgets.set("instagram", {
28
      script: "https://www.instagram.com/embed.js",
29
      init: () => window.instgrm && instgrm.Embeds.process(),
30
    });
31
  }
32

33
  setupObserver() {
34
    const observer = new IntersectionObserver(entries => {
35
      entries.forEach(entry => {
36
        if (entry.isIntersecting) {
37
          const widget = entry.target;
38
          const type = widget.dataset.widget;
39

40
          if (this.widgets.has(type)) {
41
            this.loadWidget(type);
42
            observer.unobserve(widget);
43
          }
44
        }
45
      });
46
    });
47

48
    document.querySelectorAll("[data-widget]").forEach(widget => {
49
      observer.observe(widget);
50
    });
51
  }
52

53
  async loadWidget(type) {
54
    const widget = this.widgets.get(type);
55

56
    try {
57
      await this.loadScript(widget.script);
58
      widget.init();
59
    } catch (error) {
60
      console.error(`Failed to load ${type} widget:`, error);
61
    }
62
  }
63

64
  loadScript(src) {
65
    return new Promise((resolve, reject) => {
66
      if (document.querySelector(`script[src="${src}"]`)) {
67
        resolve();
68
        return;
69
      }
70

71
      const script = document.createElement("script");
72
      script.src = src;
73
      script.async = true;
74
      script.onload = resolve;
75
      script.onerror = reject;
76
      document.head.appendChild(script);
77
    });
78
  }
79
}
80

81
new SocialWidgetLoader();

1
// sw.js - Service Worker for Squarespace sites
2
const CACHE_NAME = "squarespace-v1";
3
const STATIC_CACHE = "static-v1";
4
const DYNAMIC_CACHE = "dynamic-v1";
5

6
const STATIC_ASSETS = [
7
  "/",
8
  "/assets/main.css",
9
  "/assets/fonts/primary.woff2",
10
  "/favicon.ico",
11
];
12

13
// Install event
14
self.addEventListener("install", event => {
15
  event.waitUntil(
16
    caches
17
      .open(STATIC_CACHE)
18
      .then(cache => cache.addAll(STATIC_ASSETS))
19
      .then(() => self.skipWaiting())
20
  );
21
});
22

23
// Activate event
24
self.addEventListener("activate", event => {
25
  event.waitUntil(
26
    caches
27
      .keys()
28
      .then(cacheNames => {
29
        return Promise.all(
30
          cacheNames
31
            .filter(
32
              cacheName =>
33
                cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE
34
            )
35
            .map(cacheName => caches.delete(cacheName))
36
        );
37
      })
38
      .then(() => self.clients.claim())
39
  );
40
});
41

42
// Fetch event
43
self.addEventListener("fetch", event => {
44
  const { request } = event;
45

46
  // Cache strategy based on request type
47
  if (request.destination === "image") {
48
    event.respondWith(cacheFirstStrategy(request, DYNAMIC_CACHE));
49
  } else if (request.url.includes("/s/")) {
50
    // Squarespace assets
51
    event.respondWith(cacheFirstStrategy(request, STATIC_CACHE));
52
  } else {
53
    event.respondWith(networkFirstStrategy(request, DYNAMIC_CACHE));
54
  }
55
});
56

57
// Cache strategies
58
async function cacheFirstStrategy(request, cacheName) {
59
  const cachedResponse = await caches.match(request);
60
  if (cachedResponse) return cachedResponse;
61

62
  try {
63
    const networkResponse = await fetch(request);
64
    const cache = await caches.open(cacheName);
65
    cache.put(request, networkResponse.clone());
66
    return networkResponse;
67
  } catch (error) {
68
    console.error("Cache first strategy failed:", error);
69
    return new Response("Offline", { status: 503 });
70
  }
71
}
72

73
async function networkFirstStrategy(request, cacheName) {
74
  try {
75
    const networkResponse = await fetch(request);
76
    const cache = await caches.open(cacheName);
77
    cache.put(request, networkResponse.clone());
78
    return networkResponse;
79
  } catch (error) {
80
    const cachedResponse = await caches.match(request);
81
    return cachedResponse || new Response("Offline", { status: 503 });
82
  }
83
}

1
// Cache management for Squarespace
2
class SquarespaceCache {
3
  constructor() {
4
    this.cacheName = "squarespace-cache-v1";
5
    this.maxAge = 24 * 60 * 60 * 1000; // 24 hours
6
    this.init();
7
  }
8

9
  async init() {
10
    if ("caches" in window) {
11
      await this.setupCache();
12
      this.preloadCriticalResources();
13
    }
14
  }
15

16
  async setupCache() {
17
    this.cache = await caches.open(this.cacheName);
18
  }
19

20
  async preloadCriticalResources() {
21
    const criticalResources = [
22
      "/universal/styles-compressed/base-5b5089ad71-min.css",
23
      "/universal/scripts-compressed/compatibility-cbe4ef5eb5-min.js",
24
      window.location.pathname,
25
    ];
26

27
    try {
28
      await this.cache.addAll(criticalResources);
29
      console.log("Critical resources cached");
30
    } catch (error) {
31
      console.error("Failed to cache critical resources:", error);
32
    }
33
  }
34

35
  async cacheResource(url) {
36
    try {
37
      const response = await fetch(url);
38
      if (response.ok) {
39
        await this.cache.put(url, response.clone());
40
      }
41
      return response;
42
    } catch (error) {
43
      // Try to serve from cache
44
      const cachedResponse = await this.cache.match(url);
45
      return cachedResponse || Promise.reject(error);
46
    }
47
  }
48

49
  async cleanExpiredCache() {
50
    const requests = await this.cache.keys();
51
    const now = Date.now();
52

53
    for (const request of requests) {
54
      const response = await this.cache.match(request);
55
      const dateHeader = response.headers.get("date");
56

57
      if (dateHeader) {
58
        const responseDate = new Date(dateHeader).getTime();
59
        if (now - responseDate > this.maxAge) {
60
          await this.cache.delete(request);
61
        }
62
      }
63
    }
64
  }
65
}
66

67
const cacheManager = new SquarespaceCache();
68

69
// Clean cache periodically
70
setInterval(
71
  () => {
72
    cacheManager.cleanExpiredCache();
73
  },
74
  60 * 60 * 1000
75
); // Every hour

1
// Core Web Vitals monitoring for Squarespace
2
class CoreWebVitalsTracker {
3
  constructor() {
4
    this.vitals = {};
5
    this.init();
6
  }
7

8
  async init() {
9
    // Load web-vitals library
10
    const { getCLS, getFID, getFCP, getLCP, getTTFB } = await import(
11
      "https://unpkg.com/web-vitals@3/dist/web-vitals.js"
12
    );
13

14
    // Track each metric
15
    getCLS(this.handleCLS.bind(this));
16
    getFID(this.handleFID.bind(this));
17
    getFCP(this.handleFCP.bind(this));
18
    getLCP(this.handleLCP.bind(this));
19
    getTTFB(this.handleTTFB.bind(this));
20
  }
21

22
  handleCLS(metric) {
23
    this.vitals.cls = metric.value;
24
    this.sendMetric("CLS", metric.value);
25
  }
26

27
  handleFID(metric) {
28
    this.vitals.fid = metric.value;
29
    this.sendMetric("FID", metric.value);
30
  }
31

32
  handleFCP(metric) {
33
    this.vitals.fcp = metric.value;
34
    this.sendMetric("FCP", metric.value);
35
  }
36

37
  handleLCP(metric) {
38
    this.vitals.lcp = metric.value;
39
    this.sendMetric("LCP", metric.value);
40
  }
41

42
  handleTTFB(metric) {
43
    this.vitals.ttfb = metric.value;
44
    this.sendMetric("TTFB", metric.value);
45
  }
46

47
  sendMetric(name, value) {
48
    // Send to Google Analytics
49
    if (typeof gtag !== "undefined") {
50
      gtag("event", name, {
51
        event_category: "Web Vitals",
52
        value: Math.round(value),
53
        metric_value: value,
54
        metric_delta: value,
55
        non_interaction: true,
56
      });
57
    }
58

59
    // Send to custom analytics endpoint
60
    this.sendToCustomAnalytics(name, value);
61
  }
62

63
  async sendToCustomAnalytics(name, value) {
64
    try {
65
      await fetch("/api/analytics/vitals", {
66
        method: "POST",
67
        headers: {
68
          "Content-Type": "application/json",
69
        },
70
        body: JSON.stringify({
71
          metric: name,
72
          value: value,
73
          url: window.location.href,
74
          timestamp: Date.now(),
75
        }),
76
      });
77
    } catch (error) {
78
      console.error("Failed to send custom analytics:", error);
79
    }
80
  }
81

82
  getVitalsReport() {
83
    return this.vitals;
84
  }
85
}
86

87
const vitalsTracker = new CoreWebVitalsTracker();

1
// Performance budget monitoring
2
class PerformanceBudget {
3
  constructor() {
4
    this.budgets = {
5
      totalSize: 2 * 1024 * 1024, // 2MB
6
      imageSize: 1 * 1024 * 1024, // 1MB
7
      jsSize: 500 * 1024, // 500KB
8
      cssSize: 100 * 1024, // 100KB
9
      fontSize: 100 * 1024, // 100KB
10
      lcp: 2500, // 2.5s
11
      fid: 100, // 100ms
12
      cls: 0.1, // 0.1
13
    };
14

15
    this.init();
16
  }
17

18
  async init() {
19
    await this.checkResourceBudgets();
20
    this.setupPerformanceObserver();
21
  }
22

23
  async checkResourceBudgets() {
24
    if (!("performance" in window)) return;
25

26
    const resources = performance.getEntriesByType("resource");
27
    const budgetReport = {
28
      totalSize: 0,
29
      imageSize: 0,
30
      jsSize: 0,
31
      cssSize: 0,
32
      fontSize: 0,
33
      violations: [],
34
    };
35

36
    resources.forEach(resource => {
37
      const size = resource.transferSize || 0;
38
      budgetReport.totalSize += size;
39

40
      if (resource.initiatorType === "img") {
41
        budgetReport.imageSize += size;
42
      } else if (resource.name.includes(".js")) {
43
        budgetReport.jsSize += size;
44
      } else if (resource.name.includes(".css")) {
45
        budgetReport.cssSize += size;
46
      } else if (resource.name.includes(".woff")) {
47
        budgetReport.fontSize += size;
48
      }
49
    });
50

51
    // Check violations
52
    Object.keys(this.budgets).forEach(budget => {
53
      if (budgetReport[budget] > this.budgets[budget]) {
54
        budgetReport.violations.push({
55
          type: budget,
56
          actual: budgetReport[budget],
57
          budget: this.budgets[budget],
58
          overage: budgetReport[budget] - this.budgets[budget],
59
        });
60
      }
61
    });
62

63
    if (budgetReport.violations.length > 0) {
64
      console.warn("Performance budget violations:", budgetReport.violations);
65
      this.reportViolations(budgetReport.violations);
66
    }
67
  }
68

69
  setupPerformanceObserver() {
70
    if ("PerformanceObserver" in window) {
71
      const observer = new PerformanceObserver(list => {
72
        list.getEntries().forEach(entry => {
73
          if (entry.entryType === "largest-contentful-paint") {
74
            if (entry.startTime > this.budgets.lcp) {
75
              this.reportViolation("LCP", entry.startTime, this.budgets.lcp);
76
            }
77
          }
78
        });
79
      });
80

81
      observer.observe({ entryTypes: ["largest-contentful-paint"] });
82
    }
83
  }
84

85
  reportViolation(type, actual, budget) {
86
    console.warn(`Performance budget violation: ${type}`, {
87
      actual,
88
      budget,
89
      overage: actual - budget,
90
    });
91

92
    // Send to analytics
93
    if (typeof gtag !== "undefined") {
94
      gtag("event", "performance_budget_violation", {
95
        event_category: "Performance",
96
        violation_type: type,
97
        actual_value: actual,
98
        budget_value: budget,
99
      });
100
    }
101
  }
102

103
  reportViolations(violations) {
104
    violations.forEach(violation => {
105
      this.reportViolation(violation.type, violation.actual, violation.budget);
106
    });
107
  }
108
}
109

110
new PerformanceBudget();