CSS-Optimierung: Ganz einfach das CSS above-the-fold finden.

Ja, wir wissen alle, dass wir unser CSS optimieren sollten. Das sog. “Crucial CSS”, also die wichtigsten Klassen, sollten wir inline einbauen, und den Rest der Stylesheets deferen. Aber wie findet man einfach die CSS-Klassen, die above the fold genutzt werden?

Ich werde hier jetzt nicht auf die Vorteile der Nutzung von Inline-CSS für die above-the-fold-Elemente einer Website eingehen. Dazu gibt es bereits genügend Dokumentation im Internet. Und wer meine Beträge liest, weiß eh schon, wozu es gut ist – und sucht nun eine Lösung.

Mit JavaScript ganz einfach CSS-Klassen above the fold finden.

Ich habe ein kleines JavaScript gebastelt, das, basierend auf dem Viewport des aktuell geöffneten Browserfensters, die CSS-Klassen all der Elemente sammelt, die above the fold genutzt werden.

Du kannst dieses JavaScript einfach per Copy/ Paste in die JS-Console deiner Browser-DevTools einfügen und “Enter” drücken. In der Console wird dir ein Array der genutzten Klassen ausgegeben, zeitgleich ehältst Du eine CSV-Datei per Download, in der die Klassen aufgelistet sind.

Vielleicht hilft es dir ja. Und falls du Verbesserungsvorschläge hast: Pack sie mir gerne in die Kommentare.

// Get all elements in the DOM
const elements = document.querySelectorAll('*');

// Get the height of the viewport
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

// Array to store the CSS classes used above the fold
const classesAboveFold = [];

// Iterate through each element and check if it's above the fold
elements.forEach((element) => {
  const rect = element.getBoundingClientRect();
  
  // Check if the element is above the fold
  if (rect.top < viewportHeight) {
    // Get the CSS classes of the element
    const classList = element.classList;
    
    // Add the CSS classes to the array
    classList.forEach((className) => {
      if (!classesAboveFold.includes(className)) {
        classesAboveFold.push(className);
      }
    });
  }
});

// Get the current page's URL
const pageURL = window.location.href;

// Create the CSV content
let csvContent = "data:text/csv;charset=utf-8,";

// Add the CSV header with the page URL
csvContent += `Page URL: ${pageURL}\n\n`;

// Add the CSS classes header
csvContent += "CSS Class\n";

// Add the CSS classes to the CSV content
classesAboveFold.forEach((className) => {
  csvContent += `${className}\n`;
});

// Create a temporary link element
const link = document.createElement('a');
link.href = encodeURI(csvContent);
link.target = '_blank';
link.download = 'classes_above_fold.csv';

// Append the link to the document body
document.body.appendChild(link);

// Trigger the download
link.click();

// Remove the link from the document body
document.body.removeChild(link);
Code-Sprache: JavaScript (javascript)