Working On WordPress Performance
Web Performance is very important but at times it can be very frustrating. WordPress introduces additional complexities to performance analysis and troubleshooting. Performance issues in a WordPress generated page can come from many sources: 1. HTML built into PHP templates 2. HTML generated by a plugin's PHP code 3. Scripts loaded by the current theme 4. Scripts loaded by plugins 5. The way the WordPress accomplishes a task Knowing these differences we'll look at ways to improve the site's performance, how they work with WordPress, and address questions that may or may not be performance-related. Some of these solutions require PHP code to implement and some of them will require additional plugins. ## Number of scripts and their location All plugins that deal with front end code will add one or more scripts and stylesheets. The new stylesheets may cause layout shifts as the new styles to override existing content layout and styles or insert elements into an already loaded DOM. Unless they are coded to put the script in the footer, plugins will place theirs in the header and this will block rendering until all the scripts have been downloaded, parsed, and executed. Deactivating and removing plugins will reduce the number of assets the browser needs to process and download but it may also remove functionality. There are also ways to selectively move plugins scripts to the footer, either when enqueueing the scripts with PHP or later via plugins like [scripts to footer](https://wordpress.org/plugins/scripts-to-footerphp/). Both of these options allow you to keep scripts in the header for those scripts that will error out when place at the end of the page (Automattic's AMP plugin comes to mind). ## Remove Gutenberg Block Styles Even if you're not running Gutenberg blocks, WordPress will still link to block-related stylesheets. To remove them we need dequeue the block stylesheets. It is a two-step process. 1. Define the function that will perform the actual work, in this case, use [wp\_dequeue\_style](https://developer.wordpress.org/reference/functions/wp_dequeue_style/) to remove the stylesheets 2. Create an action that tells WordPress what action to use ([wp\_enqueue\_scripts](https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/)) and what function to use as a callback ```php Edit on Github