Improving Viewing Performance of PDF Documents – PDF.js vs OpenAnnotate

Over the past few years, TSG has leveraged PDF.js as a quick viewer for PDFs within our applications.  This post will present how clients are leveraging OpenAnnotate rather than PDF.JS to improve viewing times (while getting the ability to annotate PDF images).

To understand the performance differences of PDF.JS and OpenAnnotate requires a small understanding of how each work.

• PDF.JS leverages 100% client side JavaScript to open a PDF image file for viewing.
• OpenAnnotate relies on a server side component to break the PDF into separate image pages and allows viewing of individual pages. Once the pages are broken down, OpenAnnotate relies on 100% client side JavaScript to view and annotate an individual page.  The server side combines the annotations into a single annotation file for storage within the ECM system.

While the viewing performance with PDF.JS is often satisfactory, PDF.js falls short for a few key reasons:

• 100% Client Side – PDF.js loads the entire PDF into the client via JavaScript. This works fine for moderately large documents (10 pages), however many of our clients have documents in the 300-700 page range. Larger files put a lot of strain on the network, and leaves minimal options when it comes to performance tuning.
• Full PDF Download – PDF.js sends the entire PDF to the client, which provides the user full access to the document that may require more security and restrictions.

Leveraging OpenAnnotate, TSG has been able to create a new OpenAnnotate Streamline Viewer to optimize the load times for large PDFs, and restrict the requirement for the full PDF to be served to a client. Initial testing has shown an improvement of 45% in average load times for documents between 600-700 pages.  Moving the PDF processing into OpenAnnotate provides the following benefits:

• Minimize Client Side Processing – PDFs are rendered into images which are streamed back to the browser proactively. This removes the requirement of requiring the browser to download the entire document and process it within the browser.
• Increased Scalability and Tuning Options – When clients have had issues with opening large PDFs using PDF.js, there have been few options to improve performance. Moving the heavy lifting of image processing onto machines that are more powerful, removes the burden from the browser.
• 1st Page Quick Load – OpenAnnotate proactively processes the first page of PDFs making them instantly viewable by a user while the rest of the pages are rendered for viewing. This process is ideal for users that need to quickly access large documents and don’t want to be forced to wait for an entire document to be downloaded before they can start their work – something not possible with PDF.js.
• Limited PDF Download – Since the browser only receives the processed pages as images, clients do not need to worry about a PDF falling into the wrong hands, or being modified using tools like Adobe Acrobat.
• Easily Configure Annotations – Use OpenAnnotate for fast viewing of PDFs, or enable the full set of robust annotation tools like: sticky notes, stamps, drawing, redaction and page manipulation. The functionality is available via simple configuration change.