How to Add Free SSL in WordPress with Let’s Encrypt

When we first covered how to add SSL in WordPress, a lot of our readers asked for a free SSL solution. Unfortunately nothing existed at that time. However that has changed now thanks to Let’s Encrypt. In this article, we will show you how to… Read More »

The post How to Add Free SSL in WordPress with Let’s Encrypt appeared first on WPBeginner.

When we first covered how to add SSL in WordPress, a lot of our readers asked for a free SSL solution. Unfortunately nothing existed at that time. However that has changed now thanks to Let’s Encrypt. In this article, we will show you how to add free SSL in WordPress with Let’s Encrypt.

Adding a Free SSL Certificate in WordPress with Let’s Encrypt

What is SSL and Let’s Encrypt?

Every internet user shares lots of personal information each day. We do that when shopping online, creating accounts, signing into different websites, etc.

If not properly encrypted, then this information can be spied upon and stolen. This is where SSL comes in. It provides the encryption technology to secure the connection between a user’s browser and the web server.

Each site is issued a unique SSL certificate for identification purposes. If a server is pretending to be on HTTPS, and it’s certificate doesn’t match, then most modern browsers will warn the user from connecting to the site.

Unsecure connection warning in Google Chrome

Previously, the only way to secure sites with SSL was by using a paid SSL certificate.

Let’s Encrypt is a free open certificate authority that aims to provide SSL certificate for general public. It is a project of Internet Research Group, a public service corporation. Let’s Encrypt is sponsored by many companies including Google, Facebook, Sucuri, Mozilla, Cisco, etc.

Let's Encrypt

Having said that, let’s take a look at how you can add free SSL certificate to your WordPress site with Let’s Encrypt.

Easy Way – Using a Host That Offers Built-in Free SSL

As Let’s Encrypt is becoming popular, some WordPress hosting companies have already started offering built-in easy SSL set up.

The easiest way to add Let’s Encrypt free SSL to WordPress is by signing up with a hosting company that offers a built-in integration.

Setting up Free SSL with Let’s Encrypt on SiteGround

SiteGround is one of the most trusted and well-known hosting companies offering built-in integration of free SSL. We use Siteground for our List25 website.

Here is how to enable Let’s Encrypt free SSL in SiteGround.

Simply login to your cPanel dashboard and scroll down to the security section. There you will need to click on the Let’s Encrypt icon.

Let's Encrypt icon in cPanel

This will bring you to the Let’s Encrypt install page. You will need to select the domain name where you want to use the free SSL, and then provide a valid email address.

installletsencrypt

You can now click on the install button. Let’s encrypt will now issue a unique SSL certificate for your website. Once it’s finished, you will see a success message.

Let's Encrypt installed

That’s all, you have successfully integrated Let’s Encrypt free SSL to your WordPress site.

However, your WordPress site is not yet ready to use it. First you will need to update your WordPress URLs and then fix insecure content issue.

Don’t worry we will show you how to do that. Skip to the section on updating URLs and fixing insecure content issues.

Setting up Free SSL with Let’s Encrypt on DreamHost

DreamHost is another popular WordPress hosting service provider that’s offering built-in integration to setup free SSL on any of your domains hosted with them.

First you need to login to your Dreamhost dashboard. Under the Domains section, you need to click on secure hosting.

Secure Hosting

On the secure hosting page, you need to click on ‘Add Secure Hosting’ button to continue.

Dreamhost will now ask you to select your domain. Below that it will give you an option to add free SSL certificate from Let’s Encrypt. You need to make sure that this checkbox is checked.

Adding secure hosting

You can optionally choose to add a unique IP to your domain name. It is not required, but will improve compatibility with older versions of Internet Explorer on Windows XP.

Click on Add Now button to finish the setup. DreamHost will now start setting up your Free SSL certificate with Let’s encrypt. You will see a success message like this:

Success message after adding free SSL on DreamHost

You have successfully added a free SSL certificate with Let’s Encrypt to your WordPress site on DreamHost.

You still need to update WordPress URLs and fix insecure content issue. Jump to the section, updating WordPress URLs after setting up SSL.

Installing Let’s Encrypt Free SSL on Other Web Hosts

Let’s Encrypt free SSL is a domain based SSL certificate. This means that if you have a domain name, then you can add it on any web host.

However, if your web host does not offer an easy integration like SiteGround or DreamHost, then you will need to go through a somewhat lengthy procedure.

This procedure differs from one web host to another. Most hosting companies have a support document explaining how to do that. You can also contact their support staff for detailed instructions.

BlueHost one of the official WordPress hosting providers allows you to add third-party SSL to your domains hosted with them. For detailed instructions, take a look at their SSL installation of 3rd party certificate page.

Updating WordPress URLs After Setting up SSL

After setting up the Free SSL certificate with Let’s Encrypt, the next step is to move your WordPress URL from HTTP to HTTPS.

A normal site without SSL certificate uses HTTP protocol. This is usually highlighted with http prefix in web addresses, like this:

http://www.example.com

Secure websites with SSL certificates use HTTPS protocol. This means that their addresses look like this:

https://www.example.com

Without changing the URLs in your WordPress site, you will not be using SSL and your site will not be secure for collecting sensitive data.

Having said, let’s see how to move WordPress URLs from http to https:

For Brand New WordPress Website

If you are working on a brand new website, then you can just go to your WordPress admin area and click on settings. There you will need to update the WordPress URL and Site URL fields to use https.

Setting up WordPress to use HTTPS in URLs for a new website

Don’t forget to save your changes.

For Existing WordPress Sites

If your site has been live for a while, then chances are that it is indexed by search engines. Other people may have linked to it using http in the URL. You need to make sure that all traffic is redirected to the https URL.

First thing you need to do is install and activate the Really Simple SSL plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin will automatically detect your SSL certificate and set up your website to use it. In most cases, you will not have to make any more changes. The plugin will also fix insecure content issue.

Update Google Analytics Settings

If you have Google Analytics installed on your WordPress site, then you need to update its settings and add your new url with https.

Login to your Google Analytics dashboard and click on ‘Admin’ at the top menu. Next, you need to click on property settings under your website.

There you will see the default URL option. Click on http and then select https.

Changing default URL in Google Analytics

Don’t forget to click on the save button to store your settings.

That’s all, we hope this article helped you add Free SSL in WordPress with Let’s Encrypt. You may also want to see our list of 40 useful tools to manage and grow your WordPress blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Free SSL in WordPress with Let’s Encrypt appeared first on WPBeginner.

Speeding up WordPress: How We Optimized List25 Performance by 256%

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site… Read More »

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site to boost performance.

You have probably heard WordPress speed is important for SEO. A faster site has better user engagement, more pageviews, and better sales. In a strangeloop case study, they found that a one-second delay can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

Strangeloop Speed Case Study

So how do you actually speed up WordPress?

Well, instead of just sharing a list of speed tips, we decided to do a full case-study to show you the results from our List25 site along with how we accomplished it all.

Overview

List25 is an entertainment blog started by our founder Syed Balkhi. The site has over 1.5 million subscribers, and the YouTube channel has over quarter BILLION views.

The content on the site is mostly images and videos which takes up terabytes of bandwidth, so overall speed optimization was crucial for us to keep the costs down, reduce page abandonment and improve time on site.

Before we started the optimization, our homepage took 2.21 seconds to load according to Pingdom. After we were done, our page load time dropped to 1.21 seconds (~45% faster).

During this optimization, we were able to speed up our server response time, improve our page speed performance score, reduce the number of total request, and improve the overall load time.

Let’s take a look at the optimization techniques that helped us speed up our WordPress site.

WordPress Hosting

Having a good web host is crucial for your website speed. As our site became more popular, we simply outgrew our previous hosting company (HostGator).

Their servers simply couldn’t handle a site of this size because List25 receives tens of millions of pageviews. HostGator is great for smaller sites, but not for something of this magnitude.

We looked at various managed WordPress hosting options, and eventually ended up using SiteGround for hosting List25 because they offered the best overall value for this site.

You can see the improvement in our server response time immediately. We went from max 442ms to 172ms response time. That’s a 256% improvement.

List25 Server Response Time After Switching to SiteGround

Siteground has built performance boosters for specific platforms like WordPress, Joomla, and Magento. Based on the platform of your site, they specially optimize your servers which results in a better overall performance.

We wrote an article about when you should switch your web hosting which talks about the 7 key indicators.

If you are looking to switch hosts, then definitely give SiteGround a try. WPBeginner users get an exclusive 60% discount on hosting + free domain.

Caching Plugin

When it comes to speeding up WordPress, caching is the second most important factor after your web hosting.

Normally when a visitor comes to your WordPress site, your server passes the PHP request to the MySQL Database which finds the page that is being requested, generates it on the fly, and show it to the visitor. This takes up a lot of resources. When you have caching, it saves time and resources.

The diagram below highlights the process. In layman terms, think of caching as creating a desktop shortcut which helps you get to the file faster.

What is Page Cache?

For List25 site, we are using the SiteGround SuperCacher, a plugin they specially built for their customers. On top of that, they added advanced dynamic caching options using Varnish (part of their performance booster).

If you are not on Siteground, then don’t worry. You can setup cache on your WordPress site by using one of the many available solutions like W3 Total Cache or WP Super Cache.

At WPBeginner, we are using W3 Total Cache which provides a number of page caching options, database caching and object caching.

As more hosting companies specialize for WordPress, we will see more custom caching solutions built. Pagely and WPEngine also offer their own built-in caching system.

CDN

Content Delivery Networks (CDN) can help you boost your website speed. We have been using MaxCDN since the beginning of List25, so this part didn’t change.

We have written a full article on what is a CDN and why you need it along with a infographic.

What is a CDN

CDN allows us to serve all CSS, Javascript and images from a Content Delivery Network. This works by determining the site visitor’s location, and serving content from a server nearest to the visitor.

If you’re not in the market for a premium CDN solution, then you can use Cloudflare.

Combining Files to Reduce HTTP Requests

As you add more plugins, often they add their own JavaScript and CSS files. Each additional file is a new HTTP request.

We combined these JavaScript and CSS files into a single file for each to reduce requests and speed up load time. You can see more details about this on how WordPress plugins affect load time.

Whilst we are now loading some small functionality that we might not need on a particular section of the site, this code is cached on the CDN, and results show that fewer requests for files provide better performance than loading several smaller JS files.

This is something you have to do on a regular basis because the plugins you use change overtime.

Image Sprites

We made use of an image sprite which combined several social and site icons into a single image:

List25 Sprite

Whenever we needed to display a particular icon, we’d use CSS to:

  1. Load the image as a background image
  2. Define the width and height of the element we need the icon for
  3. Set the background position for our image to load the necessary icon

For example, to load the sidebar’s social media icons, we use:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

The background-position, width and height CSS properties helps us target the specific section of the image that we want to output:

List25 Sprite, Edited

As a result, only the first request for this image file is using bandwidth. Subsequent requests to the CDN for the image will result in the cached (typically local) version being loaded, as well as only needing to request a single image vs. 6 different social icons.

By combining JavaScript, CSS and images together, we reduced the number of requests significantly.

Code Minification

Code minification involves removing whitespace and line breaks to reduce the file size making it quicker to load when requested.

For List25, we use SCSS, a syntax-based stylesheet (Intro to Sass). This allows us to structure our CSS files across several areas of development in an easy to read layout:

List25 SCSS

We use CodeKit to then compile the SCSS files into a single CSS file. CodeKit also removes whitespaces and line breaks to ensure the file is as small as possible:

As a result, we were able to reduce our CSS file size by 28%.

Image Optimization

We optimized our images in two areas: our WordPress theme and uploaded content.

For our WordPress theme, we used CodeKit to ensure that all images were losslessly compressed. This ensures that the file sizes are as small as possible, with no loss of quality.

List25 Image Optimisation

We also educated all of our writers about the importance of saving images optimized for web. See our guide on how to save images optimized for web.

Javascript-free Social Sharing

Social sharing for List25 is really important just like any other website. However social sharing plugins can significantly slow down your site.

List25 Social Sharing Buttons

Whilst integrating these four social network’s scripts didn’t impact page load time in our tests, it visibly slowed down the web site when viewing on a mobile device. Social sharing buttons would take a few seconds to appear, despite the scripts loading asynchronously, resulting in the post content moving around as the buttons loaded into view.

To tackle this problem, we moved to an (almost) Javascript-free solution. Each of the social network’s sharing buttons are rendered by our custom WordPress Plugin, and the theme’s Javascript is only used to open the web browser window when the user clicks a button.

However, we still wanted to display the total number of shares a post had across all social networks. To do this, we produced a small custom WordPress Plugin to retrieve and cache the social share counts from each social network into the Post meta table. These counts are updated every 24 hours, ensuring time consuming queries are not constantly running.

You can either use an API like Sharre or dissect the Floating Social Bar for customization.

Using Pingdom’s RUM (Real User Monitoring), this new share plugin decreased the ‘true’ page load time from 6 seconds to just over 2 seconds. It also ensured that we reduced the number of requests made for third party scripts.

Result

We significantly improved our site speed. Load time went from 2.2 seconds to 1.22 seconds.

6

We were able to reduce our server response time significantly.

List25 Server Response Time After Switching to SiteGround

This helped reduce the time spent for downloading a page by Google bot which helped our crawl rate.

Webmaster Tools time spent crawling page

Our overall bounce rate dropped by 7% because the site was loading faster, and by switching hosts we were able to reduce server errors.

List25 Bounce Rate

As you can imagine with the lower bounce rate, time spent on site went up as well by over 30 seconds.

Conclusion

As you can see a faster loading web site can improve visitor engagement. The techniques we’ve discussed have covered a range of basic and intermediate improvements that you can implement to optimize your WordPress site. 

We hope this article helped you speed up your WordPress site. You may also want to check out our article about 20 must have WordPress plugins for 2015.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.