Gutenberg Editor – what I learned at WordCamp KL

I had a great time at WordCamp KL. I thought I would fill people in on what I learned about the Gutenberg Editor for WP.
Niels Lange from Automattic was on hand at #WordCampKL to talk about the Gutenberg Editor. He did an excellent job of presenting the new editing tool.
Before this event, I didn’t know that much about the GutenbergĀ Editor. I had read the blog post from Yoast. I also knew it was a sensitive topic at WordCamp Bali but had not really investigated the plugin.
From what I had read, I knew a lot of people feared the Gutenberg Editor. Many in the WP Community think it will replace page builders. I personally can’t see this occurring. I think page builders still provide a solid way to edit pages, The Gutenberg editor will not replace them but enhance the WP experience.

What I learned about the Gutenberg Editor

Overall the Guttenburg Editor will have blocks to edit content. This is a big improvement over what was available before in WordPress.
It will mean shortcodes are easier to use. It’s now easier to extend a visual approach to content editing in WordPress.
After seeing Neils do his presentation I was pleased and excited for the Guttenburg Editor. Our customers will enjoy using it and I think it will be great. It will help all of them to make better content and better posts.

Why the Gutenberg Editor won’t replace a page builder

Generally, the Gutenberg idea of blocks impacts a single post/page only. The tool will not cover the entire page layout. Tools like beaver Builder, Elementor and our favourite editor Divi always deal with a whole page layout. Footers, side columns, drag and drop tools with inner page column support are all part of modern page builders. Gutenberg can’t do this and needs significant development to be able to do this.

It may one day do it but for now, it won’t.

What we are doing at Divi Framework to prepare for the Guttenburg Editor in WordPress 5.0

We are making all our plugins WordPress compatible first and that means we will make blocks for all our plugins be compatible with the Gutenberg Editor for its official release in WordPress 5.
I also want to personally do testing around the rest API to provide feedback to the core developers of this new feature.
Overall I think the Gutenberg Editor will make plugins more valuable and page builders more valuable as well. Having blocks that are easier to use and moving away from a shortcode mentality will make extending and using WordPress and much better experience for everyone, especially the end user.

How to hide the back to top button on mobile

In this simple tweak we give you a code snippet to remove your back to top button on mobile or tablet devices.

This code will work for any page powered by the Divi Theme.

It hides the back to top button when you are on a device which has a screen size smaller than the media query value.

To learn more check out the video.

You can get the snippet via the below code snippet on gist.

You can also get the code directly on gist.

Don’t forget to get more tweaks and edits on our youtube channel or via the blog.

Remove Emoji Script from WordPress – How To Video

Did you know that you are loading a bunch of emojis on your WordPress website even if you don’t use them?

If you aren’t using these fun symbols you need to remove the emoji script from WordPress.

When you turn off the emoji script it will make your page load faster with no loss of functionality for 90% of WordPress websites. Most people simply don’t use them. At Divi Framework we certainly don’t so I decided to remove emoji script and thought I would do a very quick video tutorial on how to make that happen.

First – Copy the snippet from our GIST

Second – Paste the snippet in your functions.php file for your child theme.

If you don’t have a child theme you should really think about creating one. It will help you maintain your WordPress website and means you can update parent themes with a lower risk of losing your updates or custom edits. In this case you can add this to your functions file for your parent theme but when you update your theme you will lose this change and have to re-implement it.

Three – Enjoy a faster webpage and faster load times.

This is a really simple way to make your site load faster and in a world where every millisecond counts its a quick win for any WordPress website.

 

Some clarity around page speed

Unlike other measures of speed your Google Page Speed score is not a measure of speed. Its a guideline.

If I was going Mach 1 or Mach 2 I know my speed has increased. However Google Page Speed and YSlow are not a direct measure of speed. They are a guideline created to get to a fast page speed back when we were using HTTP/1.

Most people don’t understand this but its true. You can increase your page speed score and sow your website down AT THE SAME TIME.

Does my Google Page Speed or YSlow score matter?

The simple answer is no. Why? Well that is a bit more complicated. Google Page Speed and YSlow are a guideline not a measure of page speed. You could get an A+ with Google Page speed and have a slow page.

Total Page Load time is what really matters especially if you are doing Adwords or Facebook marketing. Total Page Load time being lower is better and page conversion is directly related to a lower page speed. This means you need to take a close look at your total page load time more than any other metric when it comes to page speed.

