spa splash page optimization article - rough draft

Author: ferndopolis

fernando/_posts/2015-01-19-optimizing-spa-splash-page.md

@@ -0,0 +1,51 @@
+---
+layout: post
+title: Optimizing Single Page App Splash Screen
+author: fernando
+---
+
+With this growing trend of making your website/app all fit in on single
+page, initial page load tend to take a bit longer. The advantage being that
+after only small bits of JSON will be passed to/from the client/server.
+
+When I started working on Jackpine website, I put little attention on the images
+that where being handed over from the graphic designer. And pretty soon the total
+size for the page download was nearing (insert estimated webpage size)
+
+I though maybe we should first focus on what the user see when they first hit the page.
+The background image of the chisel where the one that at around XXmb would load at the
+end of the stack and would slowly reveal itself.  This looked horrible.  So after some
+searching on the web on how to priotize the GET request for the background image I found
+that by default background images are last to build becasue they are set in the CSS.
+You could inline the css background but that would make the HTML structure have styling not
+cool for the semantics nerds. And even if you did add the inline it would still load after
+GETting all those huge JS libraries needed.
+
+The solution I found that works the best is to instantiate a Javascript image object with
+the source of the image.
+
+CODE HERE
+
+img = new Image;
+img.src = 'image/source.png'
+
+And placing this inline at the top of the html page before any calls to the JS or CSS, GETs
+image before anything else.  For more bonus points in quick loading don't use any jQuery, just
+straight JS and it will shave a few milliseconds.  And for even more make a low res picture and
+overlap the images using the CSS background comma spearated.
+
+background-image: url(low-res.png), url(high-res.png);
+
+This will basically load the first image on the list and once the next image is complete it will
+overlap it in a sudden blink. The effect is pretty suddle if you aren't looking for it.
+
+Now your page might be getting somewhere and looking a little more snappy on the first laod.
+To really polish it off add and fade in effect to the text and your page is on its way to really
+pro work.  Because what happend is that if you are using some fancy web font this again add to a
+bit of timing that cause the text to rended with some default font followed by the web font.
+And since the image is the screen first you might want the fade in in to avoid having a nasty
+flash of text.
+
+Well all this shouldn't add to much time to your project for adding some extra quality to your
+site. Feel free to check the source code on this site. And I hope you enjoyed this tech write up.
+