From 02c605dcf133f3f23f0fe46da51ff779fd2eee5b Mon Sep 17 00:00:00 2001 From: Fernando Marcheselli Date: Mon, 19 Jan 2015 23:45:38 -0800 Subject: [PATCH 1/3] spa splash page optimization article - rough draft --- .../2015-01-19-optimizing-spa-splash-page.md | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 fernando/_posts/2015-01-19-optimizing-spa-splash-page.md diff --git a/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md b/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md new file mode 100644 index 0000000..9054774 --- /dev/null +++ b/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. + From 78a8ef1dd40a45d4dd112ec444cd7a1691c2d192 Mon Sep 17 00:00:00 2001 From: Fernando Marcheselli Date: Tue, 27 Jan 2015 17:41:04 -0800 Subject: [PATCH 2/3] add code highlighting --- fernando/_posts/2015-01-19-optimizing-spa-splash-page.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md b/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md index 9054774..940b0d8 100644 --- a/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md +++ b/fernando/_posts/2015-01-19-optimizing-spa-splash-page.md @@ -24,15 +24,19 @@ the source of the image. CODE HERE -img = new Image -img.src = 'image/source.png' +{% highlight javascript %} +img = new Image; +img.src = 'image/source.png'; +{% endhighlight %} 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. +{% highlight css %} background-image: url(low-res.png), url(high-res.png); +{% endhighlight %} 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. From 80d6cbb4cacc8b9375c56978ec17d032de3b2011 Mon Sep 17 00:00:00 2001 From: Fernando Marcheselli Date: Tue, 27 Jan 2015 17:59:56 -0800 Subject: [PATCH 3/3] init personal blog landing page --- fernando/index.html | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 fernando/index.html diff --git a/fernando/index.html b/fernando/index.html new file mode 100644 index 0000000..07ea747 --- /dev/null +++ b/fernando/index.html @@ -0,0 +1,6 @@ +--- +layout: posts_by_author +author: fernando +--- + +

Personal Home Page