Alternate menu

 

This is a follow on from my site monitoring project. Using that I found that the basic initial load time for DigitalHam was considerably higher than my other sites – even the WordPress ones.

Examining the sites the only significant difference that I could see was the use of a fairly large WordPress menu. I asked about this on the Aquoid support forum for the Suffusion theme but couldn’t get across to the person who picked the query up the fact I was only looking at the initial page creation and delivery time and not the total page load time which involves the loading of images css javascript etc.



These were the timings I had found and was asking about…

Problem site page based ~ 100 pages - DigitalHam
Samples: 286
Average load time: 1.022
Load time > 2 sec: 9 (3.1%)
Slowest 2015-03-17 16:00:08 Datasize: 8686 Load time: 5.966
Fastest 2015-03-18 03:05:02 Datasize: 8686 Load time: 0.412

Same site but not home page - DigitalHam discone page
Samples: 459
Average load time: 0.939
Load time > 2 sec: 16 (3.5%)
Slowest 2015-03-15 20:40:06 Datasize: 8078 Load time: 4.619
Fastest 2015-03-17 01:25:01 Datasize: 8097 Load time: 0.320

Site B (non wordpress - just php/mysql) - Foofers
Samples: 745
Average load time: 0.269
Load time > 2 sec: 3 (0.4%)
S: 2015-03-17 12:10:12 Datasize: 3738 Load time: 3.717
F: 2015-03-17 10:40:03 Datasize: 3738 Load time: 0.105

Site C - suffusion no menu small post based site low traffic - IDontBelieveIt
Samples: 745
Average load time: 0.457
Load time > 2 sec: 3 (0.4%)
S: 2015-03-16 21:10:21 Datasize: 5651 Load time: 5.458
F: 2015-03-17 18:05:03 Datasize: 5802 Load time: 0.209

Site D - suffusion no menu 4000+ pages - a php/mysql site converted to WP - KwikBreaks
Samples: 746
Average load time: 0.512
Load time > 2 sec: 3 (0.4%)
S: 2015-03-16 03:55:07 Datasize: 6117 Load time: 2.553
F: 2015-03-16 03:10:03 Datasize: 6117 Load time: 0.258

Site E - suffusion no menu tiny site with virtually no traffic - Plot41
Samples: 747
Average load time: 0.528
Load time > 2 sec: 5 (0.7%)
S: 2015-03-17 02:20:07 Datasize: 4213 Load time: 2.853
F: 2015-03-17 03:25:03 Datasize: 4213 Load time: 0.294

With no suggestions forthcoming I decided to try an alternate menu. This caused me considerable grief as although I could produce css only menus that worked perfectly well outside of a Suffusion theme and even in the main page area whenever I tried to fit them under the header or in the sidebar their styles were messed up for some reason – probably the Autoptimize plugin I use which consolidates and caches css and javascript to reduce overall page load time.

I wasn’t prepared to forego Autoptimise in order to change menu so I thought I’d try the one I use in my portable favourites project. I managed to get that going and it is the current sidebar menu on Digitalham.

For the comparison testing I set up an identical page on each WordPress site. Direct comparisons between these numbers and the earlier ones are not really valid as I found and installed the Autoptimize after the original test and that will likely increase the basic generation time although it offers a significant improvement on overall page load time. Here are the results…

DigitalHam
Samples: 275
Fastest load time: 0.208     2015-03-29 18:25:02
Slowest load time: 3.411     2015-03-30 00:35:06
Average load time: 0.481
Load time > 2 sec: 2 (0.7%)

Foofers - the non-Wordpress site
Samples: 275
Fastest load time: 0.138     2015-03-29 15:45:02
Slowest load time: 1.368     2015-03-29 23:10:03
Average load time: 0.314
Load time > 2 sec: 0 (0%)

IDontBelieveIt
Samples: 276
Fastest load time: 0.197     2015-03-29 12:50:02
Slowest load time: 2.706     2015-03-30 01:50:04
Average load time: 0.512
Load time > 2 sec: 4 (1.4%)

KwikBreaks
Samples: 276
Fastest load time: 0.276     2015-03-29 14:55:03
Slowest load time: 2.524     2015-03-30 03:25:08
Average load time: 0.526
Load time > 2 sec: 1 (0.4%)

Plot41
Samples: 276
Fastest load time: 0.214     2015-03-30 10:25:03
Slowest load time: 3.211     2015-03-30 03:20:09
Average load time: 0.536
Load time > 2 sec: 5 (1.8%)            

