Can ActiveStorage Serve Images for the Modern Web?

Talks

Mark Hutter

Can ActiveStorage Serve Images for the Modern Web?

by Mark Hutter

In the video titled "Can ActiveStorage Serve Images for the Modern Web?" by Mark Hutter, the speaker explores the effectiveness of ActiveStorage as a solution for image serving in modern web applications. The discussion revolves around the performance expectations set by modern web browsers and how ActiveStorage measures up against these standards.

Key Points Discussed:

Definition of 'Fast': The speaker emphasizes that defining speed in web performance is complex and can't be simplified into a single metric. Performance must be assessed holistically, considering various factors that contribute to the user experience.
Importance of Image Performance: Images are critical to web performance; thus, understanding how ActiveStorage handles image serving is essential for developers. Google Chrome has begun flagging slow-loading sites, making optimal performance more crucial.
Measurement Tools: Tools such as Google PageSpeed Insights and Lighthouse are recommended for measuring site performance, particularly focusing on metrics relevant to images.
Advantages of ActiveStorage: ActiveStorage centralizes image management through attachments and blobs tables, simplifying image integration within applications. It offers on-the-fly resizing, ease of use for developers, and enhanced security through temporary URLs for sensitive data.
Potential Pitfalls: While ActiveStorage provides several benefits, there are challenges, including query latency from database operations and slowdowns during image resizing. For instance, a request for a resized image can take significant time if the resize has not been previously processed.
CDN and Next-Gen Formats: The speaker discusses challenges in integrating ActiveStorage with CDNs and handling next-gen image formats. He suggests best practices like pre-processing image sizes and leveraging background jobs to optimize image handling and performance.
Performance Benchmarking: Hutter shares his experience running performance metrics on a new Rails application, highlighting how following best practices improved performance dramatically from a score of 73 to 99.

Conclusion:

Mark Hutter concludes that ActiveStorage can indeed serve as an effective image serving resource for modern web applications, particularly when developers implement best practices to mitigate its limitations. His talk reinforces the importance of understanding the unique needs of each project when choosing technology solutions and encourages a thoughtful approach to leveraging ActiveStorage for image assets.

00:00:12.200 Hi, I'm Mark Hutter. I work at a company called Landing, where we're trying to reinvent the way people think about apartment living and leasing. Today, I'm here to discuss the logistics surrounding a simple question: Can ActiveStorage serve images for the modern web? As it turns out, the answer is not so simple.

00:00:28.500 We need to consider speed—specifically, the speed requirements that modern web browsers deem as 'fast.' What do we define as fast? It’s one of those amorphous concepts where we instinctively know what it looks like when we experience it. However, putting actual metrics or numbers to it can be tricky. We can easily become consumed with particular aspects of performance while neglecting others, leading to a complicated understanding of performance itself. In today's landscape, with so much JavaScript and third-party integrations, it’s crucial to keep a holistic view of performance in mind.

00:01:52.600 Everything you already know about performance is true. I'm not here to reinvent your knowledge of Rails performance or JavaScript performance. You're all good developers who know how to make your websites and web apps perform well. My aim today is to discuss performance specifically related to using ActiveStorage to serve your image assets. Performance has several key pillars: server-side performance, JavaScript optimization, and image handling—all of which need to be functioning well for your site to be considered fast on the modern web.

00:02:59.760 You may be thinking, 'Why should I care? I already know how to make things fast, and my production apps work well enough.' But as of November 2019, Google announced that Chrome would start identifying sites that typically load slowly, badging them to notify users that a site is slower than others on the internet.

00:03:24.380 So how do we determine whether something is fast? What tools do we have at our disposal? Google provides several tools themselves, such as the PageSpeed Insights, which is a web-based tool, and Lighthouse, built directly into the Chrome browser. To get a holistic view of your website's performance, you should use a variety of these tools. Furthermore, they even have tools specifically for analyzing image performance, which can help you understand your website's page weight and image sizes.

00:05:02.180 It's essential to note that while these various tools provide numerous opportunities and diagnostics related to site performance, they don’t directly impact your performance score. However, they do present useful suggestions to improve your site’s metrics. For instance, optimizing images in next-gen formats can enhance performance scores, but if your Rails server runs too many database queries, it will still be bogged down, regardless of how optimized your images are.

00:07:20.900 We should delve into the specific metrics concerning images, such as Contentful Paint, which measures how long it takes the browser to render the first piece of DOM content, and Speed Index, which gauges how quickly visual content starts to load. Are the assets being served from ActiveStorage? Can we process some requests with AJAX to improve perceived performance? In the larger picture, these metrics are crucial for understanding how ActiveStorage performs as an image service.

00:08:07.280 Ultimately, determining whether ActiveStorage can serve your image assets effectively boils down to your specific needs and project requirements. ActiveStorage solves a multitude of problems we previously faced, centralizing image management into a couple of streamlined tables: Attachments and Blobs. This simplifies understanding and accessing image assets within larger organizations, especially for data engineers or analysts who need to efficiently analyze images.

00:09:32.800 Using ActiveStorage integrates well into current Rails applications, requiring only a bit of configuration to connect to your cloud provider. After that, the implementation is straightforward. This ease of use facilitates adding and managing images through familiar Rails techniques, effortlessly integrating alongside the existing application.

00:11:11.170 ActiveStorage supports on-the-fly image resizing, ensuring proper image dimensions are used throughout your site without requiring developers to know the transformation techniques used. It also provides security features for sharing sensitive information without exposing the actual file source, utilizing a method that ensures temporary access to assets through secure, signed URLs.

00:13:14.060 However, though ActiveStorage provides many advantages, it is vital to consider performance implications. ActiveStorage can incur latency from network requests when images are served from cloud storage, and the process of resizing may add significant time to the initial request. If your images change regularly or if you're handling multiple uploads, you could experience lag in rendering when images need to be resized during user requests.

00:15:27.750 While resizing images, caching strategies may pose challenges if assets are retrieved via 302 redirects. Testing how your CDN handles these requests and ensuring that generated variants are effectively stored will be critical in mounting an efficient operation. For developers insisting on optimized formats for performance, such as WebP, having a clear approach for integrating these formats can aid in meeting specific user needs.

00:18:02.990 In conclusion, while ActiveStorage can serve as a reliable image serving resource, effective implementation relies on understanding its limitations and potential trade-offs. Adaptations can be made through caching, pre-processing uploads, or offloading resizing processes via background jobs to ensure efficient handling of image assets.

00:20:58.790 Thank you all for watching this talk! I would like to express my gratitude to my wife and family for their unwavering support during this unprecedented time for us all, and a special thank you to the RailsConf organizers for facilitating this conference so we can continue sharing ideas and connecting as a community.

00:21:35.460 I'm Mark Hutter—feel free to reach out to me on Twitter if you'd like to discuss this topic further.

RailsConf 2020 CE