<em>How to speed up Portfolio page?</em> =)

[faramoond]

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.

[thelittleblacksmith]

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 your input, especially for accessibility. (Here’s an article about that.)
• sans-serif not sand-serif
• I know you’re using Bootstrap, and that’s probably why you’re using it, but in general try to avoid using important.

[faramoond]

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

[thelittleblacksmith]

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.

[faramoond]

Thank you once again!
Cheers!