Kategorien
Code Webentwicklung

Performance steigern für WordPress Child-Themes: Alternative zu @import

Oft findet man beim Thema WordPress Child Themes den Hinweis, dass man die Parent-Theme-CSS-Datei im Childtheme dann mittels @import übernehmen soll, wie z.b. so:

/* Use @import, to borrow the style sheet from the Waipoua parent theme */
@import url('../waipoua/style.css');

Das ist zwar richtig und funktioniert, kann aber durchaus nachteilige Effekte auf das CSS-Rendering und Ladeperformance haben. Schließlich wird erst die Child-Theme-Datei geladen, die stößt den Parent-Download und dann muss das ganze lustig berechnet werden.

Einfacher ist es, wenn man die Parent-Style-Datei entweder komplett kopiert oder direkt im HTML einbindet.

Methode 1: Kopieren des Parent-Styles

Vorteil: Nur eine Style-Datei, nur ein Request, kein Style-Merging: Optimale Performance

Nachteil: Beim Theme-Update müssen Differenzen ggf. mühsam  per Hand übertragen werden.

Methode 2: Einbinden ins HTML statt per @import

Vorteil: Update-Kompatibel, nur geänderte Styles müssen in die Datei, Performance besser als bei @import

Nachteil: Perfomance ist schlechter als eine Kopie des Parents

Mein Senf: Methode 2 gewinnt

Aus meiner Sicht ist die Methode 2 besser geeignet, da hier der Wartungsaufwand bei Theme-Updates gegen 0 tendiert, genau wie bei @import. Aber wie funktioniert das?

Zuerst löscht man die @import-Zeile aus der style.css. Dann fügt man in die functions.php folgendes ein:

add_action('wp_enqueue_scripts', 'add_parent_css');
function add_parent_css() {
	wp_enqueue_style('waipoua_main', get_template_directory_uri() . '/style.css', false, '');
	wp_enqueue_style('waipoua_child', get_stylesheet_uri(), 'waipoua_main' );
}

Hier passiert folgendes: Mit get_template_directory_uri() bekommt man das Verzeichnis des Parent-Themes, während man mit get_stylesheet_uri() die Stylesheet-URL des aktiven (in diesem Fall des Child-) Themes bekommt.

Die Namen für die Stylesheets (“waipoua_main” und “waipoua_child”) sind in diesem Fall der Umgebung bei Develovers.de geschuldet, die könnt ihr nennen wie ihr wollt.

Schon meckern Perfomance-Tools evtl. nur noch die Einbindung mehrerer Stylesheets an, aber nicht mehr die Verwendung von @import.

Von Chris Jung

Ich bin Entwickler bei basecom und erstelle nebenberuflich kleine Websites für kleine Unternehmen und Privatpersonen. Ich bin Open Source Fan und Blogger.

Portfolio . twitter . github