Earth Notes: On Website Technicals
Read my nitty-gritty tech updates and daily learnings while keeping the Earth Notes site up and running; site stats also.
These notes will be updated intermittently, usually when I should be doing something else!
These notes are all about the interesting (and mundane) behind-the-scenes tech bits and bobs to grow and optimise this site, including purely technical measures such as speed, but also user experience beyond just adding new articles and updating existing ones.
Please try the useful tools, reasonably recently used and re-used by me, and encountered while writing these entries, listed under
Sources and Links.
The Sources and Links section of each of the site notes pages lists interesting and/or useful resources encountered, even if not directly used for the site.
Also please take a look at the simple automatically-updated
site stats below.
I welcome feedback on any of the issues that I have discussed. I share this stuff because it's interesting and because writing it here may save someone else some unnecessary head-scratching! No longer do we need to really
know anything technical, nor own a shelf full of reference books (so '90s!), we just need to be able to compose queries for our favourite search engines!
The newest pages are at the top of this list, and the newest items are at the top of each linked page. Enjoy!
Notes On Site Technicals: Index # 15: 2018/08: PWA revisited, auto lazy loading, jumpy AutoAds, more content pyramid. # 14: 2018/07: warming up to HTTP/2 and Brotli and HTTPS and the rest!. # 13: 2018/06: creating a skim-friendly content pyramid, after the GDPR-calypse. # 12: 2018/05: CSS box-shadow performance for mobile, dns-prefetch fail, micro-optimisations, GDPR. # 11: 2018/04: read time, lighter heroes, jpegtran, jpegrescan, jpegultrascan, no lite ads, Primitive, SuppressDescription, SVG, Save-Data HTML, Sitebulb. # 10: 2018/03: Auto Ad imbalance, incremental build, readability, tags, ad borders, TechArticle and Report, SoftwareSourceCode. # 9: 2018/02: Bing head, a saved byte, boxed cols and rounded corners, Google AdSense Auto Ads. # 8: 2018/01: PSNR lo-fi PNG autogeneration, page media, secondary image, client hints. # 7: 2017/12: too little markup, bad traffic, big hero, base download ms, service worker no rel, jump-to. # 6: 2017/11: Googlebot warp space, image re-optimisation, even liter, defer, inlining, video. # 5: 2017/10: rounded corners, mobile usability, HTTP/2 vs mobile, bad bot, UnCSS tweaks, latency, unit tests, visuals, Save-Data header, lite vs mobile. # 4: 2017/09: ImageMagick 20 years, Brew, autogen banners, old eyes, optimised ads, mobile traffic, brotli, doctype, JPEG fun, purifycss, UnCSS, OnDemand. # 3: 2017/08: Atom sitemaps (un)pending, Googlebot bandwidth, HTML improvements, regex big beast hunting, heroes, Cache-Control, restart drill, minifying. # 2: 2017/07: ad injection, meta, static precompression, zopfli, HTTP/head response overhead diet, Bing Webmaster Tools, FeedValidator, Share42, utf-8. # 1: 2017/06: CDN revoked, structured data, 10 years old, XML sitemap at long last and lastmod, HTML5 conformance, PageSpeed. Stats
Stats updated: 2018-08-19T06:42Z
Stat Value Fraction bot hits 0.556 Fraction GET 200s 0.885 Fraction GET 206s 0.001 Fraction GET 301s 0.035 Fraction GET 304s 0.024 Fraction GET 403s 0.009 Fraction GET 404s 0.030 Fraction GETs 0.984 Fraction human main-page GET 200s 0.097 Fraction human m/(m+www) main-page GET 200s 0.091 Fraction m/(m+www) site hits 0.086 Mean human m main-page transfer bytes 16569 Mean human www main-page transfer bytes 15876 Mean m transfer bytes 8805 Mean www transfer bytes 21915 Unique human IPs/day equivalent 112 Sources and Links Accessibility According To Actual People With Disabilities: this site's two main sins would seem to be walls of text and black-on-white; let's not talk about my long-sentence habit. Optimising a website for users with anxiety. Share42.com social sharing buttons: lightweight and non-tracking. Google's Webmaster Central Help Forum. Feed (eg Atom) validation and W3C's tool. Google's Structured Data Testing Tool. Optimizing the Critical Rendering Path. WebPagetest for site performance testing. PageSpeed Insights from Google, which will provide compressed/minified versions of assets, as well as reporting what should be fixed/optimised. See also for speed/performance testing: Test My Site With Google, Pingdom Website Speed Test, GTMetrix, MachMetrics which helped me quickly see where some fat (~30% of page weight) needed trimming, dotcom-monitor, Akamai Mobitest, Geek Flare, Page Weight. Nibbler: a free tool for testing websites across a number of aspects. Screaming Frog SEO Spider: "The SEO Spider is a desktop program you can install locally on PC, Mac or Linux which crawls websites’ links, images, CSS, script and apps to evaluate onsite SEO." SEO Web Page Analyzer with interesting point about value of link anchor text (eg when read out by screen reader) to be able to decide to follow the link or not. Alleged 8 major Google ranking signals in 2017 and Google's 9 major ranking signals and Google’s 200 Ranking Factors: The Complete List: things to get right to have visitors actually come and read the content! Check My Links Chrome extension to validate links from the current page. CSS minification online at cssminifier.com, and the excellent comand-line (node.js) clean-css. HTML minification at htmlcompressor.com: gives me courage to know what I can safely tune myself! Also see the Google-recommended Kangax HTMLMinifier; this tool in its command-line version is now used in generation of this site. UnCCS and purifycss static analysis tools to allow trimming of unused CCS, per-page. Progressive JPEGs and green Martians: smart use of progressive JPEG scan scripts. Image compression online with TinyPNG (JPEGs and PNGs) or off-line (including losslessly) with zopflipng (or OptiPNG) for PNGs, and jpegtran for JPEGs. ClipChamp online video compression. ImageMagick portable command-line image processing suite. W3C Validator and HTML outliner. CSS validator, including embedded in an HTML page. TagCrowd, Wordclouds: create custom word clouds from, eg, your Web own page. Normalise characters in response to a W3C validation warning "Text run is not in Unicode Normalization Form C" with FileFormat.info. Pixabay for some handy images: thanks! Website Dimensions, Best Practices. Blocking robots on your web page – the list of 1800 bad bots. TinEye reverse image search.