Create a Facade for the search.

[Jieiku]

There are Facades for Vimeo and Youtube.

These load a clickable image, so instead of the entire video loading, it loads an image with a play button, once clicked the remaining javascript loads. This allow the initial page load to complete much quicker.

The same concept can probably be applied to the search. (Dont actually load the search index or search javascript until user clicks into the search box)

vimeo facade: https://github.com/slightlyoff/lite-vimeo

youtube facade: https://github.com/justinribeiro/lite-youtube

I have also not implemented the facade for vimeo or youtube in Abridge yet, I test them locally and they do work, but my local implementation was violating the CSP. (will revisit this eventually)

[Jieiku]

I have this half completed, the search related javascript does not get loaded until the user clicks into the search box. After clicking in the search box you can see that the javascript for the search is then downloaded. You can also start typing and see the search suggestions popup and even click to one of the results.

The half that is not completed is the results page, if you type something for your search and hit enter or click the search icon, then the results page does not load. The script for the results page is in the bundle, so as far as I can tell it should be working, so I am not sure what the problem is.

This code is currently on this branch: https://github.com/Jieiku/abridge/tree/search_facade

Here is a gif showing it in action:

I just need to figure out what is stopping the search results page, I am sure it is something simple but I have not yet figured it out.

Once completed this should significantly improve page load speed and scores, as well as save some bandwidth.

I would appreciate any help with this if somebody has a good amount of JavaScript experience. I am hopeful that I can figure it out given enough time, I have just been really busy lately.

Once the results page is fixed, the next thing to do would be to extend the facade, to indicate its loading (for very large sites with a huge index)

My idea is to display some kinda of loading indicator, maybe replace the spy glass search icon with a spinning loading icon until loading has finished, then change it back to a spy glass.

[Jieiku]

Figured it out, and it was something simple. I would previously use the window.onload event to bind the search function to the form submit event, when using a facade this event has already fired, the solution was to not wait for that event to bind the search function to the form id, instead I just add it as the last line in the javascript file.

Just need to do a bit more testing, also Zola does Not have the ability to bundle javascript files, essentially what this means is to make use of this facade you will need to issue a zola build followed by uglifyjs. If there is a clever way of getting around this I would love to hear it.

After a bit of testing on this I will work to implement tinysearch next, maybe it will eliminate some of these shortcomings since we would no longer be using elasticlunr.

[Jieiku]

This is now Completed, and you can see it live here: https://abridge.netlify.app/

The end result is that with the search related javascript removed the site became substantially lighter, only 2kb of JS on page load!

The index of the demo site is now 54 KB uncompressed instead of 328 KB uncompressed!

There is however a catch, the facade uses a bundle that has all js related to the search in a single js file, this ensures that the files are in the proper order and that once the facade downloads the file, the search is ready to use.

To generate this file requires extra steps which are outlined in the readme. If Zola ever adds the ability to bundle js files then this will become much easier. The Abridge demo handles this extra bundle step automatically with the included package.json and netlify.toml files.

https://github.com/Jieiku/abridge/blob/master/package.json

https://github.com/Jieiku/abridge/blob/master/netlify.toml