WordPress West Meetup Notes: Speeding up WordPress

Thanks to everyone that was able to make it out to the WordPress Meetup West on Monday night. We covered speeding up your WordPress site at the server level, theme level, and content level.

Next month we’ll be looking for speakers to give 5-10 minute lightning talks. So if anyone has a topic they’d like to share send me a message through the Meetup group and we’ll get things set up.

Here’s the notes:

[slideshare id=58668415&doc=wpspeedup-160224163528]

Meetup notes from “What’s New in WordPress 4.4?” for December 2015

This month we talked about what’s new in the latest release of WordPress, version 4.4. Here’s a few notes from the evening’s presentation.

Little History

First a little history and reminder. With WordPress releases like 3.x and 4.x –  these are generally bigger updates to WordPress that include new features or large changes.

3.4.1 or 4.3.2 are smaller bug and security fixes – these are applied automatically by default. You won’t often find much outward facing in these updates.

Last Few Releases

Here’s a list of the last few releases of WordPress leading up to 4.4 and what they brought to the table.

4.2 – Bud Powell

  • Customizer came into its own
  • new languages!
  • better plugin installations
  • “Press This” got an update (bookmarklet that allows you to quickly post content from wherever you’re at on the web.)
  • emoji support (really a sneaky update for better Unicode support) for translations

4.3 – Billie Holiday

  • resetting password made more secure
  • menus added to Customizer
  • multisite changes
  • updated editor – switching between visual and text with less “ugh”
  • formatting shortcuts in visual editor
    • * or 1.

4.4 – Clifford Brown

That brings us to our most recent release. One little note, Eric Juden and Joe McGill are two local st. Louisan’s who are code contributors in this release!

  • New Default Theme – Twenty Sixteen
  • Responsive Images
    • supplies the relevant sizes to the browser
    • visitors only get the best image size
    • Built into core so themes and plugins can take advantage (like Twenty Sixteen)
    • Joe McGill!
  • oEmbed for WordPress
    • like embedding a YouTube or tweet, you can now embed WP posts from other WP sites
    • Added new services like Cloudup, Reddit Comments, ReverbNation, Speaker Deck, and VideoPress.
  • Taxonomists – terms now have metadata, just like posts and users
  • Rest API – you can speak to other websites and services using JSON.
    • Create you own endpoints to communicate with WordPress
    • Community member Paul Heirendt had a great video to share explaining APIs!
      • https://www.youtube.com/watch?v=rvQJcBBsi3k
  • Other – few multisite fixes, language updates

Read More

http://codex.wordpress.org/Version_4.4

https://premium.wpmudev.org/blog/wordpress-4-4/

See you in January!

Thank you to everyone who came out. Our next general meetup is January 20th. I hope to see you there!

WordPress Meetup West Notes: Dynamic Sidebars and Widgets

Thanks to everyone for coming out to the WordPress West meet up last night. If you weren’t able to make it or want to review what we covered in the presentation I’ve included the slides and some gists of the actual code used if you’d like to test it out yourself.

We went over registering sidebars, the difference between a “sidebar” and a “widgetized area” (hint: not much), displaying sidebars in your theme, and finally creating a custom widget.

Gists after the break.

Continue reading WordPress Meetup West Notes: Dynamic Sidebars and Widgets

Notes from Introduction to Functions and Hooks (Actions & Filters)

Thank you to everyone who made it out to our November General Meetup. We gave a basic introduction to how you can customize WordPress beyond Themes and Plugins using the WordPress Plugin API (Application Programming Interface)

