100 points on pagespeed is not that hard with static sites.
- drop 99% of the JS (PWA, lazy-loading, infinite scroll, jquery, you don't need any of them for a webpage), convert the remaining for 1% to vanilla js and use it as progressive enhancement.
- use EM or % as layout width/height
- inline css, js, and svg
EDIT
- no webfonts!
The only thing that'll remain as an issue are tables wider, than viewport, on mobile.
Don't know about PWA. Service workers are pretty lightweight and help with caching.
But yeah, lazy-loading, infinite scroll, etc., are all designed to cover up design flaws that impact performance. I think lazy-loading can be potentially done right, but almost none of us do anything right.
> use EM or % as layout width/height
Why? EM/REM is good for handling font sizes, but for anything else it may not make sense and a custom font setting in the browser can break layouts if the size of boxes are based on font sizes. PX is perfectly adequate for layout, and is actually a relative unit(PX !== hardware pixel). Same for borders, padding, margin, etc. Even REM is better than EM for most cases. People who adjust the font size in their browser don't necessarily want their layout to change and potentially degrade as a result.
> inline css, js, and svg
Can be a good idea, especially if you can somehow identify the CSS used on page load and discard anything nonessential. Though maybe HTTP/2 makes inlining obsolete. IDK
> no webfonts!
Thank you! Web fonts are perfectly sufficient in 99% of cases.
> Why? EM/REM is good for handling font sizes, but for anything else it may not make sense and a custom font setting in the browser can break layouts if the size of boxes are based on font sizes. PX is perfectly adequate for layout, and is actually a relative unit(PX !== hardware pixel). Same for borders, padding, margin, etc. Even REM is better than EM for most cases. People who adjust the font size in their browser don't necessarily want their layout to change and potentially degrade as a result.
I had a lot of bad experience with px, but it is true that for borders it's the only reasonable choice.
REM is not that well supported, especially in awkward browsers (Dillo, for example).
Imo EM is nicer for padding/margin; it keeps the text/layout ratio even if the font is resized, unlike px.
But point taken, it cannot be used as the only unit.
- drop 99% of the JS (PWA, lazy-loading, infinite scroll, jquery, you don't need any of them for a webpage), convert the remaining for 1% to vanilla js and use it as progressive enhancement.
- use EM or % as layout width/height
- inline css, js, and svg
EDIT
- no webfonts!
The only thing that'll remain as an issue are tables wider, than viewport, on mobile.
My site: https://developers.google.com/speed/pagespeed/insights/?url=...