Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Optimize Media
Performance in WordPress
with Cloudinary
by Tessa Mero
April 3rd, 2020 - MidwestPHP Virtual Conference
The ...
Oh hai
● Developer Advocate at
Cloudinary
● Developer, Teacher, Advocate
● Community Leader
○ Past: Joomla, PHP
○ Current:...
Topics
● Performance? Why?
● Native WordPress Media vs Cloudinary
Plugin
● Cloudinary Plugin
● Cloudinary PHP SDK
● Resour...
Why Does Performance Matter?
Reasons to Optimize - Speed
● Speed Optimization and Performance =
better user experience
Reasons to Optimize - Visitor Retention
● Speed Optimization
and Performance
● Retain Website visitors
Reasons to Optimize - Boost Engagement
● Speed Optimization and Performance
● Retain Website visitors
● Boosts engagement
Reasons to Optimize - Boost Engagement
● Speed Optimization and Performance
● Retain Website visitors
● Boosts engagement
...
Reasons to Optimize
Source: kinsta.com
Native WordPress Media vs
Cloudinary Plugin
Native WordPress @tessamero
● Virtual Repo of all
media files
WordPress Optimization Plugins @tessamero
● Lots of image
optimization
options on
WordPress
Plugins
Cloudinary Plugin @tessamero
● Over 6k+ active
installations
● Leading media
management
solution
Cloudinary Plugin @tessamero
SECRETS!!!!!
Cloudinary Plugin @tessamero
● Installing the
Cloudinary Plugin
Cloudinary @tessamero
Cloudinary Plugin
Generate Responsive Images
Endless
versions of
the same
image
Update Image Format
Choosing File Formats
PNG - Higher Quality / Higher File Size
GIF - Has 256 colors only, best for animated images
JPEG/JPG...
Video Player
Cloudinary
Player
Video Transformations
Original Video URL: https://res.cloudinary.com/demo/video/upload/dog.mp4
Transformed Video URL: http...
fdsafdsa
fdsafdsafds
Cloudinary PHP SDK
PHP Library - Features
● Build URLs
● PHP view helper tags
● API wrappers
● Server-side file upload
PHP example
Don’t leave public_id’s public
Setting up PHP with Composer
Setting up PHP Manually
Configuring Cloudinary
Another option for Configuring
Upload a File! Locally!
Upload a File! Locally!
Upload a File! - Remote HTTP/HTTPS URL
PHP Syntax for File Upload
What about Videos?
What about Videos? - Customization
Purpose?
https://res.cloudinary.com/demo/video/upload/w_300,h_300,c_pad,b_blue/dog.mp4
● In depth about Cloudinary
● Famil...
Client-Side Upload bit.ly/cloudinary-codepen
Resources:
What is Cloudinary? https://www.youtube.com/watch?v=cHF2-559EVw
Cloudinary WordPress Plugin (GPL Licensed): htt...
<< end
● Twitter: https://twitter.com/tessamero
● Email.: tessa.mero@cloudinary.com
● Slides: https://slideshare.net/tessa...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Optimize media performance in wordpress with cloudinary

Download to read offline

