WeeklyOSM/Website performance

It has been proposed that this page be deleted or replaced by a redirect. See the discussion page for further information.
The given reason is: outdated, please fix incoming links first .

Baseline

The performance of both websites have been tested and results are at http://www.webpagetest.org/result/160603_T3_RWQ/ (Weeklyosm.eu, 3 June 2016, load time 11.9 seconds) and http://www.webpagetest.org/result/160604_VX_35X/ (blog.openstreetmap.de, 3 June 2016, load time 9.2 seconds). Note that both these tests are performed from Germany and show the blog as of a particular date. A more representative test should be performed that reflects the readerships location.

Alternative tests of issue 305 which is always the same issue but does have comments which vary

• http://www.webpagetest.org/result/160607_CQ_8CY/ German version - 7 June 2016, load time 4.7 seconds
• http://www.webpagetest.org/result/160607_F3_8GF/ English Version - 7 June 2016, load time 9.4 seconds

Issues

There are a number of issues affecting performance, these are roughly listed with the easy to fix and high impact towards the beginning of the list

• Not compressing text for transmission from the website to the server
  • On blog.openstreetmap.de - save about 140kb of page weight
    • SVG (mainly the country flags)
    • favicon
    • Two objects from flatter (a bit hard to fix, outside our control)
  • On weeklyosm.eu - save about 550kb of page weight
    • There are many and this is not easily fixed as 1and1 does not support gzip compression on shared hosting
• Using excessive quality on Jpeg images
  • On blog.openstreetmap.de - save about 84kb of page weight
  • on weeklyosm.eu - save about 40kb but this is all in twitter, outside our control
• Using bitmaps inside SVG when vector versions are available
  • The country flags - save about 130kb of page weight (note this saving is the same as the compression saving, don't double count)
• Using multiple copies of the same image on a single webpage
• Not setting expire times appropriately for assets - maybe 1 week to 1 month better
  • On blog.openstreetmap.de - png, css, svg, javascript
  • On weeklyosm.eu - png, svg, javascript, gif, css

  Add the following section to .htaccess

 # BEGIN Manual Edit Expiring
 <IfModule mod_expires.c>
 # enable expirations
 ExpiresActive On
 # expire images, javascript, and CSS after a month in the client's cache
 ExpiresByType image/png A2592000
 ExpiresByType image/gif A2592000
 ExpiresByType application/x-javascript A2592000
 ExpiresByType text/css A2592000
 </IfModule>
 # END Manual Edit Expiring

• Calling for objects and getting a redirection, should call for the object directly
  • blog.openstreetmap.de
    • Flattr - 2 objects
  • weeklyosm.eu
    • io.wp.com - 1 object
• The project logo is delivered as an image which includes images of letters rather than a smaller, faster, crisper SVG
• Not using a CDN for delivery of static objects
• missing objects (404)
  • weeklyosm.eu - a flag for brazil as png

Non performance issues

There are some vaguely performance related issues that should be addressed

• Switch to https delivery of main page (weeklyosm.eu only)
• Use https delivery where available for assets
• Some objects have a // in their address where a single / will do

Fixing the Flags

This procedure is to make sure that all flags are consistently sized, are vector graphics and are as small as file size as possible

Prerequisites

• Wordpress plugin to allow replacement of files in the media library
• Wordpress plugin to preview svg files in the media library (optional)

Procedure

1. Identify the country of the flag
   1. example es.svg -> Spain (check 2 letter code and visual inspection to be sure)
2. Check that the existing file is a raster graphic inside an svg file
   1. Download to your computer
   2. Use ImageMagick
   3. $ identify -verbose es.svg
   4. if it contains binary data rather than all text it needs fixing
3. Obtain a vector version of the flag
   • Wikipedia commons is a good source
4. Calculate the size of the new flag

   For visual consistency the area occupied by each flag should be about 375 pixels. So using some mathematics a

   • 5:3 flag should be 25 (15/3*5) x 15 pixels
   • 3:2 flag should be 24 (16/2*3) x 16 pixels
   • square flag should be 19x19 pixels
5. Alter the vector version to have the size in pixels calculated at the previous step, and also the correct aspect ratio of the flag. Note the use of viewBox parameter to specify how the lines are drawn and width and height then scale it. NB the parameter names, such as "ViewBox" are case sensitive.
   1. Change the line

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="500" width="750">

      to

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16" width="24" viewBox="0 0 750 500">

6. Replace the vector version in the media library. There may be more than one. Use the first option to replace the file without changing any name or link
   1. Find the flag in the media library and select it
   2. Click on "Eine neue Datei hochladen"
   3. Select the file
   4. Make sure the radio button "Datei einfach ersetzen" is selected
   5. Click on "Hochladen"

Progress

Done

• de, es, us, jp, at, be, ch, it, ph, sweden, nl, uk

To do

• in, fr, br, sk and many more!