Optimizing Your Website With HTTP/2

/in /by

HTTP2

A major change is taking place within the infrastructure of the internet. There is a new version of HTTP, which is the main protocol used by web browsers to connect to websites.

The new version is called HTTP/2 and although it’s probably not something the average person should be concerned about, it’s an important change for web developers. The new HTTP/2 protocol changes the way in which web developers optimize websites for performance.

In this article we will cover the changes between HTTP and HTTP/2 along with best practices that have changed or have now become obsolete.

 

What is different?

The main difference between HTTP and HTTP/2 is that HTTP/2 no longer needs to make a separate request for each file. This improvement makes a massive difference in the guidelines for performance optimization.

When using the previous protocols HTTP1 or HTTP/1.1, files for CSS, JavaScript and even sometimes images would be combined to reduce the amount of requests between the server and the browser improving load times and website speed.

In the newer HTTP/2 protocol the process of combining files is no longer necessary and can sometimes even result in a negative impact on your website.

 

Is HTTP/2 already available?

If you have a website that is currently using HTTPS, then the answer is yes. All of the major web browsers support the HTTP/2 protocol. You will need to first check with the company your website is hosted on to ensure they support HTTP/2 and then make some small configuration changes to your server, but essentially it’s as simple as that.

The downside is some outdated web browsers may not be able to support HTTP/2 but your website will still load on them.

 

Should my website be using HTTP/2?

Simply put, yes. HTTP/2 is significantly faster than the former HTTP1 and when it’s setup properly the majority of your website users will notice a dramatic improvement in your website’s performance.

 

CDN-Content-Delivery-Network

 

Do I still need a CDN with HTTP/2?

Yes, HTTP/2 still requires a CDN. A CDN is capable of much faster content delivery than your server, meaning your website will still see tremendous performance benefits from using one. Almost every major CDN already supports HTTP/2.

 

Performance Optimization and Best Practices Changes

Here is a list of performance optimization and best practices that are no longer required when using the new HTTP/2 protocol.

 

Combining CSS and JavaScript files: Since multiple requests are not an issue with HTTP/2 there is no longer any reason to combine files to reduce the amount of requests between the server and the browser.

Image Spiriting: The tedious process of combining multiple small images into a single larger image to reduce the amount of requests is now completely unnecessary with HTTP/2.

Domain Sharding: Although it wasn’t a common process, some websites with a lot of traffic setup multiple CDN domains to serve files in parallel. The HTTP/1 protocol was limited to a maximum of 8 parallel connection and configuring multiple CDN domains allowed more files to be served in parallel, resulting in higher load times and overall better performance.

HTTP/2 removes the need for parallel connections entirely as a single connection can serve multiple downloads now, rendering this former best practice obsolete.

Inline CSS and JavaScript: This former best practice used to be pushed heavily by Google. However, with HTTP/2 small files requests no longer have any significant impact on load times making this former best practice no longer relevant

 

 

google-pagespeed-insights

 

 

HTTP/2 and Google PageSpeed:

Google PageSpeed Insights is the goto tool for web developers that want to analyze and improve a website’s load times and over all user experience but the popular tool has been slow at incorporating HTTP/2 into the test results.

If your website is using HTTP/2 it makes a lot of Google’s site speed improvement suggestions useless. Google is of course aware of this issue and expected to update their page speed tool and web master documentation shortly to include HTTP/2.

 

 

 

Getting Started With Accelerated Mobile Pages (AMP)

/in , /by

amp-accelerated-mobile-pages
Google is in the process of launching accelerated mobile pages site wide for their mobile search results, let’s take a look at how accelerated mobile pages can benefit your business and create a better user experience for mobile devices.

 

What is an Accelerated Mobile Page?

Google announced Accelerated Mobile Pages (AMP) in late 2015, an open-source project intended to enable publishers to easily improve website load times ultimately leading to a more positive user experience for mobile users without compromising any ad revenue.

Even though an experienced web developer can typically achieve similar performance results through in testing and optimizing, this process is commonly neglected due to time or other constraints. AMP enables these optimizations to be easily implemented without any significant alteration to the mobile web experience.

AMP is in essence a blueprint for creating mobile webpages which consists of three main parts:

 

AMP HTML:

A markup language with some additional customs tags & properties along with some tighter restrictions. If you’re already fluent in regular html, picking up AMP HTML you should have no trouble configuring existing pages using it.

 

AMP JS:

A framework for the JavaScript of mobile pages. It’s primarily used for resource management and does not allow the use of 3rd party JavaScript.

 

AMP CDN:

A Content Delivery Network which is optional, it allows you to take an AMP enabled page, cache the page and automatically apply some performance adjustments.

 

