Tag: CDN

Steve Day presenting on Retina-Ready WordPress

Retina-Ready WordPress: Feb 2015 meetup

We talked about Retina-Ready WordPress at our Feb. 19, 2015 meetup. Below are the notes.

Steve Day presenting on Retina-Ready WordPress
Steve Day presenting on Retina-Ready WordPress

High Density Images

Presented by Steve Day

Jetpack Photon and WP Retina 2x

Presented by Chad Warner

Jetpack Photon

What it is

  • Jetpack module
  • CDN for images
  • Runs on WordPress.com infrastructure

How it works

  • “[W]e just grab the best version that we can find, and manipulate that single source image for whatever size, crop, or filter happens to be requested at the time. That lets us do cool things, like upscaling for Retina displays, as well.” George Stephanis, Jetpack dev
  • “There’s a script we load with photon that will detect if your user is on a Retina display, and then swap out images for the higher-resolution versions.” George Stephanis, Jetpack dev
  • Photon filters content but doesn’t change the info in the database.
  • Photon currently only acts on images in posts and pages, as well as featured images (post thumbnails). Also works for CPTs.
  • Photon will apply to old posts and new ones alike and can be turned on or off easily.
  • Photon looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).

How to use

Enable the Photon module in your Jetpack settings.

WP Retina 2x

  • Tutorial
  • Creates the image files required by Retina (High DPI) devices and displays them to your visitors accordingly.
  • Supports 4 different methods to serve the images to your visitors.

How to use 

  1. Make a full backup (in case images are damaged)
  2. Settings > Retina
    1. Basics
      1. Disabled Sizes: select those that are not used by theme (often thumbnail, possibly unused theme-specific sizes)
      2. Enable Auto Generate
  3. Media > Retina > Generate

X-Icon Editor: favicon generator

Generates single favicon.ico containing 64×64, 32×32, 24×24, and 16×16 px favicon.

WordPress Grand Rapids WordPress Perfomance Optimization

WordPress Performance Optimization: May 2014 meetup

We talked about WordPress Performance Optimization at our May 15, 2014 meetup: testing, hosting, caching, CDNs, image optimization, queries, transients, and more. Get ready! WordCamp Grand Rapids 2014 is August 15-16! Remember, you can also find us on Meetup, Twitter (@wpgrandrapids and #wpgr), and Google Groups. If I missed anything in the notes below, please leave a comment, and I’ll add to the post.

WordPress Grand Rapids WordPress Perfomance Optimization WordPress Grand Rapids WordPress Perfomance Optimization

Testing, hosting, caching, CDNs, image optimization

Chad Warner

Performance testing

Performance guide

Managed WP hosting

Note: this section contains hosting affiliate links.

  • The host is often the main determinant of performance
  • Use a host that’s optimized for WordPress
    • Speed
    • Security
    • Updates
    • Tools
  • SiteGround: fast, secure WordPress hosting
    • SiteGround is an excellent WordPress-optimized shared host. They’re fast, secure, and reliable, yet inexpensive. They’re the host I most frequently recommend to small business and nonprofit clients.  From firsthand experience, I’ve found their plans to be superior to similar hosting plans from GoDaddy, Bluehost, DreamHost, Hostmonster, HostGator, iPage, and small local hosting companies.
    • WordPress Hosting
  • For clients with larger and/or higher-traffic sites, or who need additional benefits, we recommend WP Engine, but for most smaller sites, SiteGround provides great features for relatively low cost.

Caching

  • Use managed WordPress hosting; they often handle caching. Even if you’re not using managed WordPress hosting, use the host’s caching as much as possible.
  • WP Super Cache: simpler, less problematic than W3 Total Cache
  • W3 Total Cache: more powerful but more problematic than WP Super Cache

CloudFlare’s CDN

Image optimization

Caching, queries, transients

Brian Richards

W3 Total Cache

  • Turn on all caches
  • Enable Page Cache
    • For e-commerce, don’t cache cart, checkout, my account pages

Custom queries

  • Queries are controlled by query.php in core
  • Queries use WP_Query class
  • Look at query.php and see all the filters available. You may not want to write a custom query; you may be able to modify the main query with pre_get_posts(). It’s more efficient to modify the main query that WordPress is already running than to add a new query. Be very specific about when you’re going to modify the main query; use conditionals.

Transients

Misc.

WordPress development tools

Improving WordPress Performance, June 2013

Our June 2013 meetup was Improving WordPress Performance. Topher DeRosia, Brian Richards, and Chad Warner talked about various ways to make WordPress sites load faster. Below are the video and notes from the meetup.

Also, Brian encouraged the group to get involved in WordCamp Grand Rapids 2013 by volunteering, speaking, and/or sponsoring.

Transients

  • Transients temporarily store cached data in the database
    • You can configure them to be stored in cache rather than the database, which is even faster
  • Transients are site-wide, so make sure they should apply to all users
  • You set expiration
  • Transient API
  • Mark Jaquith’s WP-TLC-Transients extends WordPress’ transients
  • Remember where you save transients so you don’t waste time troubleshooting
  • Topher wrote Storing complex queries in transients

Performance testing tools

CloudFlare

CloudFlare CDN features

  • No configuration necessary
  • Works with static and dynamic content
  • Always Online™

Web content optimization features

  • Rocket Loader
  • Reduced connections
  • AutoMinify
  • Local storage caching
  • Cache header optimization
  • Asynchronous resource loading
  • JavaScript bundling
  • Aggressive GZIP

W3 Total Cache configuration

  • Follow Installation instructions and accept defaults, then configure the following:
  • WordPress menu > Performance > General Settings > Page cache: Enable
  • Performance > General Settings > CloudFlare
  • Minification: CSS, JavaScript, and HTML
  • Performance > Browser Cache > General > enable/check Set expires header

Ways to improve WordPress performance (in order of increasing complexity)

  1. Caching plugin
  2. nginx, which is faster than Apache for serving static content
  3. Memcache and memcached
  4. APC (Advanced PHP Cache)
    1. Caches code, not content
    2. Turns interpreted code into binary and stores it

WP Super Cache

  • WP Super Cache doesn’t have as many options as W3 Total Cache
  • Topher doesn’t like W3 Total Cache because it’s “arrogant” and “rude”; it doesn’t respect other caching plugins.
  • Stores cached files in /wp-content/cache/supercache
  • Simply install and activate to start caching, but configure for better performance

Configuration: Tools > WP Super Cache

  • Advanced tab
    • Select mod_rewrite
    • Enable Don’t cache pages for known users
    • Enable Don’t cache pages with GET parameters
    • Enable Cache rebuild
    • Expiry Time & Garbage Collection
      • Settings depend on your site and preferences
    • Exceptions: configure items that should not be cached
    • Directly Cached Files: specify non-WordPress sites to cache
  • CDN tab: configure for your CDN, if necessary
  • Contents tab: lets you empty the cache
  • Preload tab: crawls site to build the cache
  • Plugins tab: configure plugins that integrate with WP Super Cache
  • Debug tab: used for debugging