Love Your Load Times. Trim seconds off page loads, secure private files and make the most of your digital assets

Transcription

1 Love Your Load Times Trim seconds off page loads, secure private files and make the most of your digital assets

2 Today s Featured Speakers Antonio Estevez Senior Drupal Architect - DOOR3 Erik Vilinskas Senior Drupal Architect - DOOR3

3 Today s Agenda

4 AboutAbout DOOR3 DOOR3

5 About Us Founded in 2002, DOOR3 is headquartered in New York City with an offices across the eastern seaboard and Europe. As a leading digital design agency we enable our clients to increase their effectiveness and efficiency by utilizing our world class expertise in Digital Strategy, User Experience & Design, cross-platform Application Development and Maintenance & Support. Cross-platform Digital Strategy User Experience Design Web & Mobile Application Services Web & Mobile Maintenance & Support

6 About Assets DOOR3

7

8 Types of Assets Let s review some common (and not so common) types of digital assets. Display: Videos (streaming video, streaming livecast) Display: Images (GIF, PNG, JPG) Display: Other(SVG, PDF) Not Displayed (available for download - PPT, video downloads, etc.) Why review these types of assets? Because files are EVERYWHERE!

9 Where are the assets in Drupal? With that being said... It s important that your digital asset architecture is in correct form. For example: Module layer (Contributed and Custom) Modules will sometimes include images and/or other types of files. Usually basic - the bare minimum to provide the functionality Theme layer (Contributed and Custom) Custom themes may be a bit heavy Public files folder The location for almost all non-code files Private files folder Not used very often - only when security is needed Access can be controlled with Drupal s permission system In the end, just because you know you have access to powerful caching and CDNs doesn t mean you should skip out on optimizing your site as best as it could be!

10 Optimizing Digital Assets Here are seven common ways to optimize serving assets from Drupal Caching Pixel sprites for recurring images (e.g. background graphics for DOM elements) Caching CSS and JS aggregation Breakpoints to serve optimized images (SASS and Compass can help) Caching Imagecache Cloud hosting for assets (e.g. CDN, S3) Use YSlow to see how to improve your site delivery

11 Where to Optimize Digital Assets Server Level PHP Libraries to compress Images File Level Image compression CSS / JS Aggregation Application Level Image styles CSS / JS Aggregation Caching WYSIWYG Image placement Hosting Level CDN Theme assets CSS / JS in highly available resource Remote hosting of Libraries Font resources

12 DOOR3 What Do You Need toabout Consider?

13 What Do You Need to Consider Public Assets CDN Pre-recorded Costs Private Assets Region S3 Localization Live stream

14 Find a Path Let your business drivers lead the way! Who is your audience? Where do they access the site? Global / Local What kind of assets need to be available? 3. When do they access the files? 4. Market campaigns and contests bring traffic spikes Why do your users come to the site? 5. Streaming, live casts, public, private, etc You must make sure that the content that drives users to your site is always available How do they access the site? What devices do you need to support? Not all digital assets may need to be accessible from all devices.

15 Other Considerations Don t forget these drivers are just as important! Costs / Budget Public vs Private Assets Maintainability Legal Considerations

16 Private Files About DOOR3

17 Business Needs Driven Why do these files need to be private? Is there a permission matrix? How are the permission divided By permission (easiest and best) By role Other (this gets tricky)

18 How are Private Files Managed? Files can be controlled by sub directories within the private files folder Each subdirectory has its own set of rules for access Placing a file in a particular directory determines if it can be accessed

19 How should I Proceed?

20 Getting Started Download Drupal 7 core and contrib modules a. drush dl drupal-7.x b. drush site-install standard --account-name=admin --account-pass=admin --db-url=mysql://yourmysqluser: RandomPassword@localhost/YourMySQLDatabase c. Download and enable the following modules i. drush dl private_files_download_permission ii. masquerade Configure Media Settings a. specify an existing local file system path for storing private files. It should be writable by Drupal and not accessible over the web.

21 Switch to Demo

22 Documentation & Contrib Modules Documentation Contrib Modules

23 About DOOR3 Examples

