PhotoSecrets adds “lightning load”

PhotoSecrets adds “lightning load”


By Andrew Hudson Published: December 6, 2013 Updated: June 27, 2016

Want to read Web pages immediately? Me too, so I’ve upgraded the PhotoSecrets website with coding I call “lightning load.” Now, each PhotoSecrets page appears on your browser almost instantly, as only one HTML file is required to layout all the text. On the test above, the load time was a mere 310ms — less than a third of a second.

One page to rule them all!

Usually, a Web page requires several files (for content, styling, images, fonts, etc.) to be downloaded before layout can occur. This can leave the browser blank for some time. So I rewrote my code to put all the necessary data into one file, to be viewed immediately, while the decorations (photos, icons, etc.) download later.

I spent several weeks writing the necessary PHP and JavaScript code to implement the following features:

Single HTML file

Only one pre-made HTML file is required to display a readable page. The file includes everything the browser needs to layout the text, leaving blank spaces for images. After page load, JavaScript is used to add all the visual decoration, such as images, custom fonts, icons, and maps. This minimizes the load time to the speed of sending one file over the Internet, or about 310ms on my recent test.

Embedded CSS

All the styling information (CSS) is included within the file (not as separate, linked files) so the browser can begin layout immediately, without waiting for additional files to be requested and received.

Dynamic styles

Because each page contains its own CSS styling, my PHP server includes only the styles used on the page, to help minimize the file size, and download time.

Deferred image loading

Images can slow down page layout, since the browser has to wait for the image files to be received before knowing their pixel dimensions. Instead, the “lightning load” file includes sized placeholders instead of images. So the browser can leave a blank space for initial load, then add the photos later. The placeholders are blank <sub> tags using the HTML5 data-* attributes, with sizing info in a class or style attribute. After page load, JavaScript converts the data-* attribute to an image tag, spurring the browser to download the image.

Deferred link and JavaScript loading

Like images, link tags and JavaScript can hold up page layout while they are processed. So the link tags (for the typeface and icons) and JS scripts are all at the end of the file, to be processed after page layout. For initial display, Web-safe fonts (mainly Helvetica Neue) and icons (unicode using the CSS :before selector) are used, replaced later via JavaScript.

Minimized and compressed code

By removing all the comments and whitespace, and using gzip compression, the file size is significantly reduced. My Paris page, for example, shrank from 207KB to 26KB — 13% of the original size. Thus, the Internet transmission (receive) time is similarly reduced.

Server-side cache

My location guides combine content from Wikipedia, Flickr and other sources. Pulling the data from each source can take the PHP code about 10 seconds to build a page, an eternity in Internet time. So all the pages are pre-built and served immediately, reducing 10 seconds to 0 seconds. This is done via WP Super Cache, which converts the dynamic PHP pages to static HTML files.

Related

Screenshot made from output from Pingdom. Lightning shot from Wikipedia/fir0002/flagstaffotos.com.au.

Next page: Yahoo eyes Imgur

Add Your Comment

Comment:

Name:

Email (optional):

Submit your comment: