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.
- Single HTML file
- Embedded CSS
- Dynamic styles
- Deferred image loading
- Minimized and compressed code
- Server-side cache
Single HTML file
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.
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
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.
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.