Making my site FAST

2020-03-30 21:42

My site is created using a tool I started and on which I have put a ton of effort over the last 10 years or so, called Nikola, which is a static site generator (SSG).

One of the selling points of SSGs is that the produced sites are fast and I have always taken care to check, every once in a while, that my site was fast ... but not lately. And when I checked on Google PageSpeed Insights I was horrified to see it scoring 20 points out of 100.

So, I started to see what the heck had happened.

Google PageSpeed HATES Youtube

Each embedded video is seen as 4MB of blocking things loading and making your page suck.

Solution: defer loading them using https://github.com/groupboard/ytdefer

Bundling things still works

It has been years since it was promised that bundling multiple CSS files into a large one or merging multiple JS files into a single script would not be worth it.

Well, according to PageSpeed, it's still worth it. Luckily Nikola has good support for it, so I made sure EVERYTHING was bundled. That also involved getting some things off CDNs and into my assets folder:

prismjs
jquery

Google fonts are SLOW

Like, 400ms for two fonts. So, you can self-host them using https://google-webfonts-helper.herokuapp.com/fonts

Also:

use font-display: swap
preload the fonts using something like <link rel="preload" href="/assets/fonts/pt-serif-v11-latin-regular.woff2" as="font">

Check CSS for `@import`

Even after bundling them, if a CSS file uses @import that will still be a separate request.

Check compression and caching

Make sure your web server is doing the right things there.

Remove useless stuff

I was loading font-awesome for ONE ICON. There, gone.

Did it work?

Now the score hovers around 96 to 98 so, yes it did. And indeed the page feels very, very snappy.

New Nikola Plugin: rst code blocks using prism.js

2020-03-29 15:59

I have been writing some of my posts using Markdown lately. And not even plain old Python Markdown, but misaka which is an alternative implementation based on Hoedown

So, I noticed that those markdown files had no syntax highlighting! I looked and Misaka does offer something to "highlight things". Here is what it does:

<pre>
<code class="language-python">
def f():
    pass
</code>
</pre>

No classes in the elements, no nothing, just a class in the code element! It turns out that is the recommended way to indicate you are showing code:

There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.

So, I looked for how to actually display those things nicely, and found prismjs.com which looked very nice!

So nice, indeed, that now I hated how my reStructured Text Pages looked!

Therefore, I wrote a new Nikola plugin that replaces docutils' code directive and replaces it with a much simpler one that just tags things as code of a given language and lets prism do the rest.

AFAICS it's functionally equivalent, it supports the :linenos: option, including shifted line numbers.

I doubt anyone ever will want to use it but hey, there it is.

Quick Nikola Feature: document APIs using pdoc

2018-09-25 18:31

A user asked in the nikola-discuss if there was a way to use Nikola to document APIs. Well, there wasn't and now there is. I took pdoc and wrote a wrapper as a plugin for Nikola.

And now you can just document python modules using it in a couple of minutes.

Here is the documentation for the re module from stdlib as an example.

Yes, the output is not great, and it needs CSS, and many other fixes, but it's easy to improve now that it's there, as long as there is interest.

Changes in this blog

2017-07-09 16:42

I have made a few changes in how this blog is generated and what features are enabled.

Similarity Plugin

I have enabled the similarity plugin and disabled the equivalent feature provided by Disqus. In general, it seems this plugin produces more whimsical connections which is a big plus. It may lead you to discover very random things I wrote. I know it reminded me of things I did not remember writing!

Continuous Import

I have enabled the continuous import plugin which will automatically merge some other aspects of my online presence with this blog. Currently it has support for goodreads (which I already mentioned before) and youtube (which I have not), so you will see short book reviews and random videos I make.

Examples: goodreads and youtube

This plugin can theoretically support anything that provides a RSS/Atom feed and lets you apply custom templates to the content so you end up with pretty posts in all cases. If you are interested in using it for some other service, feel free to ask me about it.

Front Page

For the first time ever, the front page of this site is no longer the blog, but a landing page.

Tipue Search

Using the localsearch plugin which was already in place before this site had to be rebuilt from backups and random scraps found online, I have the nice search form you see above, which doesn't rely on any 3rd party services, and looks IMHO very nice.

Theme

At some point in the future I may switch to a more customized theme, but that's not in any specific roadmap, it will happen when it happens. In the meantime, this is now using the Lumen bootswatch and am experimenting with using FlowType for a more readable automatic font size.

Nikola v7 finally out!

2014-05-16 18:14

I am thrilled to announce version 7 of Nikola, a static site and blog generator is out, with a bazillion features and bugfixes (see below).

You can get it at all the usual places, and here's the release announcement

Here's the new features, the bugfixes list would make the post too long :-)