Clearly a sample was taken as I was cut’n’pasting the results as the later sites have 1 more. The menu change has brought minimum and average load times for DigitalHam in line with the other WordPress sites.

There are probably other savings too. You can see from this snippet of the menu on Plot41 that the html is pretty large so the supporting css is likely to be too

<li id="menu-item-170" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-170 dd-tab"><a href="http://www.plot41.me.uk/category/birds/">Birds</a>
<ul class="sub-menu">
        <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-171"><a href="http://www.plot41.me.uk/oystercatchers/">Oystercatchers</a></li>
</ul>
</li>
<li id="menu-item-148" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-148 dd-tab"><a href="http://www.plot41.me.uk/category/in-the-sky/">In the sky</a>
<ul class="sub-menu">
        <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140"><a href="http://www.plot41.me.uk/fly-boys/">Fly Boys</a></li>
        <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-155"><a href="http://www.plot41.me.uk/squadrons-of-geese/">Geese</a></li>
        <li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-149"><a href="http://www.plot41.me.uk/triple-rainbow/">Triple rainbow</a></li>
</ul>


For anybody interested in using a different menu – bearing in mind this means manually updating it – here is the code for the menu and two pieces of supporting Javascript.

The html

<style type="text/css">
dd
 {
  display : none;
 }
