High Speed: Really Accelerate WordPress Websites [#4]
WordPress Websites Really Fast: the Idea Behind Today’s Article
This causes the website to load rapidly. With this type of data treatment, the landing page will load extremely fast, and the subpages will become as fast as the integrated media and ad blocks allow them to. However, the visible area of the subpages will load in the blink of an eye, giving the visitor the impression of an extremely fast website, even though it might take a second or two for the subpage, meaning the individual article, to load.
Which Files are Loaded Where?
It is very important for you to find out which CSS files are needed where. By default, CSS is loaded on all pages. As that is complete nonsense, you need to find out where the stylesheets are truly needed, in order to accelerate your website. For example, the CSS of a contact form is only needed on the contact page. CSS, which is required to display image galleries is either needed on a special gallery page, or on each single article with a gallery in it.
Thus, note carefully where each file is necessary. Because we’ll only integrate them where they are needed.
External CSS vs Directly Implementing CSS in the HTML
For my website Democratic Post I’ve found out that the direct implementation of the CSS into the source code slows down my website more than when I integrate an optimized and correctly versioned file. However, this can be different for your website, so you should simply test both variants.
However, the parameter is always critisized as a problem for effective caching by speed test tools like Pingdom, because the static content of URLs with parameters is not always stored in the cache, but has to be obtained from the server every time. We’ll avoid this problem later on, with a correct versioning. But first, we’ll remove the query strings from the files. Enter the following code in your theme’s functions.php:
As we want to manually move the CSS to the right spots, so that the loading time can benefit from that, we first need to free all CSS files from the automatic loading via WordPress. After we’ve done that, your theme shouldn’t load any CSS files anymore. For that, we need to trick a bit, as we need to find out its ID in order to remove a stylesheet. Under certain circumstances, you even need to search the IDs in the plugin files.
Afterwards, we need a code snippet that removes all CSS files. However, the first snippet doesn’t work on all files, which is why I added snippet version B. One of the two will definitely remove the CSS. First, try version A and then, if it doesn’t work, try version B.
These snippets also belong into the theme’s functions.php or into the custom site plugin.
For this, there may be different solutions, some of which might be more comfortable. However, I chose this solution, because I can determine exactly when I want the files to load due to the manual integration of the CSS files.
What You Need File Versions for
Correct versioning of static files is necessary for optimal caching of resources. This way, we can make sure that the file is, for one, only loaded on the first page visit, and also, that when a file is changed, the new version is instantly loaded as it has a new file name now. Once we’re done, the files in the HTML source code will look as follows:
Part 1: The Code for the functions.php
Part 2: The Code for the .htaccess File
The .htaccess file that is located in the WordPress root index, has to be adjusted. Please make a backup of the file before adjusting! Afterward, the WordPress area is replaced by the following.
Part 3: Manually Compressing All CSS Files
As this task can not be done using a caching plugin, we need to do it ourselves. Please make backups of each file before you start this process. Having done that, open the CSS files using an HTML editor, copy the entire content, and add it into the provided field of the CSS compressor. The right setting for this is “highest”. After the tool has compressed the CSS code, we enter it into the style.css file and save it.
In order for the automatic versioning to work, we have to adjust the small code snippet for the output of the CSS files. The following adjustment belongs into the link area (href=””):
<link rel="stylesheet" href="<?=auto_version('/path/to/style.css')?>" />
For instance, the right path could look like this:
Part 4: Integrating the Files in the Right Spots
First, the Style.css is implemented in the header. The easiest way to do that is by opening the header.php file of your theme and then entering the link in the head area. Please pay attention to the correct spelling of the data path. If it’s not 100 percent correct, the browser will not find the file, which will cause a 404 error.
All Other CSS Files
All other CSS files move from the header to the footer, so that the visible area of the website loads instantly. On top of that, the files will only load where it’s absolutely necessary. We place the files above
Controlling where exactly a file is loaded is done via the tags is_single and is_page. Under certain circumstances, you can also combine both tags, as I did in the upper area. The upper three files are loaded on single posts on one page. The general structure looks like this:
The screenshot shows that the respective CSS file is only implemented in the post with the ID 4368, and that it’s not loaded anywhere else.
WordPress Codex: Using Conditional Tags Correctly
Those that kept their eyes on the ball up to this point, have already significantly accelerated their WordPress websites. However, we had to learn that a website that loads very fast takes a lot of manual effort. Maybe there are some more intelligent and comfortable solutions to certain tasks, but there’s always room for improvement. In any case, the CSS is now optimally cached by the browsers, and thus, it’s only loaded when the page is accessed for the first time. Every other page visit will be significantly faster.
The next and final part in our series of how to really accelerate WordPress websites will deal with a few smaller tasks that still need to be done. Among other things, we’ll make the popular Jetpack plugin get a move on. Depending on how and which features of Jetpack are used, it can definitely be extremely fast, and not slow down the website. Nonetheless, this requires a couple of adjustments.
Really Accelerate WordPress Websites: the Series
- Noupe: No Nonsense: What Really Accelerates WordPress Websites – [#1]
- Noupe: High Speed: Really Accelerate WordPress Websites – [#2]
- Noupe: High Speed: Really Accelerate WordPress Websites – [#3]
- Noupe: WordPress: How to Create a Custom Site Plugin
- Noupe: The 9 Best Free HTML Editors for Web Developers (Windows Edition)
- 5 Best Free HTML Editors for Web Developers on Mac OS X
- CSS Compressor
- WordPress Codex: Correctly Using Conditional Tags
- WordPress Premium Plugin Gonzales
- WordPress Plugin Autoptimize
- Speed Check Tool Pingdom Tools