These hooks allow you to include your own custom code within WordPress to do a myriad of things. You can use Actions to inject code, or compare variables and filters to run your own routine within WordPress (like say to pull data from an external source and format it for WordPress to ingest.

This modularity is what makes WordPress so functional for so many diverse user cases. Any plugin is really just a complicated set of functions that leverage the Plugin API to create Actions or Filters.

We gave a little demo, which I won’t repeat here as it was a little inaccurate. Instead I’d like to point you to a few resources that are far more elegant in presenting the basic concepts.

WebDev Studios has a great article on getting started with hooks with a few inline examples.

Pippin Williamson also has a good introduction to using filters, the more complicated of the two hooks (in my humble opinion).

Of course, there’s always the Codex entry on Hooks and the well-organized Code Reference library.

While a little more technical that our past General Meetup topics, we hope you enjoyed the meetup and look forward to seeing you at a future event!

Photo by Thomas Hawk – Licensed under Creative Commons

WordCamp St. Louis 2016

I’ve had many people asking me when planning for WordCamp STL 2016 was going to start lately. Well, I’m excited to say it officially kicks off right now!  The first step in getting a WordCamp up and running is getting the organizing team together.  If you are interested in helping us make #WCSTL16 awesome, fill out the form below and we will be in touch.  As in the past, we plan on having weekly organizer Google Hangouts and asking that organizers do their best to attend one of the two monthly STL WordPress meetups so we can have some face-to-face discussions.

If you have any questions, don’t hesitate to reach out to me via email or twitter.  For more information about the organizing team, you can checkout WordCamp Central’s page on the topic.

You must be a member of the site to fill out an organizer response.

A Few Housekeeping Notes

We’ve had two great partners for the last few years that have graciously hosted our meetups. Lab1500 and Integrity have hosted our General and Developer meetups respectively in the past, but will not be going forward. Both locations have shifting priorities and we wish them the best in their future endeavors. We want to take a moment and thank them both for being gracious and giving us the space to meet – with no cost – for as long as they have.

Starting with our General meetup next Wednesday, October 21 we’ll be meeting at a new location. The Cambridge Innovation Center (CIC) will be our new host for the foreseeable future. They’re located a little further West than Lab1500 and their space is gorgeous. Parking is street-level with no meters!

Moving forward our Developer meetup that has been meeting at Integrity will now be merging with our WordPress West meetup at OPO Startups in St. Charles. This means that our dev meetup is now happening on the 4th Monday of the month and at a new location much farther West than it has been in the past. The next meetup is scheduled for Monday, October 26th.

We know that changes like this have an impact on our community and attendance to our events. We hope you can continue to join us monthly to learn about WordPress and all it can offer. If you have any feedback or suggestions, please get in touch. If you would like to host another WordPress meetup, please contact us!

Photo by Tom Woodward – Licensed under Creative Commons

September Developer Meetup Notes – Making WordPress Plugins and Themes Extendable

Presentation

This presentation was about how to add your own hooks to plugins and themes. Code from the demo can be found here.

Other Cool Stuff Talked About

WordPress Plugins to Check Out

  • MinQueue – Plugin to minify and concatenate enqueued scripts and styles

Slack Stuff

WordPress uses Slack now. Check it out: https://wordpress.slack.com

  • Prowd – A Slack integration to recognize your team’s work.
  • Tatsu – Standup meetings for remote teams
  • Polls – Add polls to slack

Misc Stuff

  • GitUp – Makes git painless
  • Kanbanize – Online Kanban software
  • speetest-net – NPM package for running a speedtest from the command line

July Meetup Notes from WordPress St. Louis West – WordPress security using iThemes Security

Jason Yingling, Developer at Red8 Interactive hosted our first Meetup in St. Charles. The turnout was great for our first event. Thanks to OPO Startups and the rest of the Red8 crew for making us feel welcome. We’re looking forward to the next meetup out west!

Jason talked about WordPress security using iThemes Security, a popular security plugin. Even if you don’t use iThemes Security (and why not? It’s a really good plugin) there are a lot of tips and tricks that can help make your site more secure. Check out the presentation below.

If you’d like to know more, Jason is hosting the August WordPress St. Louis West on the 24th. He’ll be talking about how to go from a PSD to a WordPress template. RSVP today!

Westward Ho!

This month we’re going to try something new. A meetup for our Western community. No, we’re not donning cowboy hats and spurs, we’re having an event at the new OPO Startups building in St. Charles!

Nice place they have there, eh?
Nice place they have there, eh?

This is a trial to see if a more westerly event can sustain itself within the community. If things go well, this will be an addition to our existing Developer and General meetups on the first Monday and third Wednesday of the month, respectively. We’re going to try for the fourth Monday of the month.  For this first go-rough, the talented Jason Yingling from Red8 Interactive will be talking about security using iThemes Security.

Join  us!

Quick WordPress Optimizing Tips

Last week I sat in on this great A List Apart: On Air event titled  “Designing for Performance” It was their first online-only panel with four great presenters. Along the way I picked up a few tips and tricks I wanted to share with you all.

Here’s a few quick things you can do to improve the performance of your WordPress site.

Introduction

Before we begin, if your site is accessible from the web, punch in its URL into one of the following tools (or both!).

Make a note of the scores you’re given. We’ll compare them at the end.

Use a caching solution

The first thing you can do? Install a caching plugin or setup an in-memory cache. For folks on shared hosts (Bluehost, Hostgator, etc) the easiest (and often only) option will be going with a plugin. My plugin of choice is WP Super Cache.  Why this one in particular? It’s been around for ages, is super easy to use while still being customizable, and it’s authors include Donncha O Caoimh and Automattic. A pretty good pedigree if you ask me.

If you don’t want to do much mucking around, just install the plugin and turn on caching. This will allow your site to serve static version of your pages. This make your site quicker as WordPress (and the PHP/MySQL behind the scenes) doesn’t have generate a new page for each visitor.

Advanced options that I like to use are in the screenshot below. I like to make sure I enable  compressing pages as less data has to get tossed around. “Don’t catch pages for known users.” is handy if you’re an individual editor (or have a small team). This tells WordPress to alway serve up a new page to folks who are logged in to your site. This way you always see your updates without having to clear the cache.

WP_Super_Cache_Advanced

Compress your theme’s images

Let’s say you’re building a theme from scratch, using a child theme, or even just uploading a nice crisp PNG for your site’s header image. In each case WordPress  will use images within the theme to display common elements – like that header image. When these elements appear on every page your site has to serve up that image to every viewer, every time.

One way to speed up your site is to make sure you compress these common images as much as possible. This doesn’t mean degrade their quality with heavy compression like jpg images, but to remove as much metadata and use more advanced compression algorithms as possible.

Side note: Another big win for leveraging smaller images is to make sure you’re not uploading giant images to only have them displayed at small sizes. That’s a whole ‘nother post on its own!

How do you do this? Grab an application like ImageOptim or RIOT.

With either of these apps you can drag and drop in your images and let the tool do its magic. This includes background images, header images, or even icons used across your navigation and widgets.

Here’s an example of a recent optimization from a theme I optimized. This is using ImageOptim. Either tool uses a whole suite of tools behind the scenes to make the best optimization quickly and with great results. imageoptim-example

I saved a whopping 47% on average in this theme. In the case of my background tile image I saved a whole 80%. Not to bad. (Here’s another example with less impressive, but still good, results.)

 

Set up a caching rule

Even with something like WP Super Cache in place you still might need to set up some rules about static content. Static content is things like images, documents, multimedia files, etc.

For these files, WordPress delivers the file for a visitor every time. Even if they leave and come back five minutes later!

The easiest way to do this is to modify your .htaccess file and add a few rules for static content. The .htaccess file tells your site to give folks a locally cached version of the file and to ‘expire’ the item in the cache after so many minutes. This greatly helps in the loading of those (newly optimized) theme images I mentioned in the last tip, and any other files visitors consume on a regular or repeat basis.

I’m going to direct you to this post that has the handy steps on caching static content.

 

Minify your CSS

You’re using a child theme, right? Or maybe a custom theme built from a starter framework? Once your site is ready for production you can shrink your CSS files to make things a little quicker.

Minifying your CSS takes the human-readable version of your CSS file, with all it’s great inline comments and indents, and strips all that junk out. The computer doesn’t need any of that!

Now you’ll want to keep an un-minifed version around for future changes. Take a copy of your style.css file in your theme directory and rename it. Call it style-original.css or something and set it aside.

Now, copy and past the content of your style.css file into a tool like CSS Minifier or CSS Compressor. These tools will strip out any comments or spaces (making your file pretty much unreadable by humans) and reduce the file size (and therefore load times) of your CSS.

Copy the minified CSS back into style.css and save. If you have to make new updates down the road (always in your dev environment first, right?) you can re-load your human-readable CSS file, make your edits, and minify again.

On a few sites I manage I was seeing upwards of 60% file size savings. When were talking about mobile devices in not-so-good coverage areas that could be the difference between your site loading and a visitor leaving.

 

Conclusion

This is just a few things you can do quickly to improve the performance of your site. Making your site load quickly for visitors make them more likely to hang around and helps with your search rankings.

How much of an impact does it make? Remember those tests I asked to your run at the beginning of this post? Here’s a before and after (totally unscientific) comparison to a site I manage. I ran the default tests from webpagetest.org. Just using these tips made one score go from a C to a B and another from an F to a B!

webpagetest-beforewebpagetest-after

If you have tips or tricks you use to make your site’s a little quicker, let me know in the comments below. Thanks for visiting and I hope to see you at one of our upcoming meetups!

Photo by _chrisUK – Licensed under Creative Commons