Remove WordPress child themes for mobile speed.

Updated: July 2018
scapel

WordPress released core version 4.7 in early December 2016. The default Twenty Seventeen theme included a new Customizer CSS editor. The new editor allows the removal of child themes and related plugins. This helps your site load a little faster – every little bit counts.

Before then, using child themes added custom code to WordPress themes. You edited CSS in a child theme with the WordPress file editor. It protected custom code from being overwritten by theme updates. Without a child theme, updating caused loss of code changes.

Since WordPress 4.7, the option to add custom CSS is in the WordPress Customizer. You can then remove child themes. But you can’t edit PHP or JavaScript files – only CSS.

The custom CSS editor is in Appearance > Customize. Then select the “Additional CSS” option from the Customizer menu. That opens up a live CSS editor — no refreshing. Preview your changes immediately as you type. The live preview feature speeds up web work. There’s no waiting for page refreshes to view each change.

The “Additional CSS” menu keeps the edits safe in the confines of the Customizer. Your changes aren’t seen by users until you press Save and Publish. You can only edit CSS (not PHP or JS).

Child themes allow JS and PHP modification. So this doesn’t mean the extinction of child themes. But for most, it’s an opportunity to squeek out a little more speed. We do extreme performance optimization. We favor using the Customizer over a child theme.

“Additional CSS” is inlined before the closing head tag. This means no extra HTTP requests to fetch the custom CSS. Inlining CSS into HTML header removes CSS render-blocking. It also eliminates an extra HTTP request — both great things for speed. “Additional CSS” also does code syntax highlighting and error checking. Nice.

A child theme requires an extra HTTP request – unless combining by concatenation. Read more about minification plugins.

“Additional CSS” isn’t cached. It’s downloaded, processed, and rendered by the browser with every page load. This sounds inefficient. But for small amounts of CSS, it’s negligible speed difference. A few dozen – or even a hundred lines – of CSS loads fast inlined. Even Google recommends inlining CSS. No need calling an external style sheet when CSS code is small.

“If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.” – Google

From our past experiments with hand-coded sites, we agree with Google. This technique produces the fastest loading pages. Eliminating a child theme – by inlining custom CSS – produces a small boost in mobile site performance.

So, theme updates won’t wash away custom CSS – but that’s true only up to a point. If you change your theme (rather than just updating the theme), all the code added in the “Additional CSS” area disappears. Then it’ll all be gone.

Tom Usborne, the developer at GeneratePress, has a free plugin called “Simple CSS.” It’s a nice CSS editor – complete with code syntax highlighting to help you. It keeps all additional CSS safe from any theme updates and replacements. It works with all themes but Simple CSS is included as a standard feature with GeneratePress premium theme. With this plugin, you can also apply CSS only to one specific page. Navigate to your page or post in the Dashboard and look for the “Simple CSS” metabox.

NOTE: Don’t confuse this GerneratePress’ plugin offering with Simple Custom CSS plugin: 300,000+ active installs, 204k zip file, all-time downloads: 1,336,559, retention rate: 22 percent (average).

★★★★★
Simple CSS
Active installs: 70,000+
Zip file size: 136k
All-time downloads: 154,782
Retention rate: 45 percent (very high)

And it also opens up a new area in the Customizer where you can view your CSS changes live. This code saved by the plugin doesn’t disappear if the theme is changed.

Site owners can stop using child themes. Opportunities for CSS customization is in WordPress core.


Need to preserve your WordPress functions.php file changes besides the style.css file, here’s our tip use:

Code Snippets
Add code snippets to your site. No need to edit your theme’s functions.php file again!

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"You helped me see a whole different side of WordPress. Thanks for all the great information you provide for free. I kind of feel like I found a diamond in the sea." AwesomeDetect Nepal

by - Suresh Thagunna

How expressive and classic design aesthetic affect mobile speed.
Future-proof your web business with mobile-first speed to avoid traffic decline.