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/
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.
– Anthony Accioly
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)..
– Anthony Accioly
@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?
– Hugo Borges
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.
– Guilherme Nascimento
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.
– Anthony Accioly