Garbage Collector 2.0

I had to touch some pages to decrease load time for WordPress pages and collect some material to write down. Few articles will be follow to describe the received experience.

the material will be more interesting for programmers who understand code oof WordPress. But some of the issues can be done by accurate people.

The easiest way to lightning page loading in times is followed:

1. reduce number of files to load
2. concatenate scripts to one file
3. concatenate styles to one files if possible
4. compress loaded files
5. caching everything except page content html

and make all of this in engine, without manual changing of files when you will make changing something small

Reduce number of files to load

First you can take a look into page source and try to find what is really necessary for the page. WordPress make adding features too easy and most of the plugin writers do not think about good conditions for add style or script.

If you take a look into conditions for add something by plugin, you can add same condition for style or script added by the plugin. By my experience it can reduce number of unused files a lot. For example for comment or related posts is_singular() conditional remove artifacts from index pages.

Another good way is graphics optimizing. If you take a look into WordPress admin styles you can find that button has backgrounds from the file

but button style is

At least 11 buttons with active and passive images reference to single file.

Another good way to optimize graphics is data: URL. It is very useful in automate change linked icons to data fields in CSS and page content with amazing reduce the total amount of files. I will show the case in followed articles.

Concatenate scripts to one file

WordPress from version 2.8 can concatenate scripts and styles, but unfortunately it is active only for admin. To change it you need:

• use internal WordPress class for show script instead of simple echo '<script ..>'. For script it is
  $wp_scripts = new WP_Scripts();

  where $wp_scripts is global variable.
  Also you can use enveloping with wp_enqueue_script()

• enqueue scripts before scripts including in the wp-head()
  For plugin it is action before or in wp_head with priority up to 8, because wp_print_head_scripts use priority 9.

• Change the WordPress engine core code , because only admin script concatenated by default

By steps in details:

Right script inculding

If you want to receive something like

you have to add into code something like

1. 'theme-script' – unique handler for identification
2. '/wp-content/themes/my-theme/script.js' – path from WordPress root. Usually better use constants or function to get path, but later you will find that this way is only one possible.
3. array('jquery') – another WordPress feature – scripts dependence, from jQuery library in the case. And lib will be included before script by engine without any additional notification
4. '1.1.5' – version of the script – used for cache and manage the scripts lists. Internal scrips WordPress used file date, but is up to you
5. true – in this case place script in the footer. If missed or defined as false – script will be included in the header

I don’t think that the changing is so complicated.

Place for enqueue the script

Theme should add scripts somewhere in the header.php before wp_head();

Plugin should request script including before wp_print_head_scripts what is mean followed:

Please , make the attention for last parameter of add_action – it is priority. And 7 is universal for scripts and styles, because styles printing use 8 and script printing use 9.

After the changes you can find right and accurate scripts printing in the header or footer of your page.
but target is concatenate and gzip all of them.

Concatenation and packing on request

WordPress can do both from version 2.8, but by default it is enabled only for admin’s scripts. If you want to implement this fro all script then you have to put followed changed for script-loader.php ( from WordPress 2.9.2 ) and additional file scripts.php for describe script data. Other WordPress versions can has another line numbers or has another functions. And yes , it is hardcoding in the core WordPress code , please use it carefully. The modification is not dependence from any other changes and scipts will loaded as single links without the changes. In this case you can update version without crashing.

First in the file /wp-includes/script-loader.php

Enable gzip for scripts and styles

And include additional file for custom scripts /wp-content/scripts.php

And remove is_admin dependence.

Next new file /wp-content/scripts.php with content like

In the 3rd line we add dir for custom theme scripts. If you are including another scripts not from /wp-admin/js/ or /wp-includes/js/, then you have to add the dirs additionally. Nested folders will be not required for add.

Next by $scripts->add the script repeat wp_enqueue_script calls, excluding last parameter. If you need include script in the footer then add $scripts->add_data with 'group' and '1'

And same for all script you want to concatenate.

NB: this place override data in wp_enqueue_script calls.

After all of the described changes you can find that scripts loaded by once ( or two if you have header and footer scripts together ) /wp-admin/load-scripts.php request, gzipped and less impact total page loading time.

in the followed articles you can find: styles concatenation, changing small graphics to data:URI and cache control …