How To Implement AMP On Your Site

To start, you will need to have a copy of two versions for every article page, the original article page that the average user will see along with an AMP version.

AMP does not allow things like 3rd party JavaScript or form elements so you will likely have issues using on page comments, lead forms, and some other common elements that your standard page version might feature.

It’s also a possibility that you will need to rewrite the template of your site to compensate for the new restrictions. In AMP all CSS be less then 50kb and “in-line”. Also because custom fonts can be very load intensive, they are required to be loaded using amp-font extensions so that there is more control over how they load.

Rich media must be handled differently. Images are required to utilize the custom amp-img element and have to include a height & width. Videos must use a custom tag to embed locally hosted videos through HTML5 (amp-video). There are also extended components for image lightboxes, slideshows and embedding social media feeds.

The new tag components aren’t hard to get used to but they do require a bit of foresight when planning the creation of your website.

 

How Can I Start Using AMP In WordPress?

The simplest way to start playing with AMP is to implement it on a WordPress site. WordPress is developing an official AMP plugin with Automaticc and it’s constantly being updated on Github.

1) Install The Official WordPress AMP Plugin

Simply visit the amp-wp page on Github and download the .zip file. Install the amp plugin like you would with any WordPress plugin and after it’s been installed you just need to append “/amp/” to a page or article (If you don’t have a good permalink structure you can also append “?amp=1”).

2) Validate & Adjust

The Google Search Console will eventually notice the AMP version of your articles from the “rel=”amphtml” tag the plugin appends which allows easy bulk article validation. The problem with this however is that Google does not currently detect the changes very quickly, a correction may take multiple days to be reflected in Google Search Console.

If installing the AMP WordPress plugin is not enough, you may need to go through and manually validate pages that you want to benefit from Accelerated Mobile Pages. Some common issues are forgetting to specify the height & width attribute for images and updating old embed code that is using http instead of https.

3) Use Schema Markup For Validation

It’s important to use valid schema markup for your AMP pages. You can test your pages for valid markup using the Structured Data Testing Tool provided by Google.

4) Configuring Google Analytics With The AMP WordPress Plugin

The current version of the AMP WordPress Plugin does not automatically enable amp-analytics but the process of enabling it is fairly simple

If you want to enable Google Analytics to work with the AMP WordPress Plugin, simply edit amp-post-template-actions.php either through your wordpress dashboard via Plugins > Editor > “AMP” or by using FTP and add the following code at the bottom of the file.

 

Make sure to replace UA-YOURID-Y with your website’s unique Google Analytics property ID.

After adding the code and saving the file, you should now have a basic AMP setup on your WordPress website with tracking enabled.

 

Final Thoughts

Accelerated Mobile Pages are a simple yet effective way to boost the performance of your mobile website(s) and ultimately improve the mobile experience for your users.

How Using a Cache Plugin Benefits Your Website

/0 Comments/in /by

wordpress

The benefits of having a cache plugin and why you should be using one

If you’re not familiar with what a cache plugin plugin does, it’s all about your website’s speed. The speed in which pages on your website load is an important factor major Search Engines such as Google, Bing & Yahoo take into consideration when ranking your website. Numerous studies have consistently shown that an average %80 of visitors will try another website if your site’s pages do not load in under 5 seconds.

Caching is the process of creating an HTML copy of a page on your website which is stored on your webhost’s server which allows webpages to be display faster to your visitors.

Even without installing a cache plugin your webpages are still technically being cached but the cache isn’t being saved. If you install and configure a cache plugin then it allows visitors who have already visited a particular webpage once to avoid unnecessarily re-running any queries again which results in much faster page load times.

There are many ways to check and increase the speed of your website and many of the tools can actually determine for you if there are any issues with your current caching strategy. Every website can benefit from a properly configured cache plugin so it’s important that you’re using one. One of the most popular cache plugins is W3 Total Cache, here are some of it’s features and benefits:

  • W3 Total Cache can cache every webpage along with it’s content, JavaScript, CSS, search results, database objects, etc.
  • It can reduce what’s on your webpages to improve the speed. If a page or post contained extra CSS or comments, w3 Total Cache is capable of combining the CSS files into one request.
  • It fully supports the integration of Mobile, WP-CLI and CDN.

It’s important to note that you should only ever have one cache plugin installed at a time. If you’re currently using a cache plugin, you need to disable it before installing & activating W3 Total Cache. You should also ensure that you have a sufficient amount of memory to handle your cache because W3 Total Cache is very powerful. For the majority of websites this shouldn’t be an issue.

W3 Total Cache is so popular even Google engineer Matt Cutts uses the plugin for his blog.