javascript – How to improve the performance of static files on a website?

Question:

My site has 10 style sheets (CSS) and 15 scripts (JavaScript / jQuery), apart from images, this influences a lot on loading. In your opinion, what is the best way to make the site faster/lighter?

Answer:

I will list the main practices that help performance:

  • Join JS in 1 file and CSS in 1 file, both minified. There are online tools for this, for example Javascript Minifier and CSS Minifier .
  • If the server allows it, use gzip/deflate, so it sends the compressed files. Here is a tutorial article.
  • Put CSS at the <head> and JS at the end, just before closing the </body> .
  • Consider using the async (asynchronous) attribute in the JS load. Causes file loading to occur along with page rendering.
  • Optimize the images. Part of an image's size is metadata, which makes no difference to a webpage. There are online tools that do this like TinyPNG and JPEG Mini .
  • Use CSS Sprites. That is, merge all the images into one and use CSS to position them via the background-image and background-position properties. There are also online tools for this, such as Sprite Cow .

If you search about it, you will find many articles with tips to improve performance. I'll leave the link to a page I like: it's called How to lose weight in the browser . It has a summary of the main practices, made by developers of large web pages.

Scroll to Top