Technologist
Posted Jan 18, 2019
For those that may be curious about the technical details of this website I’ve created this page which should tell you everything you want to know about what went into it to make it what it is right now.
Once upon a time this site was Wordpress (For time constraint reasons only). Now it is not. I built it as a static website processed by a static site generator and I’m very happy with how this website performs now. On GTMetrix it’s scoring an A (100%) and an A (96%) scores loading in blazing fast 0.9s. On Google Page Speed Insights tool it’s scoring a perfect 100 for desktop users and 99 for mobile users. Pingdom’s Website speed test reports a fantastic score as well (587ms load time) despite a few false positive point deductions on the score.
“2 seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.” – Maile Ohye, Google
I work on a LOT of websites and I can tell you that some of the biggest performance hits you’ll see on websites are:
- Poor image optimization
- Poor infrastructure
- Google Maps
- Google Tag Manager (Cache duration)
- Google Analytics (Cache duration)
- Facebook Pixels
- Twitter embeds
This site avoids most of those pitfalls.
Current version
Backend:
- Static HTML (
PWA) - PHP (1 line for Markdown insertion on blog posts.)
- Javascript
- jQuery (Temporary dependancy)
Frontend:
- Materialize Framework (Self customized)
- Material Icons
Font Awesome 5 Icons(Replaced with SVG sprites)
Infrastructure
- Cloudflare (DNS+CDN)
- DigitalOcean (Self hosted VPS server)
- ServerPilot (Control panel for DigitalOcean)
- HeatShield (Firewall)
Extra Speed:
- LazySizes for LazyLoading
- CloudFlare for CDN caching
- Image Optimization with ImageOptim (Mac)
- Image Optimization with CodeKit (Mac)
- Prefetch and Prerender implementation
Extra Functionality:
- Simple Share Buttons
- Commenting with the Disqus comments plugin
- Google Analytics
- Google Tag Manager
- Structured Data
Bells and Whistles:
- Animate.css for CSS animations (Sass fork)
- Disqus for blog post commenting
Build tool(s)
As Leonardo Da Vinci said:
Art is never finished, only abandoned.
Coming soon
Custom build of Animate.css (Smaller)Custom build of Materialize's Sass (Smaller)Replace Font Awesome with SVG sprite sheets- Replace JPEGs with SVGs or WebP files
- Remove jQuery dependancy
- Code embeds with Codepen's Prefill Embeds (Docs)
- Implement loadCSS (Asynchronous CSS)
- Enhanced Structured Data
- Either Wow.js or ScrollReveal for some animation timing (TBD)
- AMP integration
- Make site a PWA