Tweaks for optimization - Page Speed

phreak

Hi everyone,

I wanted to open another Page Speed speed optimiziation thread for Vanilla. There is a lot of tweaking that can be done. I made another small round of optimization last night and i'll just start with some little stuff and would be happy if others add more ideas here. Basically this info can be found in many threads here but here is a small recollection.

Things i regulary do:

• TinyPNG.com every picture that you use in your theme mobile and desktop
• If it works for you add $Configuration['Garden']['CombineAssets'] = TRUE; to your config.php to let Vanilla combine CSS your files, if it breaks your layout you have to go manual as described below...
• Delete as many CSS files of the plugins that you use and move their style and content into your Custom.css. If not in the plugin folder, Vanilla doesn't request them (handle with care and backups, some styles break each other).
• If you want and it doesn't spread too much confusion in your setup get rid of your Custom.css and write everything in your Style.css
• Check your Google Analytics site speed recommendations and list the sites on top with the most user traffic. Check their page speeds and look up if you can improve those specific pages (there might be bloated picture uploads, reducing those picture files size could boost these sites much more).

Additionals:

• @Bleistivt startet an interesting issue about getting rid of 300kb by removing almost unneeded jQuery-UI.js from the js folder: https://github.com/vanilla/vanilla/issues/3057
• I use a script that resizes and recompresses all my file uploads because they are bloated like hell when users upload 10 MP images with 3000+ pixels in width and insert them in the post. Once and then i run a script to resize all uploads.
• I have not found and i don't have the knowledge for a proper asset handling for the Javascripts loaded by Vanilla. It has often been mentioned and async might be an option for you, i'm still working this out: http://vanillaforums.org/discussion/30771/asset-pipeline-for-vanilla
• If you have many banned users you may have many profile pictures with "Banned User" request from a Vanilla CDN. This image can be moved local and brought down in filesize with this config:
  ``$Configuration['Garden']['BannedPhoto'] = 'https://images.v-cdn.net/banned_large.png';`

Things i can't do:

• Every Vanillicon SVG could see a reduction in filesize of about 50% - 60% with better compression. Thats sometimes up to 1.8 kilobyites. For 20-50 profile images per pages in a huge forum this could bring quiet a nice little boost. Something only the Vanilla crew could do.

It's not rocket science but more faster Vanilla forums on the web, bring more OS users to Vanilla forums as well.

Greetz

whu606

I would also suggest making sure you have a host that allows memcached to be enabled, as this can make a big difference on calls to the DB.

My site is a lot faster now I have memcached enabled.

phreak

@whu606: I have a question about memcached. What is the best way to measure if memcached is working. My host says it's working and i have it in my config. But my browser inspector (Browsercache disabled) doesn't make a significant page improvement when i add or remove it from the config.php (Vanilla 2.2).

// Memcached Config
$Configuration['Cache']['Enabled'] = true;
$Configuration['Cache']['Method'] = 'memcached';
$Configuration['Cache']['Memcached']['Store'] = array('localhost');
$Configuration['Cache']['Memcached']['Option']['-1001'] = true;
$Configuration['Cache']['Memcached']['Option']['9'] = 1;
$Configuration['Cache']['Memcached']['Option']['16'] = true;

whu606

Do you have an info.php file?

If not, create a file called info.php and add this

<?php
phpinfo();
?>

Save the file in your root and then visit it at yourforum/info.php

That will show if memcached is enabled.

I used this guide to help me test if it was caching:

https://www.digitalocean.com/community/tutorials/how-to-install-and-use-memcache-on-ubuntu-14-04

See the section Test Whether Memcached can Cache Data

ytadvisors

I found this in the new Vanilla 2.2 beta .htaccess file.

<IfModule mod_headers.c> <FilesMatch "(?<!embed)\.(css|js|woff|ttf|eot|svg|png|gif|jpeg|jpg|ico|swf)$"> Header set Cache-Control "max-age=315360000" Header set Expires "31 December 2037 23:59:59 GMT" </FilesMatch> </IfModule>

R_J

@phreak said:
whu606: I have a question about memcached. What is the best way to measure if memcached is working.

Get some statistics

https://code.google.com/p/phpmemcacheadmin/

R_J

Besides of tweaking Vanilla, you can do some performance enhancements on the server side.

• enable gzip compression
• strip whitespaces
• set expire headers for assets (css/js & jpg/gif/...) so that they are cached on the users browser

phreak

@R_J: Thanx for the reply. I didn't know there is a uitlity i can check into. It might not be possible to install it on my managed server but at least i can ask my host to deliver me a screenshot like yours. Didn't know there is a proper way to visualize it, not i can ask them this directly thanx.

Yes i enabled GZIP and the Expires Header.

How is "Strip whitespaces" implemented. Do you mean asset compression for HTML, CSS and JS or basically a server side function?

Thanx.

R_J

You can compile nginx so that you simply can use a switch to strip whitespaces from html. That is essentially the same like "compressing" css. I have taken a look at this page and it has around 86k characters. By simple search and replace I could reduce it to 79k, nearly 10% less

I do not know if there is something similar for apache - I only found this: http://searchturbine.com/php/phpwee Don't know if you could make a helpful plugin out of that or not...