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

HTML

Posted by Santosh Kumar
Santosh Kumar
796 Points

Any performance impacts of using google Apis for font

For a website that requires very good performance, Is it recommended to use external fonts by tying the URL in the code. Like for example, <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic' rel='stylesheet' type='text/css'>.. I have also seen examples of javascript files (.js) being used in similar manner. Do such imports of styles, scripts, images etc.. have any performance impacts ?

2 Answers

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hey Santosh!

Using fonts on the Google API will technically make your website take longer to load as it needs to pull in the font from Google. However, it is nothing to worry about as internet speeds are so fast that the difference can't be noticed. When you are selecting your fonts Google will actually tell you how long they will take to load.

As for images, these could impact the loading times of your website by quite a bit depending on the file size. If you are trying to load a very high resolution image with a big file size then it will certainly take a longer time than the same image if it was optimised for the web. To optimise an image for the web you will need to find the perfect balance between file size and image quality!

Scrips, like images and fonts, will also slow your page down as they need to be loaded. Scrips are always placed towards the latter end of .html files for this exact reason. The reason they are placed at the bottom is so that the page can load and be viewed by the user first and then the .js files will be loaded after.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Do such imports of styles, scripts, images etc.. have any performance impacts

Yes significant ones, every HTTP request takes time. That's why icon fonts, data-uris, sprites and script concatenation are all best practices.

  • Only use one or 2 font files per page
  • Combine javascript & css files
  • Combine small images into a sprite or use an icon font
  • Use smushit to keep image size down
  • Keep overall page size below 1 meg