Hi, everyone!
Iām a very beginner and I made my first page.
I would like to have some advices about how to speed up my Portfolio and websites in general on front-end side.
Webtool like this tells:
Combine external JavaScript
Leverage browser caching
I understand that it refers to FCC part too, but still, mb somebody can give some advice or tell where to read about it. Because, I am a bit confused after intense googling without proper background.
Of course, some code review, any suggestions about design, functionality, fonts, whatever would be awesome.
Combine external JavaScript
Probably just means putting all your JS files into one single file, so thereās only one request for it.
Leverage browser caching
Hereās something from Google about this: Leverage Browser Caching | PageSpeed Insights | Google for Developers
You can do this via .htaccess according to this SitePoint article. From what I gather you can also do this with your CSS/JS files by doing style.css?ver=1.00
? Iām not 100% sure about this though.
The actual PageSpeed test is pretty helpful because it gives you links to documentation (and optimized image assets) if you donāt pass their standards. Put in your favourite blog or something to see the full list of what they test on.
Comments about your portfolio:
- The colours are really nice! Make that hire button stand out more though, I didnāt notice it until the second time around.
- I noticed that your scroll animation was a bit slow? Thereās a visible pause between when the items appear so maybe speed that up a bit. (I should note that I didnāt use your anchor links, I just scrolled straight down.)
- Give more space between/around your portfolio items, especially since youāre embedding pens. Iād love to avoid the embeds while scrolling down so I donāt have to scroll through the embeds first before the whole page.
- Your layout functions really well on a larger screen!
- Donāt forget your
label
for yourinput
, especially for accessibility. (Hereās an article about that.) sans-serif
notsand-serif
- I know youāre using Bootstrap, and thatās probably why youāre using it, but in general try to avoid using
important
.
Thanks a lot for your review!
I read that Google article, even Iāve added expires tag.
About Combine JS/CSS I understood in the same way, but as I use codepen with links to external libraries it seems impossible. The only thing that comes to my mind is to ācut-offā things that i need from bootstrap and jquery and put them in one file, upload it somewhere and link to it.
Especially thanks for āsand-serifā , it is just a typo.
Yeah, about embeds youāre absolutely rightā¦ You know, i just wanted to make it bigger for visibility. Once again, thank you a lot, for your review and links!
Youāre my first code reviewer. Iām really thrilled
You can always host your projects on GitHub then use something like http://rawgit.com/ to show it off to people. Youād probably get a more accurate speed test this way.
Thank you once again!
Cheers!