Performance: Theme from scratch setup
HIGH IMPACT
This affects the initial page load speed and rendering performance by controlling how much code and assets are loaded and how efficiently the theme renders content.
0
0
Theme from scratch setup in Wordpress - Performance & Optimization
Setting up a WordPress theme from scratch for fast loading
Wordpress
<?php
// functions.php
function theme_scripts() {
if (is_single()) {
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array(), null, true);
}
wp_enqueue_style('style', get_stylesheet_uri(), array(), null, 'all');
}
add_action('wp_enqueue_scripts', 'theme_scripts');
// header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
<main>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; endif; ?>
<?php the_posts_pagination(); ?>
</main>
<?php wp_footer(); ?>
</body>
</html>Loads scripts only when needed, uses excerpts and pagination to reduce DOM size, and includes responsive meta tags for faster rendering.
📈 Performance GainSaves ~80kb JS, reduces DOM nodes by 50%, cuts blocking time by 100+ ms, improves LCP significantly
Setting up a WordPress theme from scratch for fast loading
Wordpress
<?php
// functions.php
function theme_scripts() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script('jquery');
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_scripts');
// header.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
<main>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php endwhile; endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>Loads jQuery unnecessarily on every page, includes unoptimized scripts and styles, and renders all posts without pagination, causing large DOM and slow LCP.
📉 Performance CostAdds ~100kb of unused JS, triggers multiple reflows due to large DOM, blocks rendering for 200+ ms on slow connections
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Loads all scripts and full content on every page | High (many nodes) | Multiple reflows | High paint cost | [X] Bad |
| Loads scripts conditionally and uses excerpts with pagination | Medium (fewer nodes) | Single reflow | Lower paint cost | [OK] Good |
Rendering Pipeline
The theme setup controls how HTML, CSS, and JS are loaded and structured, affecting style calculation, layout, paint, and composite stages in the browser.
→Style Calculation
→Layout
→Paint
→Composite
⚠️ BottleneckLayout due to large DOM and blocking scripts
Core Web Vital Affected
LCP
This affects the initial page load speed and rendering performance by controlling how much code and assets are loaded and how efficiently the theme renders content.
Optimization Tips
1Load only necessary scripts and styles on each page.
2Use excerpts and pagination to keep DOM size small.
3Include responsive meta tags and minimal HTML structure.
Performance Quiz - 3 Questions
Test your performance knowledge
What is a key performance benefit of loading scripts conditionally in a WordPress theme?
DevTools: Performance
How to check: Open DevTools > Performance tab, record page load, then analyze Main thread for scripting and rendering times and check Largest Contentful Paint marker.
What to look for: Look for long scripting tasks, multiple reflows/layout shifts, and the timing of LCP to confirm efficient theme setup.