24 Eh Not So Much There are many other solutions available to you out there but Drupal and Pantheon is the right way to go. Why you ask? Let s look at the alternatives: Gluster Not standard Drupal creates workflow and maintainability issues Expensive Network Attached Storage (NAS) with load balancers Less Maintainable ( VERY IMPORTANT) Host that will do this will not know Drupal You made the right move by choosing Drupal. You do not want to compromise any of its maintainability by compromising on your asset delivery. *Remember going away from Drupal creates a non-maintainable situation - This is VERY BAD*

25 Examples of Set ups: Level 1 Business Drivers Light development team; Most task accomplished with contributed modules and configuration Not a global market

26 Examples of Set ups: Level 1 Business Drivers Light development team; Most task accomplished with contributed modules and configuration Not a global market Major Points CDN set for origin pull for automatic file serving from CDN Push is when you manually uploaded files to your CDN to make them available for your site Pull is when the CDN pulls files up from your Drupal site for hosting in the event that the file has not yet been uploaded to your CDN Entire files folder is replicated to a CDN (Content Delivery Network) Super simple set up Big performance gains

27 Examples of Set ups: Level 1 Business Drivers Light development team; Most tasks accomplished with contributed modules and configuration Not a global market Major Points CDN set for origin pull for automatic file serving from CDN Push is when you manually uploaded files to your CDN to make them available for your site Pull is when the CDN pulls files up from your Drupal site for hosting in the event that the file has not yet been uploaded to your CDN Entire files folder is replicated to a CDN (Content Delivery Network) Super simple set up Big performance gains Considerations Not all CDNs are created equal; they vary in capabilities and in costs Sites with a global audience should be tested for performance region by region

28 Examples of Set ups: Level 2 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site has a massive collection of files that need to be available to its users for download

29 Examples of Set ups: Level 2 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site has a massive collection of files that need to be available to its users for download Major Points CDN is configured to serve all assets in the public files folder Entity file fields are configured to save to an S3 bucket instead of the public files folder More complicated than the level 1 example, but more cost effective than using the CDN for all assets Big performance gains

30 Examples of Set ups: Level 2 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site has a massive collection of files that need to be available to its users for download Major Points CDN is configured to serve all assets in the public files folder Entity file fields are configured to save to an S3 bucket instead of the public files folder More complicated than the level 1 example, but more cost effective than using the CDN for all assets Big performance gains Considerations Content administrators need to trained in what files need to be uploaded where Site has more integration points and more configurations, so the development team needs to be versed in more modules / technologies than in level 1 S3 not available in some markets

31 Examples of Set ups: Level 3 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site needs to serve live, real time streaming video to viewers from around the globe Video archive of past streams need to be publicly available (they are free for all users)

32 Examples of Set ups: Level 3 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site needs to serve live, real time streaming video to viewers from around the globe Video archive of past streams need to be publicly available (they are free for all users) Major Points Custom field stream wrapper is written for the vendor providing the livecast Contributed field stream wrapper is installed to handle the Youtube videos CDN is configured to site s public files folder via origin pull

33 Examples of Set ups: Level 3 Business Drivers Global market(s) need optimized, regionalized cloud asset delivery by geolocation Site needs to serve live, real time streaming video to viewers from around the globe Video archive of past streams need to be publicly available (they are free for all users) Major Points Custom field stream wrapper is written for the vendor providing the livecast Contributed field stream wrapper is installed to handle the Youtube videos CDN is configured to site s public files folder via origin pull Considerations Typical site assets see good performance via CDN Custom code needed to support the livecast vendor Stakeholders should strongly consider contributing the custom code written for the live cast support back to the community Youtube videos are embedded elegantly within the Drupal site Youtube videos are also available from the Youtube site

34 Let s Review About DOOR3

35 Key Takeaways Drupal digital assets can be found in many places public:// private:// youtube:// custom:// Drupal best practices need to be adhered to, even if powerful delivery tools will be used Drupal sites should not turn to unmaintainable or host-specific asset delivery Business drivers will determine the correct strategy Types of assets Audience Budget Build strategy implementation on Drupal core and contributed modules Custom code may be needed for some support items

36 Key Takeaways Tools and resources Google Pagespeed Pingdom tools YSlow Firebug Webpagetest.org Grunt Additional Reading Google best practice recommendations Yahoo page rules High performance networking (ebook)

37 Questions About DOOR3

38 Thank You About DOOR3

39 Further Reading CSS Sprites: File API: Drupal and CDN: