Simple steps to optimize site speed (overview)

[Philipp]

This is a very basic guide on how to optimize a ProcessWire page for speed. It doesn’t go into the depths of optimization and perfect render paths but will provide you with some proven ProcessWire methods for faster websites. The big problems that are easy to fix are what we aim for. You want quick improvements? Then read on…

First let's have a look ath the following graph. Those are the areas, we want to improve.

Source: http://httparchive.org/interesting.php?a=All&l=Oct%201%202014
 

Clean up your HTML
Look at your HTML source code. Are there any unnecessary parts? Remove anything that might not be needed and try to keep your markup as clean as possible.
Avoid using too many external JS libraries or other tools. It is okay to include jQuery from a CDN, because most visitors will already have cached the file. Too many of those external requests will slow down the page.
 
If possible, try to avoid render-blocking Javascripts and move your script tags to the end of the page, right before the body. In most cases, your Javascript will enhance your content but doesn’t need to fire before the site is rendered.
 
Always think if you need to include another library or the fourth webfont on your site.
 
Minify Markup
The next step to save some bytes is to remove all whitespaces from your markup. It doesn’t have to look nice, it has to be loaded fast.
 
We perform this trick with our new super-weapon: The AllInOneMinify module for ProcessWire. Install it like every other module for ProcessWire. Once activated, go to the module settings and tick the checkbox for “Minify HTML” and look at your sites source code. It should be minified.
 
AIOM can handle conditional browser comments. If your layout depends on whitespaces you could “force” them by putting an   into the markup.
 
Optimize the CSS
Now we’re heading for the next larger part of a usual website. We will combine all CSS files and then remove anything not needed (whitespace,comments) from it.

Before we start, make sure your CSS files only contain rules that you really use. Especially if you’re using a framework like Bootstrap, most of the selectors are never used. Remove them carefully.
 
We need the AllIneOneMinify module from the previous step again. After installation, open the template file where your HTML header is generated. We will now replace all stylesheet tags with a single file. AIOM needs to know all CSS (or even LESS) files, relative to your template folder. It will then output a link to a single, compressed CSS file. 
 
You might have this in your HTML head:

<link href="<? echo $config->urls->templates;?>/css/grid.css "rel="stylesheet" />
<link href="<? echo $config->urls->templates;?>/css/style.css“ rel="stylesheet" />

 Replace all links to Stylesheets with the single tag like this:

<link href=”<? echo AIOM::CSS(array(‘css/grid.css’,’css/style.css’)));?>” rel=”stylesheet”/>

You pass an array with the file names to the AIOM method CSS. It will return a link to the file. AIOM takes care of image urls inside CSS. It will detect changes in the source file and only generate a new file if necessary.
 
While developing, you might want to turn on the “Development” checkbox in the module settings.
 
Make JavaScript tiny
Do the same as you do to the CSS to your Javascript files. First, clean up the code. Then install AIOM and compress all JS files into a single file using the AIOM::JS method that works as the AIOM::CSS method. For best results, think about including scripts like jQuery from a CDN and put your scripts below the content, before you close the body tag.
 
Also note that the order on how your throw your JS files into AIOM might be important, depending on the code inside.

Get the right image size.
ProcessWire comes with great image tools. Use them, to make images exactly the size you need them. You don’t have to serve that little thumbnail with over 3000px length just because the editor wasn’t able to reduce the size.
 
Example: Your designer wants to have a slider image with a maximum size of 600x320 pixel. To output the image with that exact dimensions, use the API accordingly:

$sliderImage->size(600,320)->url;

An even better way would be to use adaptive images or the new srcset attribute combined with a JS fallback. Then your site only delivers the image size as needed.
 
Hint: Play around with the image quality setting in the config.php. Maybe you don’t need images with a JPG quality of 90+.
 
Compress the images further with minimize.pw
To make images even smaller, we can use the minimize.pw service. This service will compress images nearly lossless by using more complicated tools to reduce the size of PNGs and JPEGs. By doing this, you remove bytes from the largest chunk of your website weight.
 
minimize.pw is free for 2000 images. Just enter your E-Mailadress and receive a free key

Then you have to install the ProcessImageMinimize module and enter they key. You can now activate the option to automatically compress every image uploaded.  It is fail-safe and will compress images in the background. Please note, the automatic mode only works with images uploaded AFTER you have activated the module.
 
You can manually select image fields with the ->mz() API method. Just include it before you output the image in your template file:

$myImage->width(300,300)->mz()->url;

We've closed the service. You could use something similar like Imgix ( https://www.imgix.com/ ).
  

Activate GZip compression on your site
Another method to speed up your site is to activate GZip compression. The server will then send all files compressed to the client. This works with nearly all browsers and the CPU power required is minimal.
 
You can tell your server to do this, by adding those lines to your .htaccess file in your root directory. Please take care, that you do not overwrite the ProcessWire rules in the file!  For best results add them on the top of the .htaccess file:

<IfModule mod_deflate.c>
  AddOutputFilter DEFLATE js css
  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

This was taken from another forum post.
 
Tell the client to cache stuff
To make repeating visits faster, we can tell the browser to cache special files for a longer period of time.
Again, add this on top of your .htaccess file:

 

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/octet-stream "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
</IfModule>
 
