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

Asked

Viewed 742 times

22

My site has 10 sheets of styles (CSS) and 15 scripts (Javascript / jQuery), outside the images, this influences a lot in loading. In your opinion, what is the best way to make the site faster/lighter ?

javascript jquery css performance
  • 2

    Join all in one file (1 JS and 1 CSS), tablets and gzipados.

  • I already tried to do this, however, the site gets all bugged.

  • I was thinking of using Cloudflare, and caching the files.

  • In the case of Javascript passing the code by a linter (such as jslint or jshint) before minifying, this should solve the "buging".

  • Just one more thing: to compress JS, I recommend Closure Compiler or Uglifyjs. To compress CSS, I recommend the YUI compressor. Also visit Pagespeed and Gtmetrix to find out what to do to improve your site.

  • Thank you for your cooperation!

Show 1 more comment

3 answers

15

I will list the main practices that help in performance:

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

If you research on this, you will find many articles with tips to improve performance. I’ll leave the link to a page that 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.

  • how do I use this async attribute? Do you know any tools to help create sprites?

  • For sprites, there are online tools like this: http://www.spritecow.com. Upload and then just click on the image you want and it gives you the CSS. The async, just add in the script tag, example: <script type="text/javascript" src="arquivo.js" async></script>.

  • Thank you! and this ASYNC???

  • I edited the previous comment talking about async, sorry.

  • Thanks! I use the JS after the TAG </body> amid </body> and </html> is wrong?

  • It is recommended to put before closing </body>.

  • Thank you Lucas!!!!!

  • Lucas, this Tinypng only decreases the bit intensity. from 32 to 8, this I can do in photoshop.

Show 3 more comments

5

The implementation of the HTTP protocol has a deficiency that for each file the browser needs to open the connection, download and then close it. In the new HTTP 2.0, which should take a while to launch, this will be fixed: the browser will keep the connection active while the tab is open (source).

In your case your site is creating a new connection to the server at least 26 times. Joining Csss and Javascripts, even without any minification / compression, would decrease the load time because of this. If your site got bugged after you tried to join them might be bug the tool you used. Try using another or even doing it manually to check the result.

About what @Lucas said about using JS for the bottom of the page and using the attribute async it is necessary to take some care:

  • Probably among the Javascripts you have, some are dependent on others. For example, many depend on jQuery. In this case you nay must use async, because the browser may be trying to load other jQuery-dependent scripts (for example), before jQuery itself.

  • Playing Javascipt pro final also doesn’t work if you have Javascript inline on your page that depend on scripts that will only be loaded at the bottom of the page. (One solution for this is to use unobtrusive Javascript).

  • The same care should be taken when minifying scripts, either automatically or manually: the correct order must be respected.

To check out almost everything you can do to improve a website’s performance, check out: How to lose weight in the browser

Be sure to also check the extension Pagespeed from Google for Chrome and Firefox. She does an analysis of the client side of its application trying to identify performance problems and pointing out solutions.

  • I did it manually, through adobe Dreamweaver, but it didn’t work. I’ll look at the tools the other members have indicated to see how you do.

  • @Alexandrelopes I updated the answer. If you don’t mind, posting the code always helps.

  • Yes @user3153542 I had already done this and gave problem, then I saw a few days ago looking that have to keep order, IE, if my page has jQuery script, first have to come to jQuery bookstore, and then plugins, if it doesn’t work.

  • @Alexandrelopes Being so we need more information to know why it is getting buggy. Which libraries are you using? Firefox or Chrome console shows an error?

  • Chrome console is normal. I’m using jQuery. I think you must have been bugged because I don’t think I did it in order, I’ll try to do it in the same order that it is, I think it’ll work. D

2

An idea that helped me a lot was to install the extension google pagespeed in Chrome and use it to identify low performance points; with this I got a gain of almost 70% in the load of some pages.

Another method I used (suggested by pagespeed) was to load ". js" asynchronously through a function on the page; that way I can block the active elements or delay the js part until all libraries are available.

Browser other questions tagged javascript jquery css performance

You are not signed in. Login or sign up in order to post.