Added UNSLUGIFY_TITLES option for making titles fetched via the filename regexp prettier (Issue #1282)
New dependencies: natsort (natural sorting in galleries) and dateutil (replaces pytz)
Nikola.commands are now the user-friendly wrappers from console (Issue #1177)
Add a github_deploy command to deploy to GitHub pages (Issue #1208)
Remove tidy filter (it was broken due to tidy being ancient) (Issue #1164)
Added GENERATE_RSS setting to allow disabling RSS in Nikola (Issue #1236)
Link listings raw sources if COPY_SOURCES is True (Issue #1214)
Much more powerful nikola plugin command (Issue #1189)
More powerful console mode allows access to all nikola commands (Issue #830)
New `ROBOTS_EXCLUSIONS` option listing resources to exclude from sitemap and include in new generated /robots.txt (Issue #804)
Generate sitemapindex containing RSS and sitemap files (Issue #804)
Support hooks in templates, for use by plugins (Issue #896)
Use readline if available (Issue #1238)
Replaced READ_MORE_LINK with INDEX_READ_MORE_LINK and RSS_READ_MORE_LINK (Issue #1222)
Added reading_time, remaining_reading_time, paragraph_count, remaining_paragraph_count tags for READ_MORE_LINK (Issue #1220)
Add canonical link in listings.
Added support for new meta files that are the same format as 1-file metadata, allowing for greater flexibility (Issue #954)
Colorbox is now internationalized (Issue #1205)
Added LOGO_URL and SHOW_BLOG_TITLE=True settings to facilitate showing off logos (Issue #1122)
Create automatic story index pages for subfolders, too (Issue #793)
New Slovak translation by Tomáš Prékop
Created a MarkdownExtension plugin class (Issue #1175)
The base theme produces properly sectioned and semantic HTML5 (Issues #1123, #1137)
The base theme comes with a new stylish look by default (Issue #1137)
The base theme supports Right-to-Left by using ::dir(rtl) CSS4 rules and <html dir="rtl"> tags where valid (Issue #1146)
Bootstrap 2 updated to 2.3.2 (via Issue #1137)
Added FORCE_ISO8601 setting that currently makes new_post use ISO 8601 dates (via Issue #1156)
Added support for TZ specified in post date (Issue #1118)
Make nikola init ask about the site’s settings (Issue #1080)
Use natural sorting for files and folders list in listings and galleries (Issue #1144)
Added invariance testing (Issue #672)
Plugins can inject templates in the system (Issue #1139)
nikola import_wordpress now has a --qtranslate option, to parse posts in the qtranslate wordpress plugin format and turn them into multilingual Nikola posts (Issue #1072)
nikola console allows for interpreter choice via -b, -i, -p; moreover, support for bpython is not deprecated anymore (Issue #1126)
retired tag for posts has been replaced with private (via Issue #686)
Changed the default TRANSLATIONS_PATTERN to "{path}.{lang}.{ext}". (Issues #990, #829)
Backwards compatibility with v5 is broken. Added backwards-incompatible changes. (Issue #829)
Added a CONTENT_FOOTER_FORMATS config option. It is used to format the CONTENT_FOOTER variable properly, for compatibility with the Translatable Settings feature. The variable takes a dict, the keys of which are languages, and values are (args, kwargs). (Issue #1112)
Certain settings are now translatable. As of now, the settings are: BLOG_AUTHOR, BLOG_TITLE, BLOG_DESCRIPTION, LICENSE, CONTENT_FOOTER, SOCIAL_BUTTONS_CODE, SEARCH_FORM, BODY_END, EXTRA_HEAD_DATA, NAVIGATION_LINKS, READ_MORE_LINK (the up-to-date list is available in SITE.TRANSLATABLE_SETTINGS) (Issues #851, #1057, #1061, #1112)
New Post.author() returns meta 'author' or BLOG_AUTHOR (Issue #1117)
Ship base-jinja, bootstrap-jinja, bootstrap3-jinja with Nikola (Issue #1104)
Invert HIDE_SOURCELINK and HIDE_UNTRANSLATED_POSTS into SHOW_SOURCELINK and SHOW_UNTRANSLATED_POSTS (Issue #1076)
Remove old messages left over for backwards compatibility: (Issues #829, #1105)
- "More posts about", replaced by "More posts about %s"
- "Posted", replaced by "Posted:"
- "Also available in", replaced by "Also available in:"
Remove old "sl_SI", "tr_TR" locale aliases (use "sl" and "tr") (Issue #829, #1105)
New option RSS_PLAIN to optionally strip HTML from RSS feeds (Issue #1107)
Support content key in compilers' create_post (Issue #1098)
Use setuptools’ extras feature. Use pip install nikola[extras] to install Nikola with extras (requirements-extras.txt, formerly requirements-full.txt -- note the name change!) (Issue #1089)

Ralsina.Me — El sitio web de Roberto Alsina

Publicaciones sobre nikola (publicaciones antiguas, página 18)

Making my site FAST

Google PageSpeed HATES Youtube

Bundling things still works

Google fonts are SLOW

Check CSS for `@import`

Check compression and caching

Remove useless stuff

Did it work?

New Nikola Plugin: rst code blocks using prism.js

Quick Nikola Feature: document APIs using pdoc

Changes in this blog

Similarity Plugin

Continuous Import

Front Page

Tipue Search

Theme

Nikola v7 finally out!

Ralsina.Me — El sitio web de Roberto Alsina

Google PageSpeed HATES Youtube

Bundling things still works

Google fonts are SLOW

Check CSS for @import

Check compression and caching

Remove useless stuff

Did it work?

Similarity Plugin

Continuous Import

Front Page

Tipue Search

Theme

Check CSS for `@import`