doubt about performance

Asked

Viewed 52 times

-1

I’m riding a little Framework of design CSS and JS to standardize the system I’m working on.

My doubt is how to get the best performance.

I’ve done several things like enable the cache, organize the code and etc...

But the browsers on average make 6 requests at a time to the server. So I thought I’d put all the CSS and JS in 2 files. And then make the minified version of them.

So the system makes only 2 requests and loads all the CSS and JS into the cache.

Should I do so, or create multiple CSS and JS?

javascript css
  • 1

    Hi Hugo, this is a very interesting question but difficult to answer objectively... I think the best structure will depend on various factors like how often you will update the CSS / JS and whether the update areas can be grouped together. We also have HTTP/2 gaining strength. HTTP/2 greatly relieves the cost of simultaneous requests; it already exists articles recommending the use of separate files.

  • 1

    Minimizing resources is a good idea, and minimize the number of requests is certainly important from the point of view of performance. What you want to do is minimize the number of requests -> maximize the number of cache hits -> minimize latency (e.g., with a CDN) -> do not serve unnecessary Javascript / CSS (functions and styles not used on the current page)..

  • @Anthonyaccioly the JS and CSS will not be updated, I will load everything in the browser cache. So whenever I need a class or function it will be in the cache. That’s my idea. I’m doing some tests like this and the system is loading the page about 2 seconds. When I clear the cache it takes up to 4 positivize them have to load all over again. What do you think?

  • 1

    Merging into a file is just a small solution, see if this helps you: http://answall.com/a/169657/3635, I still need to add more details, but as soon as you give notice.

  • Hi @Hugoborges, it is complicated to tell you if this "is good" without knowing the specifics of the site and the test. That said, Chrome’s Developer Tools can give you a good overview of how this time is being spent and whether JS and CSS files are impacting load time. Usually loose images are the main bottleneck, and again, there are solutions to group images into sprites who join the same tram as the above grouping solutions. Good practices today that are not necessarily/will be good practices in HTTP/2.

1 answer

1

Merge and Minify

Extremely recommended to join Css and JS as little as possible. Browsers can make 6-8 requests per second, the more files you have, the block you download.

After joining CSS’s and JS’s recommend minificar it, on sites like:

https://cssminifier.com/

https://jscompress.com/

NOTE: Merging the jquery file with other files can happen problems, if it happens, put jquery by CDN;

NOTE²: When you can’t join files think about CDN, they are always a great way to load files.

Of course there are tools to automate these processes.

Compress Gzip

If using the OSI http://www.andrecarlucci.com/dev/como-habilitar-compressao-gzip-no-iis/ Otherwise browse as "Enable Gzip Header Compression"

Image size.

Always check the size of the images, usually they can be the big villain. I’ve seen sites with images in the 900kb house.

Use a test tool Finally, the best thing is to use some tool to test performance and see if you hear better and what’s left to do, Chrome itself has great tools. If you want to recommend a simple and effective https://developers.google.com/speed/pagespeed/insights/

Browser other questions tagged javascript css

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