slow tile render or even not render with error code 500-504

You'll need to provide more information about what you're doing. Is this a tile renderer you've set up yourself (and if so, which one and how did you set it up?), or are you using an existing rendering service? We'll also need to know how you're using the tiles (e.g. in an app, a website, etc.).

My project is under angular 6. I'm using leaflet library as ng module. But settings is simple and similar as here.

let LAYER_OSM = {
  id: 'openstreetmap',
  name: 'Open Street Map',
  enabled: true,
  layer: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Open Street Map'
  })
};

But sometimes tile loading is very slow or even not loading.

If you retry one of the failing tile URLs (e.g. https://a.tile.openstreetmap.org/9/255/169.png ) does it work? If so I'd suspect the network connection between your server and the tile cache.

Direct request finally works but takes for that about 20 sec(

OK, I'd track that problem down first then, trying to find the "part of the network connection that makes things slow". There's a bunch of stuff in the OSM wiki that explains how the tiles are rendered (from where and for where).