spa splash page optimization article - rough draft

Author: ferndopolis

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

@@ -0,0 +1,49 @@
+---
+layout: post
+title: Optimizing Single Page App Splash Screen
+author: fernando
+---
+
+With the growing trend of single page app/websites, initial page load tend to take a bit longer.
+The advantage being that after only small bits of JSON will be passed from the client/server.
+
+When I started working on Jackpine website, I paid little attention on the images
+which were being handed over from the designer. Pretty soon the total
+size for the page download was nearing 2.0 MB, 1.6 MB for images.
+
+The intial splash page background image was around 307 KB and from using the Google inspector
+end of the stack and would slowly reveal itself.  This looked horrible. After some
+searching on the web on prioritizing GET requests 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 is simple just 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.
+