Ich möchte kurz auf die mächtige Funktion vom render_block Filter zurück kommen, um euch eine Erleichterung vorzustellen, die man mit dieser Funktion erreichen kann.
Wenn man eine WordPress Seite programmiert und live geschaltet hat, werden im Frontend alle Blöcke automatisch geladen. Das bedeutet, dass alle Javascript oder zumindest alle css Dateien im Frontend geladen werden. Durch den render_block Filter können wir das einschränken. Wir haben die Möglichkeit, nur die Block-css sowie Block-js Dateien zu laden, die wir auf der Seite nötig haben.
Die Vorbereitung
Ich habe eine klare Struktur der Blocks, die ich in meinen Projekten verwende. Um es euch näher zu bringen, habe ich ein Screenshot der Ordner-Struktur gemacht:
Hierbei habe ich dafür gesorgt, dass die Gutenberg Standard Blocks exakt den selben Ordner Namen bekommen wie den Block Slug. Absatz ist z.B. paragraph und Listen list. Dadurch kann ich diese Blöcke besser im Code steuern. Innerhalb dieser Ordner habe ich folgende Dateistruktur: Als Beispiel der Inhalt des list Ordners:
- block.js
- list.css
- /img/
- li-icon.png
Code
Im Code habe ich zwei essentielle Anpassungen durchgeführt. Zum Ersten habe ich alle Blöcke nur im Backend laden lassen (enqueue_block_editor_assets) und zum Zweiten habe ich den render_block Filter genutzt, um nur die nötigen Block Elemente (js und css) im Frontend zu laden. Ich werde euch als nächstes zeigen, wie ich es realisiert habe. Bitte bedenkt, dass diese Codeschnipsel nur dann funktionieren, wenn ihr die selbe Code-Struktur wie ich benutzt.
foreach (glob(__DIR__ . '/*' , GLOB_ONLYDIR) as $block_path) {
$block_slug = str_replace(__DIR__.'/','',$block_path);
if( file_exists($block_path.'/'.$block_slug.'.php') ){
require_once($block_slug.'/'.$block_slug.'.php');
}elseif (file_exists($block_path.'/block.js')) {
add_action( 'enqueue_block_editor_assets', function() use ($block_slug){
wp_enqueue_script(
$block_slug,
get_template_directory_uri().'/blocks/'.$block_slug.'/block.js',
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'jquery' ),
false,
true
);
wp_enqueue_style(
$block_slug.'-style',
get_template_directory_uri().'/blocks/'.$block_slug.'/'.$block_slug.'.css'
);
});
}
}add_filter( 'render_block', 'front_essential_blockdata', 10, 2 );
function front_essential_blockdata( $block_content, $block ){
if($block['blockName']) $blockname = explode('/',$block['blockName'])[1];
if(!$blockname) return $block_content;
if(!is_admin()) wp_enqueue_script(
$blockname.'-js',
get_template_directory_uri().'/blocks/'.$blockname.'/block.js',
array('jquery','waypoints'),
false,
true
);
if(!is_admin()) wp_enqueue_style(
$blockname.'-style',
get_template_directory_uri().'/blocks/'.$blockname.'/'.$blockname.'.css'
);
return $block_content;
}Fazit
Durch diese Anpassung wurde die Geschwindigkeit meines Blogs durch Google von „langsam“ auf „moderat“ aufgestuft. Ich bin mir sogar sicher, dass man Webseiten, wo viele Blöcke vorhanden sind, von den Größen MB auf KB reduzieren kann, auf vielen Seiten eine Größenreduktion von über 90% stattfinden kann.