<IfModule mod_headers.c>
  <FilesMatch "\\.(ico|jpe?g|png|gif|swf|woff)$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>
  <FilesMatch "\\.(css)$">
    Header set Cache-Control "max-age=2692000, public"
  </FilesMatch>
  <FilesMatch "\\.(js)$">
    Header set Cache-Control "max-age=2692000, private"
  </FilesMatch>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
  Header unset ETag
  Header append Cache-Control "public"
</IfModule>

 
Remember, that this caching might be annoying while developing the site.
 
Use the internal cache (or ProCache) 
Another trick to make the site faster is to use a caching system. This will “store” your rendered site so you don’t have to query the database that often.
 
We can either do this with the internal cache of ProcessWire or use the commercial, official ProCache module.
 
Using the build-in system, you go the the setting page of a template and open the “Cache” register. You can now set the Cache time and what happens if something changes. The settings depend on the content of the site. Mostly static content can be cached longer and you might not need to reset the cache every time. Dynamic sites will need shorter cache times.
 
ProCache (buy here) is even faster because it will bypass PHP and the database. Files are served directly as HTML.
 
Please note, that caching might make the site faster but it can create new problems. Use with care.
 
Summary
Keep your code as clean as possible. Remove anything unnecessary and then compress HTML,CSS and JS using the AIOM module.  The largest part of your page weight are images. Keep them small by using the appropriate dimensions and consider services like minimize.pw. In the end, use intelligent caching and buy ProCache.
 
Following this guide takes not more than an hour but can speed up your site and make your visitors happy.
 
This was just a quick overview of techniques to optimize your page speed. There is plenty of stuff you can do but the steps above are a good first step. Maybe you can share your favorite methods (or links) to start the discussion.

[NooseLadder]

I'll start with some online tools to measure page speed:

GTMetrix

Pingdom Tools

Google Page Speed Insights

I generally test using all three as each one gives some different results and recommendations for improvement. The Google one also shows results for mobile loading and mobile user experience.

[pwired]

Great post Philipp, thanks and saved it for the week-end to come.

[felix]

+ Use: https://github.com/typekit/webfontloader if you're using webfonts (this is important especially on mobile with slow connections)!

+ Use the "Picture" Element where applicable

+ Use dns-prefetch if you're loading external ressources (i.e. cloud hosted javascript librarys)

This Article has some more stuff to look at.

[netcarver]

@Philipp

Thanks for posting this tutorial! I'm currently getting a 404 for the image from abload.de.  

[Philipp]

Maybe a little bit dated, but some basic tipps can be found here, on the Yahoo Dev network.

[Philipp]

I found another (beginner) tutorial on the Mozilla Developer network.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

In more detail, those rules might be interessited (Beware, they might crash your browser)

http://stevesouders.com/hpws/rules.php

[Philipp]

Lots of ressources (links, articles, downloads) on this beautiful page: http://www.perf.rocks

[Mats]

Hera are two links via sidebar:

https://cdnify.com/discover/web-performance-guide

http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

[iceean]

you can also optimize your CSS code by simplifying code in the following way: how to improve CSS code. After that it would be good to use some compressor which removes whitespaces, it can reduce file size on 30%.

[Valery]

Hi,

Just my 5 cents. Give Closure Compiler Service a try. It is good at removing "dead" code, i.e. the functions of your libraries/frameworks that are not used in your JS code.

[benbyf]

retina: anyone having sucess with either picture or srcset as im not fond of polyfills and nothing seems native yet  so have been stuck with 1.5x images sized in css.

minimize: does anyone know if this module has a fail back technique as i would love to use it but worry if the service let down or locked me out etc...

[Philipp]

The minimize.pw module is fail-safe. If our server goes down, images are only run through the internal ProcessWire Image methods.

I'm respimg for all my responsive image needs.

[PWaddict]

On the .htaccess of PW there is already the mod_headers module with this code:

<IfModule mod_headers.c>
  # prevent site from being loaded in an iframe on another site
  # you will need to remove this one if you want to allow external iframes
  Header always append X-Frame-Options SAMEORIGIN 

  # to prevent cross site scripting (IE8+ proprietary)
  Header set X-XSS-Protection "1; mode=block"

  # prevent mime-based attacks via content sniffing (IE+Chrome)
  # Header set X-Content-Type-Options "nosniff" 
</IfModule>

If I add your suggested code for mod_headers on the top of .htaccess will there be any issues by having 2 times the mod_headers?

[flydev]

On the .htaccess of PW there is already the mod_headers module with this code:

If I add your suggested code for mod_headers on the top of .htaccess will there be any issues by having 2 times the mod_headers?

This is just a directive. You can include the code without any issue. [doc]

[DonnaWayne312]

Image optimization is very important for website performance. Many people use simple plugins for that, which can sometime do more harm than good, especially if you all ready have a lot of plugins in your panel, they can also slow down websites performance. That's why it's always best to optimize images with tools like this: *link removed* and besides, plugins don't optimize images always as much as you want them to.

Edited March 22, 2017 by adrian
Removed spammy link