Google Page Speed score and YSlow score are a guideline aimed at helping you make your page faster. When you get a A+ in either score these guidelines have been met. Sometimes however meeting this will slow your page down especially if you have an HTTP/2 enabled page.

Does Page Speed Score impact SEO?

1% of your SEO score is aim at your SEO ranking. Slow pages will cost you more money than fast ones. Optimisation will ultimately enhance ever website’s conversion and advertising is amplified by a fast website. Facebook campaigns are cheaper and overall its still important to get the times down. Slow pages will cost you more for Facebook advertising.

Fast Loading pages help your manage the cost of your social media campaign. On top of that website user engagement factors impact your SEO ranking heavily and a faster loading page will impact your SEO efforts more than a Google Page Speed Score or YSlow Score.

Why is Google page speed score out of date?

Google Page Speed and YSlow were created back over 5 years ago. Since that time the way the internet works has changed a bit because of HTTP/2. The guidelines still impact your load times and can still make a difference to your site delivery if you are using HTTP/1 however if you are using HTTP/2 the ranking factors really don’t matter that much anymore. They can help you identify issue but overall observing the whole guidelines often makes HTTP/2 based pages slower and less effective.

The repeated theme here is to check your total page load time over all other factors.

How does HTTP/2 improve on HTTP1?

Im not gong to get technical on you here but keep to the basics. HTTP/2 lets you download many files at once. Take a look at the downloads of this page below and see how all the assets load at once. That is the impact of HTTP/2.

A Water Fall Chart for HTTP/2 Example loading pattern

Using HTTP/2 will make a huge difference to page load times. Use HTTPS and HTTP/2 with a CDN and your cooking with gas.

What Should I measure with Page Speed?

What timing can you look at when testing you page speed and total download times? Each page goes through a number of phases as it loads.

The first phase is time to first byte, also call TTFB.

This is basically the time it takes for your server to respond. It takes into account redirection, connection time and backend response time, this is the point that your server will return the first byte to the browser.

The second important phase is the DOM loaded Event.

This is the moment the HTML is ready for CSS and Javascript to be applied to it. It is when all your HTML for your full page is loaded.

The third event is the DOM Onload Event

This is when Javascript is called and jQuery is doing its magic. This event can often make a page fully interactive and is often the moment that javascript frameworks like vue.js and Angular JS start calling your server for data. If you have a Javascript or jQuery heavy site checking the time this executes is really important.

The fourth and final event is fully load page time.

This is the time that really matters for Facebook, Google and SEO. Keeping this low will also impact your page conversion more than pretty much anything else. Total page load time should be less than 3 seconds for every page on your site.

We have some new page speed scores that take this into account but they are resolution dependant. These include the RUM Index which is worth keeping an eye on as it develops from BETA to an RC version.

Three things to check when reducing fully loaded page time.

The Server

Your server matters. A good server can make all the different. Using a good server and dedicated hosting for your specific platform or CMS can make all the difference. I use Kinsta.com for our WordPress websites as they make sure we have really fast pages and help deliver very fast loading pages. Your server need HTTP/2 and HTTPS as well as GZIP and Cache times to be set on the server.

The Location

Your server location matters both geographically and physically. A good data centre in a good location relative to your customers can really make a HUGE difference in page speed times. If you have a global audience a CDN is needed.

Images and page assets

Overall most of your page load is images. Optimise them as much as possible. GTMetrix is a great tool to help you identify bad images or those that can be further optimised. WordPress has a number of automated tools to help you but ideally you should be using image optimisation before you upload to WordPress. Be ruthless and keep those images loading fast.

Page tools we recommend for page speed

GTMetrix is without doubt an amazing tool for page speed. Learn how to use it and make use of the monitoring tools on your webpage. I cannot under emphasize the need for monitoring. It will help you identify the real problems you have with page speed and what is slowing your site.

Where can I get the checklist?

Download i below – we put it on process street to make it easy to use. Overall however – just watch the video and we will let you know when we launch our new learning area.

Tweak of the Week – How to clear the Local Storage

When you are editing Divi Websites you need to be able to clear local storage whenever you update your divi modules.

This is especially true for any of the updates we do here with our modules at Divi Framework.

Watch the tweak of the week screencast to work out how to clear the local storage and save lots of pain in Divi Module Updates.

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation