How to Optimize Your WordPress Site’s Performance

You don’t want a slow website. Potential visitors may leave before your page even finishes loading. And you’ll be penalized in search results, meaning even less traffic.

You want your web pages to load in two seconds or less. How do you achieve that? One step at a time.

In this article we cover a list of items you can optimize to speed up your WordPress site. In our next article, we’ll give you a list of plugins that will help.

Just How Slow Is My Site?

Your site may not feel slow to you. Most likely your browser has already cached it, so you won’t be experiencing it the same way as a new visitor.

Here are some services that will inform you how long your page takes to load and the overall file size of your page:

• GTmetrix
• YSlow
• Google PageSpeed Insights
• Pingdom

Check the speed of your sites before and after tweaking your site for performance. If you can get your pages loading in two seconds, you’re doing well.

Keep a record of how much difference each step you take makes. What made the most difference?

Continue reading %How to Optimize Your WordPress Site’s Performance%

by Adrian Try via SitePoint

How to Run Multiple Versions of All Your Dev Tools with Jenv

Table of Contents Introducing jenv Installing a New Tool Installing a Specific Version of a Tool Seeing What Versions Are Available to Install Switching Versions of a Tool Summary Comments If you need a platform independent tool that allows you to manage multiple installs of Java-based applications such as Maven, Gradle, and Tomcat, then jenv […]

Continue reading %How to Run Multiple Versions of All Your Dev Tools with Jenv%

by Graham Cox via SitePoint

Optimizing React Performance with Stateless Components

This story is about stateless components. This means components that don't have any this.state = { ... } calls in them. They only deal with incoming "props" and sub-components.

First, the Super Basics

import React, { Component } from 'react'

class User extends Component {
  render() {
    const { name, highlighted, userSelected } = this.props
    console.log('Hey User is being rendered for', [name, highlighted])
    return <div>
      <h3
        style=
        onClick={event => {
          userSelected()
        }}
        >{name}</h3>
    </div>
  }
}

Yay! It works. It's really basic but sets up the example.

Things to note:

• It's stateless. No this.state = { ... }.
• The console.log is there so you can get insight it being used. In particular, when you do performance optimization, you'll want to avoid unnecessary re-renders when the props haven't actually changed.
• The event handler there is "inline". This is convenient syntax because the code for it is close to the element it handles, plus this syntax means you don't have to do any .bind(this) sit-ups.
• With inline functions like that, there is a small performance penalty since the function has to be created on every render. More about this point later.

It's a Presentational Component

We realize now that the component above is not only stateless, it's actually what Dan Abramov calls a presentational component. It's just a name but basically, it's lightweight, yields some HTML/DOM, and doesn't mess around with any state-data.

So we can make it a function! Yay! That not only feels "hip", but it also makes it less scary because it's easier to reason about. It gets inputs and, independent of the environment, always returns the same output. Granted, it "calls back" since one of the props is a callable function.

So, let's re-write it:

const User = ({ name, highlighted, userSelected }) => {
  console.log('Hey User is being rendered for', [name, highlighted])
  return <div>
    <h3
      style=
      onClick={event => {
        userSelected()
      }}>{name}</h3>
  </div>
}

Doesn't that feel great? It feels like pure JavaScript and something you can write without having to think about the framework you're using.

It Keeps Re-rendering, They Say :(

Suppose our little User is used in a component that has state which changes over time. But the state doesn't affect our component. For example, something like this:

import React, { Component } from 'react'

class Users extends Component {
  constructor(props) {
    super(props)
    this.state = {
      otherData: null,
      users: [{name: 'John Doe', highlighted: false}]
    }
  }

  async componentDidMount() {
    try {
      let response = await fetch('https://api.github.com')
      let data = await response.json()
      this.setState({otherData: data})
    } catch(err) {
      throw err
    }
  }

  toggleUserHighlight(user) {
    this.setState(prevState => {
      users: prevState.users.map(u => {
        if (u.name === user.name) {
          u.highlighted = !u.highlighted
        }
        return u
      })
    })
  }

  render() {
    return <div>
      <h1>Users</h1>
      {
        this.state.users.map(user => {
          return <User
            name={user.name}
            highlighted={user.highlighted}
            userSelected={() => {
              this.toggleUserHighlight(user)
            }}/>
         })
      }
    </div>
  }
}

Continue reading %Optimizing React Performance with Stateless Components%

by Peter Bengtsson via SitePoint

Lightning Fast Websites with Prefetching

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article, I'll discuss prefetching, what it is and how developers can use it to wow visitors with high performance websites.

What Is Prefetching?

Although optimizing a website for initial page load is great, for the highly interactive websites users expect today this might not be enough.

What if browsers knew which link users are about to click, or which page they are about to visit next, so that content automagically appears on their screen at the speed of light?

But browsers can do that now. In fact, some major browsers are smart enough to make this kind of guesses based on visitors' browsing patterns, document markup and structure, users' device, connectivity, etc. Therefore, browsers already try to anticipate the resources to build the page visitors are likely to access, get those resources ready and display the page at warp speed when users need it. However, developers can use their knowledge of the website or web application to help browsers locate those crucial resources more accurately.

This is what prefetching is, a hint for browsers to foresee users' every browsing wish and make it come true in a snap.

You can find prefetching in the Resource Hints specification led by Ilya Grigorik.

In what follows, I'm going to discuss:

• DNS-prefetching
• Link/Resource prefetching
• Prerendering (Page prefetching)

DNS-Prefetching

The internet is a network of computer-readable IP addresses (e.g., 87.87.87.87) that are referenced by human-readable hostnames (e.g., yoursite.com). DNS is the protocol that converts hostnames into IP addresses.

Each time the browser makes an HTTP request for a resource on a different domain, it can spend a few milliseconds to resolve the domain to the associated IP address.

If a website has a Twitter or Facebook widget, Google Analytics and perhaps one or two custom web fonts, then it must have links to other domains. This makes DNS lookups unavoidable.

DNS prefetching helps to decrease waiting time for visitors because the browser performs DNS lookups before it sends a request for resources located on other domains.

So, let's say developers know a website will make a request to somewidget.example.com. They can drop a hint for the browser suggesting it can go ahead and prefetch that hostname's DNS by adding a rel attribute to the link with the value of dns-prefetch, like this:

[code language="html"]
<link rel="dns-prefetch" href="//somewidget.example.com">
[/code]

Now, when the request to somewidget.example.com takes place, the browser has already performed the DNS lookup ahead of time and users get the results delivered a bit sooner.

Browser support for DNS-prefetch at this time is present in all major desktop browsers. When support for DNS-prefetching is lacking, browsers simply retrieve resources in the usual way. No big deal.

What if the browser never requests the DNS-prefetched resource? Thankfully, DNS-prefetching is not a costly operation since it doesn't send more than just a few hundred bytes over the network. Once again, no harm done.

Link Prefetching

Continue reading %Lightning Fast Websites with Prefetching%

by Maria Antonietta Perna via SitePoint

How to Choose, Register and Make the Most of Your Domain Name

You’ve chosen a hosting plan and provider for your website, but how will people find it? You need a domain name.

Web hosting is the physical location of your websites files on the internet. A domain name is what your website is called, or the address your visitors type in to get there. It’s how your customers will find you among the millions of other web sites on the internet. So invest some time choosing the right one.

This article is a non-technical overview of domain names, how to get one, and what you can use it for. We’ll link to more technical articles if you’d like to learn more.

What Is a Domain Name?

Like the phone system, the internet is based on a system of numbers. Beneath the surface, each website is associated with an IP address—a numerical addresses that tells your browser where to find the website on the internet.

Most people find it easier to relate to names than numbers. Do you prefer to make phone calls by dialing a phone number, or tapping on a name in your contacts app? In the same way, you can think of a domain name as the human readable version of the IP address.

Some examples are sitepoint.com, wordpress.org and example.com.au. A domain name is made up of:

1. A series of letters, numbers and hyphens,
2. An extension (called a Top Level Domains), like .com, .org, .biz, .edu.
3. An optional country code, like .au, .nz, .uk. US sites don’t have a country code.
4. These are separated by a “dot” (a period, or full stop).

A domain name must be registered before it can be used.

Choosing a Domain Name

Think long and hard about your domain name—it’s the first impression people will have of your website. It can strengthen your brand, affect your search result ratings, and impact how easily visitors will remember how to get to your site. The choice deserves careful consideration.

Here are some tips for choosing an effective domain name for your business or project:

Continue reading %How to Choose, Register and Make the Most of Your Domain Name%

by Adrian Try via SitePoint

Quick Tip: E-Commerce in 30 Seconds with Gumroad and Jekyll

In my last quick tip, How to Build Customizable HTML Widgets in Jekyll, you learned how to make your own dynamic widgets for Jekyll websites. Today, I'm going to show you how you can use that knowledge to integrate your Jekyll-based website with Gumroad's services to add really powerful e-commerce functionality in just a few seconds.

What is Gumroad

For those of you who don't know, Gumroad is a San Francisco-based e-commerce startup launched in 2012. Their service is geared towards making e-commerce easy for content creators.

In addition, Gumroad also offers useful tools that enable you to track sales and market your products to potential customers. You can read more about all that on Gumroad's website.

For web designers, Gumroad makes available some exciting features, in particular their widgets, webhooks, and API (Application Programming Interface).

Embedding Products on Your Website

To start powering up your Jekyll website with Gumroad, follow the steps below.

Grab the Code from the Gumroad's Widgets Page

The first step is to head over to Gumroad's Widgets page, where you can get the code you're going to use to create your widget.

Depending on how you want your Gumroad products to be displayed on your website, select Overlay or Embed (or why not make one widget for each option?). For the purpose of this tutorial, pick Embed with the Redirect to Gumroad option enabled.

Next, scroll down to the bottom of the page where you'll find the Gumroad's auto-generated code snippet. This code has two parts: a <script> element, and a <div> element wrapping an anchor tag (if you chose Overlay instead, the second part would be the anchor tag).

Add the Gumroad Script to Your Website

Continue reading %Quick Tip: E-Commerce in 30 Seconds with Gumroad and Jekyll%

by Jon Persson via SitePoint

Deploy & Manage Multiple WordPress Sites with ServerPilot

Do you create and manage multiple Virtual Private Servers (VPS) with multiple WordPress sites on them for your company or your clients, or even for your own projects? ServerPilot might be just the tool you need to manage those servers, and to quickly deploy WordPress to them.

ServerPilot allows you to deploy applications to your virtual private servers without having to handle the command line setup of a web server to acquire the files you need, set up a database, and deploy WordPress. You can deploy the environment, and then upload your own files to create a PHP, JavaScript, or plain HTML app, but in the case of WordPress sites in particular, this process is amazingly smooth.

Who Should Use ServerPilot?

Anyone who manages multiple WordPress installations on various hosts — especially if you are a developer who also provides hosting services, whether for your own sites and projects, for clients, or even for your projects at work! The rapid nature of ServerPilot deployments eliminates a lot of the costly time issues involved with setting up your own web servers and deploying WordPress. With some experience using a hosting service that provides VPS options, and with ServerPilot, you can spin up a new server and have a working WordPress installation on it in moments.

Setting up a Server

Setting up a server to be managed by ServerPilot is a simple process. Take a look below to follow along!

1. Set up a VPS

Get an account with the hosting provider of your choice that offers Virtual Private Servers, and go ahead and purchase one. Some are monthly fees, others bill for hourly usage. Obviously you'll be looking for what is best for your specific project.

Get the root password, but don't make any other changes to the server or set up any packages or applications. Leave the server "clean", as ServerPilot would say.

2. Create Your ServerPilot Account

You'll be brought to the welcome screen.

3. Add Your First Server to ServerPilot

Once you click to create your first server, you'll see a screen similar to this one:

Fill in your server's IP, root password, and your desired password for the 'serverpilot' user that will be set up there. That's that! If all has gone well, your server is now ready for you to begin creating apps on it.

Deploying Your App

Deploying an app is pretty quick too. You'll go to apps, then create an app. You should get the app creation screen:

Continue reading %Deploy & Manage Multiple WordPress Sites with ServerPilot%

by Jeff Smith via SitePoint