4

We have many React Native <Image> components rendering per screen and are witnessing performance issues due to many simultaneous http requests. Opening and closing a connection is expensive, and having too many simultaneous connections can hit limitations that cause timeouts.

HTTP/2 features multiplexing, allowing multiple requests and response messages between the client and server to be in flight at the same time over a single connection, instead of multiple connections, which improves page load times.

CloudFront supports HTTP/2, HTTP/1.1, and HTTP/1 by default depending on the version the client sends up in the request header.

We noticed that our React Native app is sending HTTP/1.1 as the version in the request headers for any GET on an <Image>. Unlike popular apps, we're opening and closing a single connection for each GET. How do we make sure React Native Image requests use HTTP/2 and share a connection?

(Our image all share the same CloudFront domain.)

enter image description here


Edit - More Information:

Our CloudFront distribution supports HTTP/2:

enter image description here

And it appears the client and server are agreeing on h2:

enter image description here

  • 2
    Seems like source prop excepts headers prop. Have you tried using that? – bennygenel Mar 12 at 10:41
  • CloudFront supports HTTP/2 but it is not something that depends on a "request header" -- the two HTTP versions are not wire-compatible. You're showing ALPN h2 which suggests you are trying to use it... so, first question: have you actually enabled the HTTP/2 feature on your CloudFront distribution? – Michael - sqlbot Mar 12 at 23:12
  • @Michael-sqlbot HTTP/2 is listed as a supported version on our cloudfront distribution, yes. I've added edits to the question details. – sgarza62 Mar 13 at 1:06

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.