Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by Ken Chung
Ken Chung
17,585 Points

I'm working on my portfolio, I'm having trouble with front-end performance and optimization.

Hi everyone,

I'm testing the performance of my website on google pagespeed insights. I have a lot of problems to fix, I don't know how to fix them, I read the documentation and I still don't understand what I have to do.

Please read: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkenchung1996.github.io%2Fp12-portfolio%2F

My portfolio: https://kenchung1996.github.io/p12-portfolio/

What does "Leverage Browser Caching" mean?

What does "Eliminate render-blocking JavaScript and CSS in above-the-fold content" mean?

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Nice and beautiful icons, Ken. May I know how do you detect if I scrolled to a particular section and give feedback to me? For example at the projects and skills section the fading effects and the navigation underline highlights. Could you share it with me?

Ken Chung
Ken Chung
17,585 Points

Hi Boonsuen,

Sorry, I'm not sure what you mean by underline highlights, I'm happy to give you share something with you.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Great. You can detect whereabout a user scroll to, for example when you go to the projects section from welcome section, the underline style of welcome goes down to portfolio. And also the fade in effect when I scroll down to new content.

1 Answer

Philip G
Philip G
14,600 Points

Hi Ken, there are some easy fixes to your problems, so let`s start!

Leverage browser caching

There are many ways to accomplish this, but the result should be a HTTP cache-control header. Assuming you use an Apache webserver you can fix this by adding these lines to your .htaccess file.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Well, here's a good tutorial about render blocking content. Esentially, you just have to move css and js which is needed after the initial rendering away from the header to needed place.

Best Regards, Philip

Ken Chung
Ken Chung
17,585 Points

Hi Philip,

This has been very helpful for me, thank you. However, I'm not using an Apache web server, I'm hosting my website straight from the GitHub servers, is there another way to fix leverage browser caching?

Philip G
Philip G
14,600 Points

According to https://help.github.com/articles/redirects-on-github-pages/

For the security of our users, GitHub Pages does not support customer server configuration files such as .htaccess or .conf

I suggest you to contact the GitHub support team, as they will surely be happy to help you. A temporary fix for php files would be to just add a header() directive to them. e.g.:

<?php header('Cache-Control "max-age=600, private, must-revalidate"'); ?>

If it is very urgent and you HAVE to accomplish caching, you could append .php to each file's name (css, js, ...) and then add the header code to it. However, I would sort of call this bad practice.

Hope I could help you! Do not hesitate to ask if there is something unclear! Best Regards, Philip