optmize media performance and the cloudinary php sdk

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Optimize media performance in wordpress with cloudinary

  1. 1. Optimize Media Performance in WordPress with Cloudinary by Tessa Mero April 3rd, 2020 - MidwestPHP Virtual Conference The content of this presentation is proprietary information of Cloudinary. It is not intended to be distributed to any third party without the written consent of Cloudinary. © 2019 Cloudinary inc. @tessamero
  2. 2. Oh hai ● Developer Advocate at Cloudinary ● Developer, Teacher, Advocate ● Community Leader ○ Past: Joomla, PHP ○ Current: API, Vue.js, JAMStack, DevRel ● Gamer + Mom ● Cooking (<3 Korean food!) @tessamero
  3. 3. Topics ● Performance? Why? ● Native WordPress Media vs Cloudinary Plugin ● Cloudinary Plugin ● Cloudinary PHP SDK ● Resources @tessamero
  4. 4. Why Does Performance Matter?
  5. 5. Reasons to Optimize - Speed ● Speed Optimization and Performance = better user experience
  6. 6. Reasons to Optimize - Visitor Retention ● Speed Optimization and Performance ● Retain Website visitors
  7. 7. Reasons to Optimize - Boost Engagement ● Speed Optimization and Performance ● Retain Website visitors ● Boosts engagement
  8. 8. Reasons to Optimize - Boost Engagement ● Speed Optimization and Performance ● Retain Website visitors ● Boosts engagement ● Better Metrics ○ https://www.blog.google/products/ads/speed-scorecard-impact-calculator
  9. 9. Reasons to Optimize Source: kinsta.com
  10. 10. Native WordPress Media vs Cloudinary Plugin
  11. 11. Native WordPress @tessamero ● Virtual Repo of all media files
  12. 12. WordPress Optimization Plugins @tessamero ● Lots of image optimization options on WordPress Plugins
  13. 13. Cloudinary Plugin @tessamero ● Over 6k+ active installations ● Leading media management solution
  14. 14. Cloudinary Plugin @tessamero SECRETS!!!!!
  15. 15. Cloudinary Plugin @tessamero ● Installing the Cloudinary Plugin
  16. 16. Cloudinary @tessamero
  17. 17. Cloudinary Plugin
  18. 18. Generate Responsive Images Endless versions of the same image
  19. 19. Update Image Format
  20. 20. Choosing File Formats PNG - Higher Quality / Higher File Size GIF - Has 256 colors only, best for animated images JPEG/JPG - Can adjust quality and file size for more customization **** JPEG XR / WebP - Not universally supported
  21. 21. Video Player Cloudinary Player
  22. 22. Video Transformations Original Video URL: https://res.cloudinary.com/demo/video/upload/dog.mp4 Transformed Video URL: https://res.cloudinary.com/demo/video/upload/w_300,h_200,c_crop/dog.mp4
  23. 23. fdsafdsa fdsafdsafds
  24. 24. Cloudinary PHP SDK
  25. 25. PHP Library - Features ● Build URLs ● PHP view helper tags ● API wrappers ● Server-side file upload
  26. 26. PHP example
  27. 27. Don’t leave public_id’s public
  28. 28. Setting up PHP with Composer
  29. 29. Setting up PHP Manually
  30. 30. Configuring Cloudinary
  31. 31. Another option for Configuring
  32. 32. Upload a File! Locally!
  33. 33. Upload a File! Locally!
  34. 34. Upload a File! - Remote HTTP/HTTPS URL
  35. 35. PHP Syntax for File Upload
  36. 36. What about Videos?
  37. 37. What about Videos? - Customization
  38. 38. Purpose? https://res.cloudinary.com/demo/video/upload/w_300,h_300,c_pad,b_blue/dog.mp4 ● In depth about Cloudinary ● Familiar with URL based Syntax ● Generate Transformations ● Add transformations to WordPress Plugin
  39. 39. Client-Side Upload bit.ly/cloudinary-codepen
  40. 40. Resources: What is Cloudinary? https://www.youtube.com/watch?v=cHF2-559EVw Cloudinary WordPress Plugin (GPL Licensed): https://github.com/cloudinary/cloudinary_wordpress Cloudinary PHP SDK: https://cloudinary.com/documentation/php_integration Cloudinary PHP Sample Project: https://github.com/cloudinary/cloudinary_php/tree/master/samples Cloudinary Code Samples: https://codepen.io/team/Cloudinary Loss and Lossy Compression: https://kinsta.com/blog/lossy-compression/ Tips on Boosting WordPress Performance: https://www.wpbeginner.com/wordpress-performance-speed/
  41. 41. << end ● Twitter: https://twitter.com/tessamero ● Email.: tessa.mero@cloudinary.com ● Slides: https://slideshare.net/tessa99 THANK YOU! @tessamero

optmize media performance and the cloudinary php sdk

Views

Total views

116

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×