No one using WebPack for this? I haven't used it myself but I came across this 15 min. video where @glenmaddern shows how webpack can help you improve the loadtime of your website.

He had really cool results is his example

You have to show the site(code even better). There can be lots of factors. And by the way your sites will always be slow for people like us living in mainland China.

For me,

1. Minified or Gzip your CSS and Javascript files.

2. Don't use too much animation. For example, CSS3 Animation or Scroll Reveal

3. If you are encouraged to apply the 2nd point, especially for the scroll reveal, use a preloader. Scroll reveal won't work beautifully when your website is loading the assets as users will scroll down along your website before all the assets are loaded.

4. Don't use too much images. I recommend you to use images that are only important and relevant to your website.

5. If you can't fulfill the 3rd point, then reduce your images size as much as possible without losing the quality of the images. Most of high quality images on the internet has huge size (i.e. 5MB). However, if the size reducing affects the image quality but you feel that the image is good enough to look, then go with it. This tricks works well for me.

6. Ensure that you use all classes in your CSS files. If there are classes you didn't use, eliminate them. This point comes out a lot when you use a CSS framework. CSS framework contains many sets of classes that you probably won't use all of them. CSS framework like Bootstrap offers you to customize what components do you want to use on your website.

Good Luck :)

I am using:

1. Firefox dev tools to check what exactly I am downloading and how fast,
2. My brain to think 10 times before doing any actions
3. And ignoring everything around me telling me what to do and how.

The key to optimization is starting small and using only what is needed - no more, no less

Optimization has 3 steps:

1. Optimization of code itself
2. Server
3. Frontend

Optimization of code itself

1. Never use any frameworks or libraries, start small, add abstraction when needed
2. Time-to-time do refactoring of components
3. Sometimes you need to review and refactor the whole architecture itself

Server optimization

1. PHP7 which is ten times faster then PHP5
2. MySQL 5.7 which is x3 faster then MySQL 5.6 and brings NoSQL and JSON support
3. HTTPS, HTTP2, nginx, gzip
4. Caching whenever really required
5. Since PHP5 you can easily spawn multiple PHP processes from terminal like nodejs and you can use sockets in PHP, there is no need of nodejs, however, in some cases it is good to combine technologies together

Frontend optimization

1. For CSS - I am using my own architecture based on Bootstrap 4 SASS, BEM and ITCSS. I have a huge app.scss with a lot of small imports, I have full control of what I need and I am including only the styles really used, the architecture of CSS itself also helps to re-use a lot of styles
2. For HTML - avoid extra semantics, tags and child elements whenever possible, If you can just do <gallery> <img> <img> ... </gallery> then do it without any wrappers. I am also minifiying HTML into 1 line without tabs, extra spaces on the server
3. For JS - I am using vanilla JS, bundling it with Rollup.js like SASS into one app.js
4. For all icons I am using custom SVG sprite system, all used icons on page are inlined into HTML, in some cases you can give user away one more file to donwload - spites.svg
5. Everything is minified, gzipped, only 1 one small CSS file and only 1 small JS file
6. Client-side caching when needed using localStorage or IndexedDB
7. My index page has it's own index.js and index.css and in some cases inlined styles, scripts to get the maximum first page load speed.
8. Images are smaller and only in dimensions really needed. I'm still fighting this part myself since I usually have a lot of big images to be loaded

And last the most important one - whenever possible just compile a static html file

There is no magic in optimization - just think, DRY and stop following what is cool, popular, and don't let anyone tell you what to do.

In my current project load time is x3 faster then apple.com and x5 faster then Angular2 docs. My CSS and JS is x5-x20 times smaller then avarage app I see today.

Everyone's already covered the most important steps, so I'll add one that I don't see very often: Inlining above-the-fold CSS.

It's not super important because I don't think it usually has a huge impact, but it makes your initial CSS load noticeably faster.

A basic how-to: Determine which parts of your CSS affect your initial above-the-fold layout/content. Take those parts out of your CSS file (which should be concatenated and minified) and put them inline in your HTML. This should be a very small amount of CSS, otherwise the affect will be negligible. For even better performance, load the rest of your CSS asynchronously.

I don't know how widely this is used, but I first learned about it from Google PageSpeed Insights, so I assume it's at least fairly well known. I guess no one likes to talk about it. More detailed info here.