dt
{
 color           : #498060;
 font-weight     : bold;
 list-style-type : none;
 cursor          : pointer;
}
</style>
<script>
if(typeof(Storage) !== "undefined")
{
 sessionStorage.support = "yes";
}
else
{
 document.write("Sorry. Your browser will not support this menu correctly");
}
</script>
<noscript>
Sorry. Javascript support is needed for this menu to work correctly.
</noscript>
<dl>
 <dt onclick="javascript:clicksection('lmenu1');">Antennas
 <dd id=lmenu1>
 <ul>
  <li><a href="/budget-discone-antenna/">Discone</a></li>
  <li><a href="/homebrew/">Homebrew mishap</a></li>
  <li><a href="/quadrifilar-helix/">QHA Mk I (APT)</a></li>
  <li><a href="/qha-mk2/">QHA Mk II (APT)</a></li>
  <li><a href="/antenna-search/">Search</a></li>
  <li><a href="/turnstile-antenna/">Turnstile antenna (APT)</a>
   <ul>
    <li><a href="/design/">Turnstile Design</a></li>
  </ul>
  </li>
  <li><a href="/homebrew-20m-loaded-whip-used-for-wspr/">20m loaded whip (WSPR)</a></li>
  <li><a href="/pa0rdt-mini-whip-active-hf-antenna/">PA0RDT mini whip</a></li>
 </ul></dd></dt>

 <dt onclick="javascript:clicksection('lmenu2');">CCTV
 <dd id=lmenu2>
 <ul>
  <li><a href="/dome-cctv-camera/">Dome camera</a></li>
  <li><a href="/foscam-fi8905w/">Foscam FI8095</a></li>
  <li><a href="/lens-change/">FI8095 Lens change</a></li>
  <li><a href="/foscam-fi8918w/">Foscam FI8918W</a></li>
  <li><a href="/ip-domecam/">IP Domecam</a></li>
 </ul></dd></dt>

 <dt onclick="javascript:clicksection('lmenu3');">Digital Modes
 <dd id=lmenu3>
 <ul>APRS
   <ul>
    <li><a href="/g6kiz/">G6KIZ</a></li>
    <li><a href="/g6kiz-7/">G6KIZ-7</a></li>
    <li><a href="/g6kiz-9/">G6KIZ-9</a></li>
   </ul>
 </ul>
 <ul>WSPR
  <ul>
    <li><a href="/wspr-spots-using-ft817nd-and-short-loaded-whip/">Spots</a></li>
  </ul>
 </ul></dd></dt>

 <dt onclick="javascript:clicksection('lmenu4');">Ham Gear
 <dd id=lmenu4>
 <ul>
  <li><a href="/emtech-zm2/">Emtech ZM2 ATU</a></li>
  <li><a href="/mfj-259b/">MFJ-259B</a></li>
  <li><a href="/mml-144-30-linear/">MML 144/30 linear</a></li>
  <li><a href="/tigertronics-signalink-usb/">Signalink USB</a></li>
 </ul>
 </dd></dt>

 <dt onclick="javascript:clicksection('lmenu5');">Miscellaneous
 <dd id=lmenu5>
 <ul>Media Players
  <ul>
   <li><a href="/eaget-x5/">EAGET X5</a></li>
   <li><a href="/himedia-600a/">HiMedia 600A</a></li>
   <li><a href="/kaiboer-h1055/">Kaiboer H1055</a></li>
  </ul>
 </ul>
 <ul>PC
  <ul>
   <li><a href="/eee-box-b202/">Eee Box B202</a></li>
   <li><a href="/asus-eee-pc-701/">Eee PC 701</a></li>
   <li><a href="/msi-wind/">MSI Wind</a>
    <ul>
     <li><a href="/mods/">Wind mods</a></li>
    </ul>
   </li>
   <li><a href="/ubuntu/">Ubuntu</a>
    <ul>
     <li><a href="/gmfsk/">gMFSK</a></li>
     <li><a href="/gpsk31/">gPSK31</a></li>
     <li><a href="/xastir/">XASTIR</a></li>
    </ul>
   </li>
  </ul>
 </ul>
  <ul>
  <li><a href="/chiropractor/">Chiropractor</a></li>
  <li><a href="/free-money/">Free Money</a></li>
  <li><a href="/links/">Links</a></li>
  <li><a href="/obd2/">OBD II</a></li>
  <li><a href="/memoscan-u480-obd2-code-reader/">U480 OBD2 reader</a></li>
  <li><a href="/uk-and-ireland-am-transmitters/">UK and Ireland AM Transmitters</a></li>
 </ul></dd></dt>

 <dt onclick="javascript:clicksection('lmenu6');">Weather
 <dd id=lmenu6>
 <ul>
  <li><a href="/monitoring/">Monitoring</a></li>
  <li><a href="/r2zx-apt-satellite-receiver/">R2ZX receiver</a></li>
  <li><a href="/watson-w8681/">W8681</a>
   <ul>
    <li><a href="/followup/">Follow up</a></li>
    <li><a href="/wind-speed/">Anemometer</a></li>
    <li><a href="/w8681-wind-direction/">Wind direction</a></li>
    <li><a href="/uiview-script/">UIVIEW script</a></li>
   </ul>
  </li>
  <li><a href="/wh1090/">WH1090</a></li>
  <li><a href="/northampton-weather/">Northampton Weather</a></li>
  <li><a href="/satellite-pictures/">Satellite Pictures</a></li>
 </ul></dd></dt>
 <dt onclick="javascript:clicksection('lmenu7');">Web
 <dd id=lmenu7>
 <ul>Development
  <ul>
   <li><a href="/customising_weewx/">Customising WeeWX</a></li>
   <li><a href="/dynamic-dns-woes/">Dynamic DNS Woes</a></li>
   <li><a href="/embedding-cctv/">Embedding CCTV</a>
    <ul>
     <li><a href="/ipcam-cgi-sdk/">IPCAM CGI SDK 2.1</a></li>
    </ul>
   </li>
   <li><a href="/portable-browser-favourites/">Portable Browser Favourites</a></li>
   <li><a href="/register-globals/">Register Globals</a></li>
   <li><a href="/website-hosting-monitor/">Website / Hosting monitor</a></li>
   <li><a href="/wordpress/">WordPress</a>
    <ul>
     <li><a href="/alternate-menu/">Alternate menu</a></li>
     <li><a href="/moving-wordpress-site/">Moving a WordPress site</a></li>
    </ul>
   </li>
  </ul>
 </ul>
  <ul>Internet
   <ul>
    <li><a href="/fon-free-wifi-apk/">Fon free WiFi</a></li>
    <li><a href="/mobile-broadband-2/">Mobile Broadband</a></li>
    <li><a href="/mobile-broadband/">Mobile broadband for a caravan</a></li>
    <li><a href="/pocket-surfer/">Pocket Surfer</a></li>
   </ul>
 </ul></dd></dt>
</dl>

Javascript function
Opens up a menu section when section header is clicked
I have omitted the script tags from the examples.

function clicksection(id)
 {
  sessionStorage.menusection = id;
  var d = document.getElementById(id);
  for (var i = 1; i<=99; i++)
   {
    if (document.getElementById('lmenu'+i)) {document.getElementById('lmenu'+i).style.display='none';}
   }
  if (d) {d.style.display='block';}
 }                        

Opens up whatever menu section was clicked last.

var section = sessionStorage.menusection;
if(!section) {section="lmenu1"};
clicksection(section);

I also added a snippet of javascript to the start of each page to open the appropriate menu section when the page is loaded directly from an external link. This page is in the lmenu7 section so the code added is..

sessionStorage.menusection ="lmenu7";

Finally I may have been able to use css based menus after all as I’ve have to remove Auutoptimize due to the cache sizes getting out of hand.