JavaScript tips

 I set the 'character set' as soon as possible in my web pages. I had a comment before the line:     <meta charset="UTF-8"> The browser would find this line and go back to the top of the page and go through the comment again.

 I started by using an online HTML minifier at:     toptal.com/developers/html-minifier This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements. The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:       codebeautify.org/minify-html One way other minifiers give smaller output is by changing HTML entities to single UTF-8 characters. These characters appeared as weird characters until I saved the minified HTML with 'Notepad' with 'Save as' with the 'encoding' as 'UTF-8'. I then tried the minifier at:     10015.io/tools/html-minifier I noticed that this minifier also leaves out closing '</p>' tags for paragraphs. This causes my 15-year old browser to incorrectly show spacing between lines. However, this works f...

Adding an 'inert' attribute to the document body does not seem to speed up animations. The 'inert' attributes stops any interaction from the user. I thought animations started from 'view transitions' looked faster.  I noticed these transitions stop all user interaction. In fact, adding 'inert' does not seem to make much diference. My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down