Follow-up question: Do you ever inline your CSS?

There are a lot of nice advices here already. So let's just add one thing: client side caching. If you can give unique names to your assets, that changes whenever the content change (like a hash of the file), you can "heavy" cache those assets in the client.

Since clients will (probably?) not be fetching the assets again, the application gets really fast. It really makes a HUGE difference.

If you cannot give them unique names like that, you can still leverage "light" caching. So the clients will still request the files, but if they're not changed they will get a 304 (Not Modified) HTTP response, saying they can use the old copy.

The client caching is controlled by HTTP headers sent with the response. You will probably need to configure your server to send those. It can be tested in chrome developer tools (make sure "disable cache" option is disabled for this).

Just like other errors, it is easy to miss out on asset optimisations if you don't have tests or monitors for them.

Monitoring solutions like New Relic provide you high level insights on scopes for further optimizations. You may be particularly interested in their Data transmission analysis and load timing analysis with time segmentation.

Yslow is another free and very popular solution which analyses pages and grades them based on Yahoo!'s rules for high performance web sites.

For larger sites with hundreds of pages, if you really need to squeeze out performance, you will have to augment your integration tests and acceptance tests with automated performance threshold verification. One of the best ways to do so is through HAR log analysis.

Most modern test automation solutions for web applications (including PhantomJS and Selenium through BrowserMob proxy) provide a way to generate HTTP Archive logs (HAR logs) which contain complete information about the browser's interaction with the server over time - including requests made, time taken to serve them, their sizes, and optionally the entire content of each request body.

From wikipedia:

The HTTP Archive format or HAR, is a JSON-formatted archive file format for logging of a web browser's interaction with a site. The common extension for these files is .har.

The specification for the HTTP Archive (HAR) format defines an archival format for HTTP transactions that can be used by a web browser to export detailed performance data about web pages it loads. The specification for this format is produced by the Web Performance Working Group[1] of the World Wide Web Consortium (W3C). The specification is in draft form and is a work in progress.

Chrome network tab has a "Save as HAR with content" option which is very helpful when writing the test cases and for manual inspection. For visualizing saved archives, this chrome extension comes handy.

First of all you have to concatenate and compile the css and js, another nice solution is to make use of a cdn to the static files, like for example AS3, or something similar. Another solution is to make some request or queries get cached and make served more fast, or incluse the entire html.

yslow will tell you why a site is slow.

There are also many great tutorials out there about browser painting and reflow:

https://youtu.be/FY5iiuQRyEE?t=11m23s

I refer you to the chrome dev console - it allows you to see exactly how long it takes to fetch & load content into the DOM. Extremely useful. Below are a few things I know about, and I have made a couple of assumptions (don't shoot me haha).

Photoshop is a great image compressor to test on quality & also never include images with resolutions bigger than you actually need. Most of the time, large images will be a max of 1920x1080.

With js files, compress, minify & gzip if you can.

For general project compression have a look at Rollup. It does a load of optimisation techniques which you can read on their website/github page.

I was told about this the other day too PSON which simplifies JSON, could be useful. But if you're working with SOAP etc then I'm sure there's a similar tool out there too.

Get rid of jQuery. (Personal preference).

If you're using something like bootstrap then download only the bits you needs, and NOT the whole package.

You can also do a lot with async loading of the web page. Unfortunately I can't remember any of the articles I've read on this. I think with script loading you can use 'defer' and the like.

I would however ask yourself is there any point in doing this?
Most of the time if the page loads and is displayed in less than a second then you'll be fine - as long as you provide user feedback then there should be no worries. More people leave websites and the like if they have no user feedback over having feedback, such as a spinner to say stuff is loading is sufficient. Again, I have no citations for this, however if you google you will find articles on this.

Hope this helped :)

And as @maruru said, please add TAGs to the post :) (Top RHS to edit post.)

Hi, I would also like to hear a reply to this question, as all I do is

• try to limit asset usage (for example use CSS3 instead of gradient-picture)
• concatenate
• minimize
• gzip

But I just noticed, that you did not tag your question. No one will see your question if it is not tagged. Please use at least the General Programming tag (for now, since there is no dedicated "Web Development" tag, yet)