Compressing pages for better performance

 Compressing all my pages had the sixth biggest impact when speeding up my web pages.


I had not realized the importance of having a small initial size for a webpage to speed up page load times. The 'Lighthouse' tool showed this.


I simply run my JavaScript through 'JSMin' to remove comments and unnecessary whitespace. I compiled JSMin' from source - it is a very small C program.


I will probably run my JavaScript through 'UglifyJs' when I stop making changes to my webpages. I have to go to my library to use the online 'UglifyJs' so it is a bigger job.


I shorten 'id' and 'class' names in CSS using 'sed':


    tee scsstmp.html |

    sed -n -e '/style type=/,/<\/style>/s@[ ]*[.#]\([a-zA-Z][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_]*[a-zA-Z0-9_]\)[ ]*[{,:][^.#]*@:\1:@gp' | sed -e 's/::/:\n:/g' | sort -r | uniq | nl -v150 -n rz -w 3 | sed -n -e 's/^ *\([0-9][0-9]*\)\t:\([a-zA-Z][a-zA-Z0-9_]*\):/s;\2;Z\1;g/p' >scsstmp.lst

    sed -f scsstmp.lst scsstmp.html 


This shell script uses 'sed' to create a file of subsitutions and then runs them against the webpage.


Finally, I squash up all whitespace with a line cf shell script:


    tr '\n' ' ' <jtjsm.html | tr -s '[:space:]' >jtmm.html


I also removed old unused code to further reduce the page size.


There are more tips at: bbingo.xyz/t

Comments

Post a Comment

Popular posts from this blog

Steve Jobs quotes

 There are some good quotes from Steve Jobs at 'wikiquote.org'. Here are some:     - "I would trade all of my technology for an afternoon with Socrates",     - "Real artists ship",     - "Do you want to spend the rest of your life selling sugared water or do you want a chance to change the world?",     - "It's more fun to be a pirate than to join the Navy",     - "The only problem with Microsoft is they just have no taste",     - "We hired truly great people and gave them the room to do great work",     - "The management philosophy here really is to give people enough rope to hang themselves",     - "You've got to start with the customer experience and work backwards to the technology",     - "Nobody has tried to swallow us since I've been here. I think they are afraid how we would taste.",     - "It looks like it's from another planet. A good planet. A planet with bet...
Read more

Dark mode using 'invert' does not work on Firefox

 Implementing 'dark mode' with 'invert' on the 'html' tag does not seem to work on the old Firefox used in my local libraries. This version of Firefox does not invert the background. This Firefox just inverts the elements you add. The Firefox developers feel they are following the specification. Using 'invert' when there is an 'overlay' scrollbar on Chrome sometimes makes the scrollbar disappear. I am using the last version of Chrome on Windows7. I understand 'overlay' scrollbars have been removed from the latest versions of Chrome. Of course, a dark scrollbar on a black background does not make sense. So I would need to use 'color-scheme' to change the color of the scrollbar. But 'invert' does not work well with 'color-scheme'. I could not set the colour of this 'overlay' scrollbar with properties like '-webkit-scrollbar-thumb'.  So I am going to have to implement 'dark mode' by setting the...
Read more

Free quotes

 'wikiquote.org' has some good quotes with a Creative Commons license. 'brainyquote.com' has better quotes but they are only free to use for personal use. There are more tips at:  bbingo.xyz/t
Read more