Web optimization + query + tools / your thoughts on optimization

First off big thanks to P1xt and others who have given portfolio feed back and mentioned web optimization … hadnt thought much about this being new to creating a web page … so had a look today and yesterday to see what its all about and how to implement it.

Its turns out its not overly difficult to improve your web page … making it load quicker … and there is a lot of helpful tools out there that can help you and also test your page.

Here is a couple

  1. https://testmysite.thinkwithgoogle.com/

  2. https://validator.w3.org/ … validates your html

  3. https://jonassebastianohlsson.com/criticalpathcssgenerator/ … Very useful for sorting above the fold css usage

my practice portfolio … https://johnl3.github.io/portfolio/

Ok added the portfolio i am working on … so i can discuss what i did to improve the loading time and get some suggestions and thoughts on web optimization.

First will talk about what seemed to be the major issue for not getting a high score for one of the sections … if you look at my page you will see place holders with images of my pages scores before i optimized and after.
You will see i started with a score of 70 then got it to 73 and then to 95 … improvement started with moving jquery link and my main.js file to bottom of web page and out of the head … then i worked on something i only read about today called above the fold
This means having only the css for what your user screen shows … separate from the rest of your css … which sounds very tricky to do … but fortunately i found the above tool (last link) which sorted this out for me … means having a style tag in your head section with css and moving the css link that was there for my css down to the bottom of my page …
Now the biggest problem
i used font awesome for the hamburger … and that was the only icon i used … but the link to that site for the cnd package proved to be taking the longest time and was slowing everything else down

So any thoughts on using these if only requiring one or two or is there a better way of accessing them
Once i moved the link for the font awesome to the bottom of the page my low score 73 shot up to 95 so that was nice.

other that that i optimized images by using photoshops save for web option

will also be looking at above the fold for javascript and jquery.

web optimization makes you think before you add things to your page … do you really need it … will it affect load performance … at the end of the day i want a quick loading page.

What I want from a page i visit
I started thinking about what i want when i visit a webpage … and Number one top of the list is quick load time … if its not loading quick enough i close tab and go to another site … next is content … if it has what im looking for then i stay … after that i like a nice layout and a good strong font … but depending on how important the content is i can live with layout ond content being sub optimal … last and surprisingly something i never take into consideration is how the page looks … has it fancy backdrops or cool hover affects things like that.
And why is the last one surprising … probably because now im designing a web page it wrecked my head that i couldnt do fancy stylish webpage. So instead i opted to get a functioning page and worry about the aesthetics later.

What are your thoughts on web optimization … what have you done or used … and what is important to you when you visit a website

Edit not all plain sailing just noticed my above the fold style is affecting my hamburger display on full screen and showing it when it should be hidden … something ill have to look into

1 Like