performance Archives

WP Beginner

6 Best WordPress Slider Plugins – Performance + Quality (Compared)

Admin Posted On May 31, 2019

Are you looking to add a slider in your WordPress site? There are dozens of WordPress slider plugins on the market that you can use.

However, not all slider plugins are created equal. Most of them load too many scripts which slow down your website.

In this article, we will compare the top WordPress slider plugins based on their speed, ease of use, and overall features. The goal is to find the best WordPress slider plugin in terms of performance and quality.

The Problem With WordPress Sliders

Most WordPress sliders are slow. If it is not properly coded, a slider can significantly increase your page load time. If you do not have a good WordPress hosting service, then your server may respond even slower than normal.

The other problem with WordPress slider plugins is ease of use. Most of them are bloated and come with a learning curve for beginners.

Last but not least, you want to make sure that your WordPress slider is mobile responsive. A lot of them are not.

So how do you go through hundreds of slider plugins and check for all of this? Well, you don’t have to. We did the research for you and below are our results for the best WordPress slider.

The Contenders for Best WordPress Slider Plugin

For the sake of this article, we chose the top and highly recommended WordPress slider plugins. While doing our research, we noticed that these slider plugins were among the most used and recommended.

We decided to run some simple tests and see how each one of them performs. The criteria we are looking for is speed, ease-of-use, features, and compatibility.

Ready, let’s get started.

Speed – Which is the Fastest WordPress Slide Plugin?

The #1 problem with sliders is that they could slow down your website. Performance and speed not only affect user experience, but they also have a significant impact on SEO.

This is why slider speed is on the top of our comparison. We want to see which is the fastest slider plugin and then we will compare their features to see if the performance impact can be justified.

To find this out, we installed each slider plugin on a demo WordPress site. We uploaded the same images to create a slider. We didn’t change any other settings and embedded the slider on a blank WordPress page.

After that, we used Pingdom speed testing tool to run the test. Following are the results of our test for each slider plugin.

Slider Plugin	Page Load time	Requests	Page size
Soliloquy	860 ms	22	679 KB
MetaSlider	863 ms	25	229 KB
Smart Slider 3	865 ms	19	382 KB
Slider by Nivo	928 ms	16	306 KB
Slide Anything	866 ms	18	324 KB
Master Slider	900 ms	22	345 KB

As you can see in the above scores, Soliloquy was the fastest loading WordPress slider in our tests. Closely followed by MetaSlider.

If you want a high-performance fast WordPress site, then Soliloquy is the best WordPress slider for you.

Now you might think that all other sliders performed well too. Why do we think that Soliloquy is the fastest?

If you notice the test results, you will see that Soliloquy increased page load size without affecting the speed.

This is achieved by using a neat little trick. Basically, it loads your cover slide first and then other slides are loaded asynchronously. In other words, you can upload high-quality slider images with minimum impact on performance.

Ease of Use – Which WordPress Slider Offers Better User Experience?

Creating sliders is not as simple as we would like it to be. There is too much technical language used in the user interface of all top WordPress slider plugins.

We want our slider plugin to be beginner friendly and something that just works out of the box. Let’s see how our top contenders perform in this regard.

Soliloquy

Soliloquy is the most beginner friendly WordPress slider plugin on our list. You can simply create a new slider and then just drag and drop your images.

It takes care of the other things like resizing images, choosing a slider theme, navigation style, etc. You can simply hit the publish button to save the slider.

Soliloquy user interface

The reason why it’s easy to use is that it uses the WordPress coding guidelines and blends in with your native WordPress admin interface. Soliloquy has a simple but intuitive user interface to create slides using the default WordPress media uploader.

Adding your slider to WordPress posts and pages is also a breeze. Soliloquy gives you a number of options including shortcodes, a Gutenberg editor block, a button for the old classic editor, and a widget.

Soliloquy block in Gutenberg editor

MetaSlider

MetaSlider is another easy to use WordPress slider. Creating a new slider is quite simple and it automatically takes care of all the technical settings for you.

MetaSlider user interface

It gives you options to choose different slider scripts, slider theme and styles, add captions and SEO titles, and more. Beginners can ignore all those options and can simply insert slider anywhere on their site using shortcode, Gutenberg block, widget, or template tag.

Smart Slider 3

Smart Slider 3 uses a different user interface which feels different than the rest of the WordPress admin screens. It is somewhat easy to use and beginners can find their way around.

Smart Slider 3 user interface

However, it packs a lot of options which may not be as easy to discover for beginners. The overall user experience is satisfactory and you can easily add a slider into posts and pages using the default block, shortcode, and template tag.

Slider by Nivo

Slider by Nivo is a free slider plugin that is easy and quite straight forward. You can simply upload slider images using the media uploader and rearrange slide order with drag and drop.

Using the same media uploader interface, you can add captions, link, and alternate text to your slide images. It comes with shortcodes and template tags so you can add a slider to your posts, pages, and template files.

Add new Nivo slider

Nivo Slider is an image slider and does not support video and other multimedia type. It comes with a nice bundle of themes that you can use and lots of transition effects to choose from. However, if you are counting on features and options, then Nivo falls behind other sliders on this list.

Slide Anything

Slide Anything allows you to add anything into a slider. You can add text, HTML, images, videos, or anything else you want. It is not as easy to use or intuitive as some other WordPress sliders and many of them also allow you to add other types of content.

Slide Anything slide editor

You will have to insert all your slide content inside an HTML editor. This makes it a bit difficult to keep your slides the way you want them to be.

Master Slider

Master Slider is another slider plugin with a non-native user interface that looks different than the rest of the WordPress screens. It is easy to use, but many of the options are hard to locate.

It starts with a template selection and automatically imports some demo slides for you to start with. You can then delete those slides and replace them with your own.

It has beautiful templates and can be easily inserted into WordPress posts, pages, and sidebars by using the shortcode, Gutenberg block, and template tag.

Master Slider works best with WordPress themes that automatically load jQuery on each page load. If your theme doesn’t do that, then you will need to change plugin settings and force it to load assets on page load.

Features – Which Slider Plugin for WordPress Offers More Choices?

If all you want to do is create simple image slide shows, then any of the free WordPress slider plugins on this list can do the job.

However, Soliloquy and MetaSlider come with a lot more features. They are fully responsive sliders and look equally beautiful on all devices and screen sizes. Both support video slides, HTML 5 videos, featured content slides, themes, animations, and transitions.

They both offer simple and easy to use interface and they both have additional add-ons that you can install to add more features.

Soliloquy has slightly more features like WooCommerce add-on for product slideshows, social media integration, Instagram add-on, and more.

Pricing

Cost is another decisive factor that might help users choose a slider plugin for WordPress.

Here is the price for a single site license of these plugins.

Slider Plugin	Single Site License
Soliloquy	$19
MetaSlider	$39
Smart Slider 3	$35
Slider by Nivo	Free
Slide Anything	Free
Master Slider	Free

Among the paid plugins Soliloquy may look the cheapest, but their single site license doesn’t give you access to all the add-ons. You’ll need the developer license to access all add-ons, which costs $99.

On the other hand, both MetaSlider and Smart Slider 3 give you access to all add-ons even with a single site license.

Conclusion – The Best WordPress Slider Plugin

After comparing these plugins we can confidently say that the best WordPress slider plugin award goes to:

Soliloquy

It is by far the fastest WordPress slider plugin in the market. It follows all of the coding best practices, it is very well documented, easy to extend for developers and even easier to use for users.

Use our Soliloquy Coupon to get an extra 10% off.

Our second choice would be SmartSlider 3. It offers a very good balance of functionality and performance. The user interface is easy to use for beginners as well as developers.

We hope this article answers the questions regarding the best WordPress slider plugin in terms of performance and quality. You may also want to see our comparison of the best WordPress caching plugins to improve your website performance.

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 6 Best WordPress Slider Plugins – Performance + Quality (Compared) appeared first on WPBeginner.

Credited Source

1 Views

WP Lift

Flywheel Review (WordPress Hosting): Hands-On and Performance Tested

Admin Posted On May 15, 2019

Thinking about using Flywheel to host your WordPress site? In our Flywheel review, we’ll go hands-on and show you how Flywheel performs, as well as how Flywheel helps you save time when managing your WordPress site.

In general, Flywheel offers stellar performance powered by the Google Cloud platform, has a custom hosting management dashboard that’s a joy to use, and offers a bunch of helpful features, especially if you’re a freelancer or agency who builds WordPress websites for clients.

Flywheel Review: The Feature List

Before I get to the more hands-on section of this Flywheel review, let me give you the super fast rundown of the feature list so that you know what to expect:

Google Cloud infrastructure
Automatic daily backups
Staging site
PHP 7.2+
7 different data center choices
Security firewalls and malware monitoring
Integrated CDN via Fastly
Free SSL certificate
Free migrations (unlimited)
Automatic updates
Lots of helpful development tools
24/7 support via live chat or ticket. On higher tier plans, you also get phone support

Flywheel Performance Tests:

All the features I listed above are great, but the most important question about any host is still “can it serve up your website quickly and reliably?”.

So before we get to anything else, let’s run some performance tests and see how Flywheel performs.

Again, Flywheel uses Google Cloud infrastructure, so you’ve already got a solid foundation. Then, Flywheel adds on its own server-level caching system, a built-in CDN powered by Fastly, and other tweaks.

The end result? It’s pretty fast.

To analyze this, I set up a test site using the Astra theme and one of its WooCommerce starter sites. Beyond that, I installed some other relevant plugins to simulate a real site, like Yoast SEO.

Then I ran it through a few tests:

WebPageTest to assess page load times.
Load Impact to see how it performs under scale.

First, I set up WebPageTest to run 9 separate tests from Chicago, with no connection throttling. Here’s how Flywheel performed:

Median load time: 2.063 s
Mean load time (9 separate tests): 2.362 s

flywheel webpagetest results

Having run similar tests on other managed WordPress hosts, I can say that Flywheel’s performance is quite good and comparable to similarly-priced managed WordPress hosts like Kinsta and WP Engine.

Note, page load times in WebPageTest are always going to be a little slower than what you’d expect from something like Pingdom. This is because WebPageTest uses a different calculation for what is “loaded”.

For example, if I ran my Flywheel WooCommerce test site through Pingdom, you can see how it loads in a much more impressive, 1.14 seconds:

Flywheel review pingdom perfromace

So in these one-off performance tests, Flywheel does quite well. But can it keep up that performance when the heat is on?

That is, if your site is getting heavy traffic, will Flywheel load your site just as quickly for the 50th active visitor as it does for the first visitor?

That’s what Load Impact helps us understand…

To test how Flywheel performs under scale, I set up Load Impact to simulate 50 visitors over 5 minutes. Here’s how Flywheel did:

Flywheel load impact test

If you’re not sure what this chart means, it’s essentially saying that as the number of active visitors increases (blue line), the page load times for the site are rock solid around 450 ms (green line). This is what you want, as it’s telling you that Flywheel can still load fast in a real-world, high-traffic situation.

On cheaper shared hosts, you’ll often see the page load times become erratic as the number of visitors increases.

Exploring the Custom Flywheel Hosting Dashboard

Another benefit of hosting your WordPress site with Flywheel is that you get a really well-designed custom hosting dashboard.

When you’re managing your own sites, this dashboard helps you with:

Backups
Staging sites
Stats
Caching
Database management

It also makes it really easy to give full or limited access to other people. And if you’re working with clients, you get some cool features there, too (more on that in the next section).

When you land in the main dashboard, you’ll get an overview of your site, as well as a list of everyone who has access (the Collaborators):

Flywheel dashboard

Let’s take a look at some of the other areas…

Automatic Backups and Easy Management

Flywheel automatically backs your site up every night. But you can also manually run backups at any time from the Backups area in your Flywheel dashboard.

There are a few things I like here:

Flywheel stores the last 30 backups, which is more than a lot of hosts (many hosts will only store 14)
You get a little summary of the site’s stats to help you differentiate backups, including how things have changed vs previous backups
You can easily restore or download any backup

Backups

Simple Staging Sites

A staging site is essentially a duplicate version of your live site that you can use to safely test changes and updates. Once you’re happy with how things work on your staging site, you can “push” it live. It’s super helpful.

Flywheel makes staging sites quite simple.

Once you enable the staging functionality, you’ll get a new Staging area in your dashboard that lets you manage settings for that site, as well as push your changes live:

Staging

Lots of Other Helpful Features

Backups and staging are the two biggies. But you also get some other convenient features.

For example, you can control caching and manage WordPress versions:

You also get a custom database management tool – no more phpMyAdmin:

There’s also a stats area that lets you monitor your usage. And if you’re managing multiple sites, you’ll get a nice overall dashboard that lets you use search, filters, and tags to organize and find sites:

Awesome Development and Billing Workflows

It’s important to preface this section of our Flywheel review with a reminder that anyone can use and benefit from Flywheel hosting. That is, Flywheel is not just for people who build websites for clients for a living.

However, if you do do that, then Flywheel has a bunch of features to make your life easier, which I think is one of the most unique things about Flywheel in comparison to other managed WordPress hosts.

Integration With Local

Local is an awesome WordPress local development tool. It’s free and available to everyone (including non-Flywheel customers).

However, if you host at Flywheel, you get some extra goodies. Notably, the ability to push your site from local development to live hosting with the click of a button (you can also pull down a site from live hosting to work on it locally).

This is a nice alternative to staging that you might prefer.

Billing Transfer

With Flywheel, you can develop a client’s site on your own hosting. Then, once the site is ready to go live, you can easily transfer the billing responsibility over to your client (while still keeping your access to the site to help your client manage it).

This also means that you can manage all of your separate client sites from one Flywheel dashboard (while keeping clients’ access separate, of course).

Simpler SFTP

Rather than forcing you to use separate SFTP passwords to manage different client sites, Flywheel lets you access all your sites from one single login (your Flywheel username/password).

The sites are automatically organized by who owns them to help you find them.

White Label

For an extra fee ($99 per month), you can white-label the Flywheel dashboard to use your own branding instead of Flywheel’s branding. You can even sell your own services – like maintenance – via your white-labeled dashboard.

Again, this is a pretty unique feature that I haven’t seen at other managed WordPress hosts.

Flywheel Pricing: How Much Will All This Cost?

Flywheel is competitively priced, with an entry-level plan for up to 25,000 monthly visits starting at just $23 per month (annually) or $25 per month (month-to-month).

Here’s how it stacks up to other common managed WordPress hosts:

	Flywheel	Kinsta	WP Engine
Price (Month-to-Month)	$25	$30	$35
Visitors Allowed	25,000	20,000	25,000
Storage	5 GB	5 GB	10 GB
Bandwidth	50 GB	Unlimited	50 GB

So you can see Flywheel actually comes in a little under those other hosts for a similar number of visitors per month.

From there, prices go up accordingly based on the number of sites you can use and the other metrics. Here are the month-to-month prices:

Flywheel pricing

If you go over your limit, Flywheel will not cut off your site. Instead, they’ll charge overage fees, which are:

$1 per extra 1,000 visitors over your monthly limit
$1 per extra storage GB over your storage limit

There aren’t any listed overage fees for bandwidth, so I’m not sure how that works.

All plans come with free migrations. And you can also sign up for an account and play around with the dashboard at no charge with no credit card required, which lets you get a feel for how things work.

Final Thoughts on Flywheel

Overall, Flywheel is definitely one of the best managed WordPress hosts, and if managed WordPress hosting is what you want, you won’t go wrong choosing Flywheel.

Flywheel has:

Stellar performance and reliability powered by Google Cloud
A great custom hosting dashboard, with nice managed features like automatic backups and staging
Lots of helpful tools for agencies and freelancers

And it gives you all that for a price that’s a little bit under the direct competition.

If you’re interested, you can sign up for a free trial account with no credit card required. You’ll only pay when you want to make your site live.

Give it a spin and see if it’s right for you:

Get Flywheel

Credited Source

1 Views

WPMU Dev

How to Use Googles Speed Index to Improve WordPress Performance

Admin Posted On May 14, 2019

Screenshot of frames captured in Lighthouse used to calculate speed index

Does your site load content steadily like the tortoise, or wait until the race is almost over before it kicks into high gear, like the hare? In the race to provide the best user experience, steady is best. That’s why Google PageSpeed Insights measures your WordPress Speed Index to determine how your site content loads over time.

The Speed Index can tell you if you’re providing enough visual feedback as your site loads. It’s an important metric for understanding what your visitors are experiencing.

In this post, I’ll show you how Speed Index is calculated, how to run a WordPress Speed Index test in Chrome and tell you what you should be aiming for. Then, we’ll cover some techniques you can use to improve your Speed Index.

What is Speed Index in Lighthouse?

Lighthouse is the open source tool Google PageSpeed Insights utilizes to analyze a webpage.

Lighthouse grades your webpage on the following criteria:

Is it being served from a secure location?
Is it accessible for all users?
Are visitors who are on unreliable network connection (like those on mobile) able to reach it?
Do users perceive your site as fast?

It’s in Google’s best interest to prioritize high-quality sites in search rankings in order to provide the best user experience. Speed Index is one metric used to assess how fast your site feels for users, in a way that captures how your site actually performs in real life.

How Google Speed Index is Measured

Here’s how Speed Index is defined in the Lighthouse documentation:

Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated.

Could that be any more vague? That doesn’t tell us a whole lot about how this information is captured so we could improve our scores, so I had to go to the source.

WebPagetest.org, in partnership with Google, introduced the Speed Index metric to their test in April 2012 and they fully break down how the Speed Index calculations work. Lighthouse uses a node module called Speedline whose current implementation is based on the Visual Progress from Video Capture method that was introduced by WebPagetest.org.

Even though it’s measured in milliseconds, Speed Index isn’t measured with a stopwatch like first paint; it’s calculated using a cumulative distribution function of a log-normal distribution. I know, huh?

Here’s how it works, when you perform a Google PageSpeed Insights audit, Lighthouse records a video of your web page loading. It only includes everything above the fold, which is why Speed Index will vary based on the viewport you’ve set for your test.

The video is how Lighthouse is able to “see” your site. It then breaks down the whole little video into frames. There are 10 frames per second. So if your site loads in 3 seconds, then there will be 30 frames, showing your site’s progress.

Lighthouse compares each frame to the final frame to determine how complete it is. Is it 5% loaded? 10%? 20%? 30%? etc.

Then it plots the completeness of your page on the y-axis and elapsed time on the x-axis so it can determine the average. The overall score is the sum of the individual intervals. The graph for the frames above would look something like this, with the blue area representing the Speed Index.

Graph of the speed index for the images above — The area in blue above the line is the Speed Index

There is also the Visual Progress from Paint Events method for determining Speed Index WebKit browsers, that does not require capturing video and instead relies on collecting the timeline data such as paint events and other useful events. This isn’t supported on all browsers so it varies and isn’t as widely used so we won’t get into it in detail here.

How to Get Speed Index from Google Chrome

Now that you know how the Speed Index is being calculated, you should take the time to run your most popular pages through Google PageSpeed Insights.

If you’d like to do this directly in Google Chrome, hit Ctrl+Shift+i or right-click in the browser window and select Inspect

Go to the Audits tab. From there you’ll be able to select what kind of audit you want to run a test for mobile or desktop. Select the Performance checkbox to get the Speed Index, then push the blue Run Audits button to begin.

Screenshot of Chrome Developer Tools Audit Tab — You don’t need to go to the Google PageSpeed Insights page, this will give you the same results since they both utilize Lighthouse

What Speed Index Score Should You Be Aiming for in Google?

Alright, so you’ve run your tests, but what’s a good score?

According to Paul Irish, who works on the Google Chrome team, the ideal Speed Index is less than 1000ms, which is equivalent to 1 second.

In order to improve, you need to get your Speed Index score as low as possible.

In March 2018, the NCC Group analyzed the home pages of 50 retailers in the UK and found that the average Speed Index score was between 3500-8000 ms. Dareboost did a similar analysis on European publishers and less than 5% of sites had a Speed Index score that was less than 1000 ms.

With that said, reducing your Speed Index to less than a second isn’t always feasible. In these cases, the best approach is simply to outperform your competitors.

We wrote a guide on how to get a 100 in Google PageSpeed Insights.

How to Improve WordPress Speed Index

Improving the Speed Index is a matter of improving the actual performance as well as the perceived performance of your site.

You can optimize performance by:

Optimizing Content Efficiency
Optimizing the Critical Rendering Path

To improve perception, there’s a wide variety of progressive loading techniques you can use.

If It Doesn’t Spark Conversions, Get Rid of It

The most effective way to improve both performance and perception is by eliminating unnecessary site assets. Your site gets cluttered too! Images, JavaScript files, CSS, etc. that don’t add a lot of value or are no longer being used, should be cut loose. You should repeat this process periodically, especially when you add new elements to your site.

Also, measure the value that new components add to your site. If that new resource-intensive image slider, video background or third font isn’t converting visitors then get rid of it.

Need help convincing your clients to omit page elements? Run this mobile PageSpeed test. On the results page, scroll down to the bottom, and open the Evaluate the impact of a faster site section. The calculator will help you show how increasing site speed can improve annual revenue.

Screenshot of revenue calculator that shows how much you can earn by improving site speed — I mean, that number makes a pretty compelling argument

Use predefined heights and placeholders

Loading a framework for the rest of your content gives your user the impression that the site is loading in an organized and intentional way.

To create a framework, create a space for elements of your site that take longer to load, such as images and videos. You can do this by setting pre-defined heights for your containing elements in CSS, or loading placeholder images or icons.

Not only does this let the visitor know that more content is coming, so they can decide if they’d like to wait, but this prevents the site contents from shifting erratically as more elements fall into place.

Optimize Your Images

Images are one of the worst offenders when it comes to adding unnecessary weight to your webpages. The best way to cut down on page weight is by eliminating unnecessary images, then optimize what’s left by doing the following:

A quick and easy way to optimize your images is by using a plugin like Smush Pro. Try Smush Pro free for 30 days.

Optimize Stylesheets, Scripts, and Fonts

When a browser is building your page, when it comes across a CSS file or a JavaScript file, it needs to execute those files before it continues to render the page. That’s why CSS and JavaScript files that reside in the head of your page are referred to as render-blocking resources. Since they’re blocking the rendering of your content, you must optimize them so they take the least time possible to load.

Fonts also add a lot of weight to webpages, since each font is an additional resource that the browser needs to spend time downloading. Some fonts may block the rendering of the page. By default, fonts don’t begin downloading until the DOM and CSSOM are constructed, which can result in delayed text rendering.

Here’s how to optimize the additional assets needed to build your page:

As I said earlier, the best way to optimize something is to flat-out delete it. Cut the weight and move on. For webfonts, reduce the number of font variants, so instead of three different bold weights, maybe use one or none if you can get by without it.
Don’t load one huge JavaScript file. Use code splitting to break up your file and load the scripts that aren’t critical to the rendering of the DOM to the bottom of your page.
Compress and minify your files so they take less time to download.

Want an easy all-in-one solution that was designed to help you improve your Google PageSpeed Insights score? Hummingbird can help.

Optimize the Critical Rendering Path

The critical rendering path refers to all of the assets the browser needs to render to respond to the visitor’s current request. You want to prioritize the assets above the fold that are most important right now and load them as quickly as possible.

This requires that you analyze the components in the critical rendering path and look for ways to improve, consolidate and organize the whole load. Think of it like running errands. If you map out your route ahead of time, you can get more done in less time than if you were zipping all over town doing things as you thought of them. The haphazard way will burn through resources running back and forth.

Here’s how Google recommends you optimize the critical rendering path:

Analyze and characterize the elements in your critical path.
Minimize number of critical resources. If you can, eliminate them. For the rest, defer their download or load them asynchronously.
Optimize the size of assets by compressing or minifying to reduce the download time.
Download all critical assets as soon as possible to shorten the critical path length.

Utilize Caching

Once you have your new optimized page done, then you’re ready to utilize page caching.

Caching is a reliable way to improve site speed for your visitors by storing assets in a cache for faster retrieval. There are several kinds of caches.

With HTTP caching, the browser stores a copy of assets downloaded via HTTP by the user in its cache so it will be able to retrieve them without making an additional trip to the server. This dramatically improves performance for repeat visitors when done properly.

We recently compared Hummingbird to other popular caching plugins and Hummingbird out optimized all of them.

You should also use intermediary caches such as content delivery networks, or CDNs to serve assets from a closer data center to the user.

Speed Index Limitations

While Speed Index is better than timeline based metrics for helping us measure user experience, it’s not perfect.

If your site has movement, then the Speed Index won’t be accurate.

Here are some moving elements that might affect your score:

Videos that autoplay
Carousels
GIFs

Additionally, if you do not create placeholders for the elements on your site and the contents of your page shift as the content loads, this layout instability will also return an inaccurate Speed Index.

Still, Speed Index is one of the best tools we have at the moment, so even with these limitations, it’s still useful. Used in combination with the other metrics provided in Google PageSpeed Insights, Speed Index helps you get a complete overview of what you need to work on to improve your site for your visitors.

How to Improve Speed Index with a WordPress Plugin

WordPress performance plugins have come a long way. You no longer need to use a set of different plugins to improve every aspect of your site’s performance. You can use an all-in-one plugin like Hummingbird, which was designed to help you pass all the audits in Google PageSpeed Insights.

We designed Hummingbird not only to help you increase your Speed Index score positively but to truly help you deliver a better user experience for your peeps. Combine Hummingbird with Smush to get the most of the WordPress speed optimization service WPMU DEV offers.

Credited Source

35 Views

WP Tavern

WooCommerce 3.6 Released with New Product Blocks and Major Performance Improvements – WordPress Tavern

Admin Posted On April 19, 2019

WooCommerce 3.6 Released with New Product Blocks and Major Performance Improvements – WordPress Tavern

WooCommerce 3.6 was released this week after six months in development. Store owners with sites running on WordPress 5.0+ will now have access to eight new product blocks, including hand picked products, featured products, products by category/attribute, sale products, new products, top rated, products, and best selling products.

These blocks were previously available as a feature plugin but have now been rolled into WooCommerce core. The plugin now requires WooCommerce 3.6 and will continue to be used for iterating and exploring future WooCommerce block editor features.

Performance improvements were one of the major focuses for this version, which introduces product data lookup tables. WooCommerce core developers’ long term plan is to move post meta to custom tables and a feature plugin is currently in development towards this goal. In the meantime, lookup tables provide a structured index for product data that speeds up querying. This version also brings improvements to transient invalidation, changes to REST API initialization, caching improvements, and more.

WooCommerce developer Timmy Crawford highlighted a few frontend performance improvements in the 3.6 release post:

A 62% improvement in the load time when ordering and filtering products
Reduced overall load time by bypassing inactive webhooks
Reduced the load time for pages with category or product attribute lists
Reduced load time of product pages with attributes

This release also includes the controversial new marketplace suggestions that advertise official extensions inside the WooCommerce admin. The setting for turning them off can be found under the “Accounts & Privacy” section of the admin.

For the full list of additional enhancements in 3.6, check out the release post or view the plugin’s changelog. The release should be backwards compatible with sites running WooCommerce 3.0+, but testing how the update affects themes and extensions is highly recommended before updating. Version 3.6.1 was released today to fix some issues 3.6.0 had with certain hosting environments.

Credited Source

36 Views

Site Point

Optimize the Performance of a Vue App with Async Components — SitePoint

Admin Posted On April 19, 2019

Want to learn Vue.js from the ground up? Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month or try our 7 day free trial.

Single-page applications sometimes cop a little flack for their slow initial load. This is because traditionally, the server will send a large bundle of JavaScript to the client, which must be downloaded and parsed before anything is displayed on the screen. As you can imagine, as your app grows in size, this can become more and more problematic.

Luckily, when building a Vue application using Vue CLI (which uses webpack under the hood), there are a number of measures one can take to counteract this. In this article, I’ll demonstrate how make use of both asynchronous components and webpack’s code-splitting functionality to load in parts of the page after the app’s initial render. This will keep the initial load time to a minimum and give your app a snappier feel.

To follow this tutorial, you need a basic understanding of Vue.js and optionally Node.js.

Async Components

Before we dive into creating asynchronous components, let’s take a look at how we normally load a component. To do so, we’ll use a very simple message component:

<!-- Message.vue -->
<template>
  <h1>New message!</h1>
</template>

Now that we’ve created our component, let’s load it into our App.vue file and display it. We can just import the component and add it to the components option so we can use it in our template:

<!-- App.vue -->
<template>
  <div>
    <message></message>
  </div>
</template>

<script>
import Message from "./Message";
export default {
  components: {
    Message
  }
};
</script>

But what happens now? The Message component will be loaded whenever the application is loaded, so it’s included in the initial load.

This might not sound like a huge problem for a simple app, but consider something more complex like a web store. Imagine that a user adds items to a basket, then wants to check out, so clicks the checkout button which renders a box with all details of the selected items. Using the above method, this checkout box will be included in the initial bundle, although we only need the component when the user clicks the checkout button. It’s even possible that the user navigates through the website without ever clicking the checkout button, meaning that it doesn’t make sense to waste resources on loading this potentially unused component.

To improve the efficiency of the application, we can combine both lazy loading and code splitting techniques.

Lazy loading is all about delaying the initial load of a component. You can see lazy loading in action on sites like medium.com, where the images are loaded in just before they’re required. This is useful, as we don’t have to waste resources loading all the images for a particular post up front, as the reader might skip the article halfway down.

The code splitting feature webpack provides allows you to split your code into various bundles that can then be loaded on demand or in parallel at a later point in time. It can be used to load specific pieces of code only when they’re required or used.

Dynamic Imports

Luckily, Vue caters for this scenario using something called dynamic imports. This feature introduces a new function-like form of import that will return a Promise containing the requested (Vue) component. As the import is a function receiving a string, we can do powerful things like loading modules using expressions. Dynamic imports have been available in Chrome since version 61. More information about them can be found on the Google Developers website.

The code splitting is taken care of by bundlers like webpack, Rollup or Parcel, which understand the dynamic import syntax and create a separate file for each dynamically imported module. We’ll see this later on in our console’s network tab. But first, let’s take a look at the difference between a static and dynamic import:

// static import
import Message from "./Message";

// dynamic import
import("./Message").then(Message => {
  // Message module is available here...
});

Now, let’s apply this knowledge to our Message component, and we’ll get an App.vue component that looks like this:

<!-- App.vue -->
<template>
  <div>
    <message></message>
  </div>
</template>

<script>
import Message from "./Message";
export default {
  components: {
    Message: () => import("./Message")
  }
};
</script>

As you can see, the import() function will resolve a Promise that returns the component, meaning that we’ve successfully loaded our component asynchronously. If you take a look in your devtools’ network tab, you’ll notice a file called 0.js that contains your asynchronous component.

Code splitting webpack

Conditionally Loading Async Components

Now that we have a handle on asynchronous components, let’s truly harvest their power by only loading them when they’re really needed. In the previous section of this article, I explained the use case of a checkout box that’s only loaded when the user hits the checkout button. Let’s build that out.

Project Setup

If you don’t have Vue CLI installed, you should grab that now:

npm i -g @vue/cli

Next, use the CLI to create a new project, selecting the default preset when prompted:

vue create my-store

Change into the project directory, then install the ant-design-vue library, which we’ll be using for styling:

cd my-store
npm i ant-design-vue

Next, import the Ant Design library in src/main.js:

import 'ant-design-vue/dist/antd.css'

Finally, create two new components in src/comonents, Checkout.vue and Items.vue:

touch src/components/{Checkout.vue,Items.vue}

Making the Store View

Open up src/App.vue and replace the code there with the following:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <items></items>
  </div>
</template>

<script>
import items from "./components/Items"

export default {
  components: {
    items
  },
  name: 'app',
  data () {
    return {
      msg: 'My Fancy T-Shirt Store'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

There’s nothing fancy going on here. All we’re doing is displaying a message and rendering an <items> component.

Next, open up src/components/Items.vue and add the following code:

<template>
  <div>
    <div style="padding: 20px;">
      <Row :gutter="16">
        <Col :span="24" style="padding:5px">
          <Icon type="shopping-cart" style="margin-right:5px"/>{{shoppingList.length}} item(s)
          <Button @click="show = true" id="checkout">Checkout</Button>
        </Col>
      </Row>
    </div>
    <div v-if="show">
      <Row :gutter="16" style="margin:0 400px 50px 400px">
        <checkout v-bind:shoppingList="shoppingList"></checkout>
      </Row>
    </div>
    <div style="background-color: #ececec; padding: 20px;">
      <Row :gutter="16">
        <Col :span="6" v-for="(item, key) in items" v-bind:key="key" style="padding:5px">
          <Card v-bind:title="item.msg" v-bind:key="key">
            <Button type="primary" @click="addItem(key)">Buy ${{item.price}}</Button>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { Card, Col, Row, Button, Icon } from 'ant-design-vue';

export default {
  methods: {
    addItem (key) {
      if(!this.shoppingList.includes(key)) {
        this.shoppingList.push(key);
      }
    }
  },
  components: {
    Card, Col, Row, Button, Icon,
    checkout: () => import('./Checkout')
  },
  data: () => ({
    items: [
      { msg: 'First Product', price: 9.99 },
      { msg: 'Second Product', price: 19.99 },
      { msg: 'Third Product', price: 15.00 },
      { msg: 'Fancy Shirt', price: 137.00 },
      { msg: 'More Fancy', price: 109.99 },
      { msg: 'Extreme', price: 3.00 },
      { msg: 'Super Shirt', price: 109.99 },
      { msg: 'Epic Shirt', price: 3.00 },
    ],
    shoppingList: [],
    show: false
  })
}
</script>
<style>
#checkout {
  background-color:#e55242;
  color:white;
  margin-left: 10px;
}
</style>

In this file, we’re displaying a shopping cart icon with the current amount of purchased items. The items themselves are pulled from an items array, declared as a data property. If you click on an item’s Buy button, the addItem method is called, which will push the item in question to a shoppingList array. In turn, this will increment the cart’s total.

We’ve also added a Checkout button to the page, and this is where things start to get interesting:

<Button @click="show = true" id="checkout">Checkout</Button>

When a user clicks on this button, we’re setting a parameter show to be true. This true value is very important for the purpose of conditionally loading our async component.

A few lines below, you can find a v-if statement, which only displays the content of the <div> when show is set to true. This <div> tag contains the checkout component, which we only want to load when the user has hit the checkout button.

The checkout component is loaded asynchronously in the components option in the <script> section. The cool thing here is that we can even pass arguments to the component via the v-bind statement. As you can see, it’s relatively easy to create conditional asynchronous components:

<div v-if="show">
  <checkout v-bind:shoppingList="shoppingList"></checkout>
</div>

Let’s quickly add the code for the Checkout component in src/components/Checkout.vue:

<template>
  <Card title="Checkout Items" key="checkout">
    <p v-for="(k, i) in this.shoppingList" :key="i">
      Item: {{items[Number(k)].msg}} for ${{items[Number(k)].price}}
    </p>
  </Card>
</template>

<script>
import { Card } from 'ant-design-vue';

export default {
  props: ['shoppingList'],
  components: {
    Card
  },
  data: () => ({
    items: [
      { msg: 'First Product', price: 9.99 },
      { msg: 'Second Product', price: 19.99 },
      { msg: 'Third Product', price: 15.00 },
      { msg: 'Fancy Shirt', price: 137.00 },
      { msg: 'More Fancy', price: 109.99 },
      { msg: 'Extreme', price: 3.00 },
      { msg: 'Super Shirt', price: 109.99 },
      { msg: 'Epic Shirt', price: 3.00 },
    ]
  })
}
</script>

Here we’re looping over the props we receive as shoppingList and outputting them to the screen.

You can run the app using the npm run serve command. Then navigate to http://localhost:8080/. If all has gone according to plan, you should see something like what’s shown in the image below.

Vue Webshop Demo

Try clicking around the store with your network tab open to assure yourself that the Checkout component is only loaded when you click the Checkout button.

You can also find the code for this demo on GitHub.

Async with Loading and Error Component

It’s even possible to define a loading and/or error component for when the async component takes some time to load or fails to load. It can be useful to show a loading animation, but bear in mind this again slows down your application. An asynchronous component should be small and fast to load. Here’s an example:

const Message = () => ({
  component: import("./Message"),
  loading: LoadingAnimation,
  error: ErrorComponent
});

Conclusion

Creating and implementing asynchronous components is very easy and should be part of your standard development routine. From a UX perspective, it’s important to reduce the initial load time as much as possible to maintain the user’s attention. Hopefully this tutorial has assisted you with loading your own components asynchronously and applying conditions to them to delay (lazy load) the load of the component.

Fullstack Blockchain Developer at TheLedger.be with a passion for the crypto atmosphere.

Credited Source

28 Views

Site Point

Start-up, Network and Performance — SitePoint

Admin Posted On March 6, 2019

During the past decade, browser development tools (browser DevTools) have evolved from basic JavaScript consoles to fully-integrated development and debugging environments. It’s become possible to alter and inspect any aspect of your web application but few of us venture beyond the basics.

In this series of articles, we’ll explore a range of features you may or may not have considered. Chrome’s DevTools are described in most cases but alternative options are shown for Firefox where available.

Keyboard Shortcuts

Using a menu to launch DevTools wastes valuable seconds! Try one of these options instead:

F12
ctrl + shift + i
cmd + option + j
or right-click any element on the page and choose Inspect or Inspect Element.

Chrome provides useful keyboard shortcut assistance. From DevTools, press F1 or select Settings from the three-dot menu at the top-right. Then choose Shortcuts from the menu:

Browser DevTools keyboard shortcuts

Docking

The DevTools pane can be docked to the left, right or bottom of the browser window. If you require more room, undock it to a separate window. Docking options are found in the main three-dot menu in Chrome:

Browser DevTools docking in Chrome

and Firefox:

Browser DevTools docking in Firefox

Settings

DevTool settings can be accessed from the same menu or by pressing F1. This allows you to set options such as the tools shown, theme, tab sizes, color units and more.

When working on a web application, it may be practical to create a dedicated desktop shortcut to launch your browser, open the URL and launch DevTools in a single step. For Chrome, create a desktop icon with the following Chrome command-line options:

chrome --auto-open-devtools-for-tabs http://localhost:8000/

where http://localhost:8000/ is your development URL.

Similarly for Firefox:

firefox -devtools -url http://localhost:8000/

(The executable name may differ across systems.)

Go Incognito During Development

Incognito/private mode does not retain data such as cookies and localStorage after the browser is closed. The mode is ideal for testing Progressive Web Apps (PWAs) and log-in systems.

You can start browsers in incognito mode manually or by adding --incognito to Chrome or -private to Firefox’s command line.

Command Palette

Chrome DevTools offers an editor-like command palette. Press ctrl + shift + p:

Browser DevTools Chrome command palette

It provides quick access to most functions and source files (hit backspace to remove the >).

Escape to the Console

The console is useful regardless of which DevTool panel you’re using. Hit Esc to show and hide a console window in the bottom pane.

Find Page Colors

Most browsers show a color picker when you click any CSS color property. Chrome also shows the colors used in the page at the bottom of the panel:

Browser DevTools Chrome page colors

The panel can be clicked to show further colors.

Color Contrast Accessibility

The color picker also shows the contrast ratio which indicates the visual difference between the foreground text and background color. Click the ratio to view how this rates against AA and AAA accessibility standards which ensure text can be read by most people:

Browser DevTools Chrome page colors

Any color below the line on the color swash will pass AA contrast recommendations.

Capture Screenshots

From Chrome’s command palette (ctrl + shift + p), type ‘screenshot’ then choose an option to capture the current viewport, the whole page, or the currently-active element. The file will be saved to the download folder. (Chrome 74+ also permits area capture.)

Firefox provides the Take a screenshot system which is available from most menus. In addition, you can right-click any element in the DOM view and select Screenshot Node.

Find Unused CSS and JavaScript

Chrome’s new Coverage panel allows you to quickly locate unused code. Select Coverage from the DevTools More tools sub-menu then hit the record button and browse around your application. Then click any file to open its source:

Browser DevTools code coverage

Unused code is highlighted in red in the line number gutter.

Note that Chrome does not appear to remember used/unused code when you navigate to a new page, but I expect this will be provided in a future release.

Disable the Network Cache

Check Disable cache in the Network panel to load all files from the network. This provides a better assessment of first-time page loads.

Throttle Network Speed

Similarly, there’s little point testing your system a 1gbps connection when most users access over 3G. The Network panel provides an Online drop-down in Chrome and a Throttling drop-down in Firefox which allows you to emulate specific network speeds.

Browser DevTools network throttling

Chrome also provides a facility to add your own throttling profiles.

Reorder Network Responses

By default, the Network panel shows a table of requests and responses in download order. However, any table heading can be clicked to re-order by name, status, type, size, response time, etc.

Filter Incomplete Requests

To discover any incomplete or unresponsive HTTP requests, access the Network panel and enter is:running in the Filter box.

Filter by Response Size

From the Network panel, enter larger-than:S in the Filter box, where S is a size in bytes (1000000), kilobytes (1000k), or megabytes (1M). Responses greater than the chosen size are shown.

To find responses which are smaller, use -larger-than:S.

Filter Third-Party Content

From the Network panel, enter -domain:*.yourdomain in the Filter box, where yourdomain is your primary URL, e.g. sitepoint.com. The remaining responses show third-party requests to CDNs, trackers, social media buttons, etc. The number of requests and payload sizes is shown in the status bar below the table.

Block Network Requests

It is possible to block trackers, analytics, social media widgets, or any other requests during testing.

Right-click any HTTP request in Chrome’s Network panel and choose Block request URL to block that URL or Block request domain to block any request to that domain. The Request blocking panel will open where you can add or remove further URLs or domains:

Browser DevTools network blocking

Recreate Ajax Requests

Ajax XMLHttpRequest operations can be examined by right-clicking their entry on the Network table, then selecting a copy option such as cURL, fetch, or PowerShell. This creates a command with identical headers, user agent, cookies, and referrers which can be pasted into an editor or terminal.

Enable Offline File Overrides

Chrome allows any file to be saved to your system so the browser will fetch it from the device rather than the network. This could permit offline development if, for example, you wanted to load or edit assets normally accessed from a CDN.

Open the Overrides panel within Sources, click + Select folder for overrides, and select an appropriate folder.

Browser DevTools overrides

Now right-click any resource in the Network panel and select Save for overrides. Any subsequent page reload will access the file from your local system rather than the web. The saved file can also be modified.

Examine Storage

The Application panel in Chrome and the Storage panel in Firefox allow you to examine, modify and delete values held in cookies, cache storage, localStorage, sessionStorage, IndexedDB, and Web SQL (where supported).

Chrome’s Clear storage panel can also wipe all values for a domain which can be useful when developing a Progressive Web App.

Performance Monitor

Chrome’s new Performance monitor can be accessed from the DevTools More tools menu and provides analysis of CPU usage, JavaScript heap size, DOM nodes, event listeners, style recalculations and more. Unlike the primary Performance panel, the charts are updated in real time – there is no need to record a profile first.

Browser DevTools Chrome performance monitor

Audits

Chrome’s Audits panel was originally designed to assess Progressive Web App functionality but the tool has evolved into a general purpose tool to analyse performance, accessibility, best practices, and SEO in both mobile and desktop view.

Browser DevTools Chrome audits

It won’t catch every problem and you may disagree with some points, but it’s a useful way to make a quick assessment of potential issues.

I hope you discovered something new. More DevTool secrets are coming soon…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he’s been advocating standards, accessibility, and best-practice HTML5 techniques. He’s created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He’s written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Credited Source

69 Views

WP Tavern

WordPress 5.1 Improves Editor Performance, Encourages Users to Update Outdated PHP Versions – WordPress Tavern

Admin Posted On February 22, 2019

WordPress 5.1 Improves Editor Performance, Encourages Users to Update Outdated PHP Versions – WordPress Tavern

image credit: National Jazz Museum in Harlem

WordPress 5.1 “Betty” was released today, honoring American jazz singer Betty Carter. This is the first major release since Gutenberg came into core. As part of WordPress’ 2019 “tighten up” theme, this release was focused on improving performance in the editor and helping users update outdated versions of PHP.

WordPress 5.0 had been downloaded more than 35 million times prior to 5.1’s release. Users who have adopted the block editor will notice that it is much more responsive and writing posts should feel smoother. WordPress 5.1 includes the performance improvements from Gutenberg 4.8 – faster page initialization time, improved typing performance, and optimization of various background processes.

This release introduces new features from the Site Health project. WordPress will now detect if a site is running on an insecure, outdated version of PHP and display a notice in the dashboard with information about how to update PHP. It also includes checks for PHP version compatibility with plugins. WordPress 5.1+ will prevent users from installing plugins that require newer versions of PHP than they have running.

This release also introduces a medley of miscellaneous improvements under the hood for developers, including (but not limited to) the following:

New database table to store metadata associated with multisite networks
Updated Cron API with new functions to assist with returning data, new filters for modifying cron storage
New JavaScript build processes
Updates to values for the WP_DEBUG_LOG constant
Improved taxonomy metabox sanitization

WordPress 5.1 was led by Matt Mullenweg with help from Gary Pendergast and 561 contributors. Approximately 41% (231 people) were new contributors to the project.

Credited Source

57 Views

WP Beginner

24 Useful Tricks To Speed Up WordPress & Boost Performance

Admin Posted On February 21, 2019

How to improve WordPress speed and performance

Do you want to speed up your WordPress site? Fast loading pages improve user experience, increase your pageviews, and help with your WordPress SEO. In this article, we will share the most useful WordPress speed optimization tips to boost WordPress performance and speed up your website.

Unlike other “X best WordPress caching plugin” lists or generic “X tips to speeding up WordPress” tutorials, this article is a comprehensive guide to WordPress performance optimization.

We tried to cover everything from why speed is important, what slows down your WordPress site, and actionable steps that you can take to improve your WordPress speed immediately.

To make it easy, we have created a table of contents to help you navigate through our ultimate guide to speeding up your WordPress site.

Basics of WordPress Performance

Why Speed is Important for your WordPress Site?
How to Check Your WordPress Website Speed?
What Slows Down Your WordPress Website?
Importance of Good WordPress Hosting

Speeding Up WordPress in Easy Steps (No Coding)

Install a WordPress Caching Plugin
Optimize Images for Speed

WordPress Performance Optimization Best Practices

Keep Your WordPress Site Updated
Optimize Background Processes
Use Excerpts on Homepage and Archives
Split Comments into Pages
Use a Content Delivery Network (CDN)
Don’t Upload Audio/Video Files Directly to WordPress
Use a Theme Optimized For Speed
Use Faster Plugins

Fine-Tuning WordPress for Speed (Advanced)

Split Long Posts into Pages
Reduce External HTTP Requests
Reduce Database Calls
Optimize WordPress Database
Limit Post Revisions
Disable Hotlinking and Leeching of Your Content
Use Lazy Loading if Needed
Use DNS Level Website Firewall
Fix HTTPS/SSL Errors without Plugin
Use Latest PHP Version

Why Speed is Important for Your WordPress Site?

Studies show that from 2000 to 2016, the average human attention span has dropped from 12 seconds to 7 seconds.

What does this mean for you as a website owner?

You have very little time to show users your content and convince them to stay on your website.

A slow website means users will potentially leave your website before it even loads.

According to a StrangeLoop case study that involved Amazon, Google, and other larger sites, a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.

How speed affects your website

On top of that, Google and other search engines have already started penalizing slower websites by pushing them down in the search results which means lower traffic for slow websites.

To sum it all up, if you want more traffic, subscribers, and revenue from your website, then you must make your WordPress website FAST!

How to Check Your WordPress Website Speed?

Often beginners think that their website is OK just because it doesn’t feel slow on their computer. That’s a HUGE mistake.

Since you frequently visit your own website, modern browsers like Chrome store your website in the cache and automatically prefetch it as soon as you start typing an address. This makes your website load almost instantly.

However, a normal user who is visiting your website for the first time may not have the same experience.

In fact, users in different geographical locations will have a completely different experience.

This is why we recommend that you test your website speed using a tool like IsItWP’s WordPress speed test.

It is a free online tool that allows you to test your website’s speed.

IsItWP speed test tool

After you run your website speed test, you might be wondering what’s a good website speed that I should aim for?

A good page load time is under 2 seconds.

However, the faster you can make it, the better it is. A few milliseconds of improvements here and there can add up to shaving off half or even a full second from your load time.

[Back to Top ↑]

What Slows Down Your WordPress Website?

Your speed test report will likely have multiple recommendations for improvement. However, most of that is technical jargon which is hard for beginners to understand.

Learning what slows down your website is the key to improving performance and making smarter long-term decisions.

The primary causes for a slow WordPress website are:

Web Hosting – When your web hosting server is not properly configured it can hurt your website speed.
WordPress Configuration – If your WordPress site is not serving cached pages, then it will overload your server thus causing your website to be slow or crash entirely.
Page Size – Mainly images that aren’t optimized for web.
Bad Plugins – If you’re using a poorly coded plugin, then it can significantly slow down your website.
External scripts – External scripts such as ads, font loaders, etc can also have a huge impact on your website performance.

Now that you know what slows down your WordPress website, let’s take a look at how to speed up your WordPress website.

Importance of Good WordPress Hosting

Your WordPress hosting service plays an important role in website performance. A good shared hosting provider like Bluehost or Siteground take the extra measures to optimize your website for performance.

However, on shared hosting you share the server resources with many other customers. This means that if your neighboring site gets a lot of traffic, then it can impact the entire server performance which in turn will slow down your website.

On the other hand, using a managed WordPress hosting service give you the most optimized server configurations to run WordPress. Managed WordPress hosting companies also offer automatic backups, automatic WordPress updates, and more advanced security configurations to protect your website.

We recommend WPEngine as our preferred managed WordPress hosting provider. They’re also the most popular one in the industry. (See our special WPEngine coupon).

[Back to Top ↑]

Speeding Up WordPress in Easy Steps (No Coding)

We know that making changes to your website configuration can be a terrifying thought for beginners, especially if you’re not a tech-geek.

But don’t worry, you’re not alone. We have helped thousands of WordPress users improve their WordPress performance.

We will show you how you can speed up your WordPress site with just a few clicks (no coding required).

If you can point-and-click, then you can do this!

Install a WordPress Caching Plugin

WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website.

To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user.

This process involves a lot of steps, and it can really slow down your website when you have multiple people visiting it at once.

That’s why we recommend every WordPress site use a caching plugin. Caching can make your WordPress site anywhere from 2x to 5x faster.

Here’s how it works.

Instead of going through the whole page generation process every time, your caching plugin makes a copy of the page after the first load, and then serves that cached version to every subsequent user.

Page caching

As you can see in the graphics above, when a user visits your WordPress site, your server retrieves information from a MySQL database and your PHP files. It then puts it all together into HTML content which is served to the user.

It’s a long process, but you can skip a lot of it when you use caching instead.

There are a lot of good WordPress caching plugins available, but we recommend using either WP Rocket (premium) or WP Super Cache (free) plugin.

Check out our step by step guide on how to install and setup WP Super Cache on your WordPress site. It’s not difficult to set up, and your visitors will notice the difference.

Many WordPress hosting companies like Bluehost and SiteGround offer caching solutions as well.

SiteGround SuperCacher

If you are using SiteGround then login to hosting cPanel and enable SuperCacher under ‘Site improvement tools’.

Supercacher

After that, you will need to install and activate the SG Optimizer plugin in WordPress to manage SuperCacher settings.

Bluehost Caching

If you are using Bluehost, then go to My Sites » Performance section to turn on caching.

Turning on Caching in Bluehost

If you’re using a managed WordPress hosting provider, then you don’t need a caching plugin because it is built-in and turned on by default.

Bonus: You can combine caching plugins with a web application firewall like CloudFlare or Sucuri for maximum performance boost.

[Back to Top ↑]

Optimize Images for Speed

Optimizing images for speed

Images bring life to your content and help boost engagement. Researchers have found that using colored visuals makes people 80% more likely to read your content.

However, if your images aren’t optimized, then they could be hurting more than helping. In fact, non-optimized images are one of the most common speed issues that we see on beginner websites.

Before you upload a photo directly from your phone or camera, we recommend that you use photo editing software to optimize your images for the web.

In their original formats, these photos can have huge file sizes. But based on the image file format and the compression you choose in your editing software, you can decrease your image size by up to 5x.

At WPBeginner, we only use two image formats: JPEG and PNG.

Now you might be wondering: what’s the difference?

Well, PNG image format is uncompressed. When you compress an image it loses some information, so an uncompressed image will be higher quality with more detail. The downside is that it’s a larger file size, so it takes longer to load.

JPEG, on the other hand, is a compressed file format which slightly reduces image quality, but it’s significantly smaller in size.

So how do we decide which image format to choose?

If our photo or image has a lot of different colors, then we use JPEG.
If it’s a simpler image or we need a transparent image, then we use PNG.

The majority of our images are JPEGs.

Below is a comparison chart of the file sizes and different compression tool that we could have used for the StrangeLoop image used above.

Image speed chart

As you can see in the chart, the image format you use can make a HUGE difference in website performance.

For details on exactly how to optimize your images using Photoshop and other popular editing tools, without sacrificing quality, see our step by step guide on how to save images optimized for web.

[Back to Top ↑]

WordPress Performance Optimization Best Practices

After installing a caching plugin and optimizing your images, you’ll notice your site will start loading a lot faster.

But if you really want to keep your website as fast as possible, you’ll need to use the best practices listed below.

These tips aren’t too technical, so you don’t need to know any code to implement them. But using them will prevent common problems that will slow down your website.

Keep Your WordPress Site Updated

Keep WordPress updated

As a well maintained open source project, WordPress is updated frequently. Each update will not only offer new features but it will also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too.

As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.

For more details on the importance of updates, see our article on why you should always use the latest WordPress version.

[Back to Top ↑]

Optimize Background Processes

Background processes in WordPress are scheduled tasks that run in the background of your WordPress site. Following are some examples of background tasks that run on a WordPress site:

WordPress Backup plugin tasks
WordPress cron jobs to publish scheduled posts
WordPress cron jobs to check for updates
Search engines and other crawlers trying to fetch content

Tasks like cron jobs for scheduled posts and updates have minimal impact on website performance.

However, other background processes like backup plugins and excessive crawling by search engines can slow down a website.

For backup plugins, you need to make sure that your WordPress backup plugin only run during low traffic time on your website. You also need to adjust the frequency of backups and data that needs to be backed up.

For example, if you are creating a complete daily backup while you only publish new content twice a week, then you need to adjust that.

If you want more frequent backups such as real-time backups, then we recommend using a SaaS solution so you’re not taxing your server.

As for crawling, you need to keep an eye on your crawl reports in Google Search console. Frequent crawls that are ending up in errors can cause your website to slow down or become unresponsive.

See our complete Google Search Console guide for beginners to learn how to adjust crawl rate.

[Back to Top ↑]

Use Excerpts on Homepage and Archives

Using excerpts

By default, WordPress displays the full content of each article on your homepage and archives. This means your homepage, categories, tags, and other archive pages will all load slower.

Another disadvantage of showing full articles on these pages is that users don’t feel the need to visit the actual article. This can reduce your pageviews, and the time your users spend on your site.

In order to speed up your loading times for archive pages, you can set your site to display excerpts instead of the full content.

You can navigate to Settings » Reading and select “For each article in a feed, show: Summary” instead of “Full Text.”

Display excerpts instead of full text to boost WordPress speed

For more details on the pros and cons of displaying summaries, see our article on full post vs summary (excerpt) in your WordPress archive pages.

[Back to Top ↑]

Split Comments into Pages

Paginate comments

Getting lots of comments on your blog posts? Congratulations! That’s a great indicator of an engaged audience.

But the downside is, loading all those comments can impact your site’s speed.

WordPress comes with a built-in solution for that. Simply go to Settings » Discussion and check the box next to the “Break comments into pages” option.

Break comments in pages

For more detailed instructions, see our guide on how to paginate comments in WordPress.

[Back to Top ↑]

Use a Content Delivery Network (CDN)

Remember how we mentioned above that users in different geographical locations may experience different loading times on your site?

That’s because the location of your web hosting servers can have an impact on your site speed.

For example, let’s say your web hosting company has its servers in the United States. A visitor who’s also in the United States will generally see faster loading times than a visitor in India.

Using a Content Delivery Network (CDN), can help to speed up loading times for all of your visitors.

A CDN is a network made up of servers all around the world. Each server will store “static” files used to make up your website.

These static files include unchanging files such as images, CSS, and JavaScript, unlike your WordPress pages which are “dynamic” as explained above.

When you use a CDN, every time a user visits your website they are served those static files from whichever server is closest to them. Your own web hosting server will also be faster since the CDN is doing a lot of the work.

You can see how it works in this infographic.

We use recommend using StackPath CDN. We have been using MaxCDN on all our websites which is now also part of StackPath.

It works well with WordPress websites and compliments your existing WordPress caching plugins for even faster loading times.

[Back to Top ↑]

Don’t Upload Audio/Video Files Directly to WordPress

Use video hosting services like YouTube

You can directly upload audio and video files to your WordPress site, and it will automatically display them in an HTML5 player…

But you should NEVER do that!

Hosting audio and videos will cost you bandwidth. You could be charged overage fees by your web hosting company, or they may even shut down your site altogether, even if your plan includes “unlimited” bandwidth.

Hosting large media files also increases your backup sizes tremendously, and makes it difficult for you to restore WordPress from backup.

Instead, you should use an audio and video hosting service like YouTube, Vimeo, DailyMotion, SoundCloud, etc., and let them take care of the hard work. They have the bandwidth for it!

WordPress has a built-in video embed feature, so you can copy and paste your video’s URL directly into your post and it will embed automatically.

Find out more details on how it works in our guide on embedding videos in WordPress.

If you are making a podcast website with WordPress, then we recommend podcast hosting service Blubrry for the best performance.

[Back to Top ↑]

Use a Theme Optimized For Speed

Choose a theme optimized for speed

When selecting a theme for your website, it’s important to pay special attention to speed optimization. Some beautiful and impressive-looking themes are actually poorly coded and can slow your site way down.

It’s usually better to go with a simpler theme than to choose a theme that’s bloated with complex layouts, flashy animations, and other unnecessary features. You can always add those features using quality WordPress plugins.

Premium WordPress theme shops like StudioPress, Themify, CSSIgniter offer themes that are well coded and optimized for speed. You can also check out our article on selecting the perfect WordPress theme for advice on what to look for.

Before you activate your new theme, see our guide on how to properly switch your WordPress theme for a smooth transition.

[Back to Top ↑]

Use Faster Plugins

Choose faster plugins for your website

Poorly coded WordPress plugins often load too much bloat whether your site needs it or not. This increases your page load speed and slows down your site.

To help you choose the best plugins, we often publish our expert pick of best WordPress plugin showcases. We pay special attention to ease of use, user experience, and most importantly performance.

Following are some of our picks for the most common WordPress plugin categories.

WPForms – Fastest and most beginner friendly contact form plugin for WordPress.
Soliloquy – If you want to add sliders to your site, then Soliloquy is the best WordPress slider plugin in terms of performance and features.
Envira Gallery – Photo gallery plugins can also slow down WordPress. We ran the tests and found Envira Gallery to be the fastest photo gallery plugin for WordPress.
Shared Counts – Social media plugins load additional scripts and not so gracefully. Shared Counts is one of the fastest Social media plugins for WordPress.

Apart from our own recommendations, you can run your own tests. Simply run speed tests before and after installing a plugin to compare its impact on performance.

[Back to Top ↑]

Fine-Tuning WordPress for Speed (Advanced)

By using the WordPress optimization best practices and basic speed tips listed above, you should see a big improvement in your site’s loading times.

But every fraction of a second counts. If you want to get the very fastest speed possible, then you’ll want to make a few more changes.

The following tips are a little more technical, with some requiring you to modify your site files or have a basic understanding of PHP. You’ll want to make sure to backup your site first just in case.

Split Long Posts into Pages

Split long posts in pages

Readers tend to love blog posts that are longer and more in-depth. Longer posts even tend to rank higher in search engines.

But if you’re publishing long-form articles with lots of images, it could be hurting your loading times.

Instead, consider splitting up your longer posts into multiple pages.

WordPress comes with built-in functionality to do that. Simply add the <!––nextpage––> tag in your article where you want to split it into next page. Do that again if you want to split the article on to the next page as well.

For more detailed instructions, see our tutorial on post pagination – how to split WordPress posts into multiple pages.

[Back to Top ↑]

Reduce External HTTP Requests

Reduce cross-domain HTTP requests

Many WordPress plugins and themes load all kinds of files from other websites. These files can include scripts, stylesheets, and images from external resources like Google, Facebook, analytics services, and so on.

It’s ok to use a few of these. Many of these files are optimized to load as quickly as possible, so it’s faster than hosting them on your own website.

But if your plugins are making a lot of these requests, then it could slow down your website significantly.

You can reduce all these external HTTP requests by disabling scripts and styles or merging them into one file. Here’s a tutorial on how to disable your plugins’ CSS files and JavaScript.

[Back to Top ↑]

Reduce Database Calls

Reduce database calls

Note: This step is a little more technical and will require basic knowledge of PHP and WordPress template files.

Unfortunately, there are a lot of poorly coded WordPress themes out there. They ignore WordPress standard practices and end up making direct database calls, or too many unnecessary requests to the database. This can really slow down your server by giving it too much work to do.

Even well-coded themes can have code that makes database calls just to get your blog’s basic information.

In this example, every time you see <?php, that’s the start of a new database call:

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php language_attributes(); ?>">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> 
charset=<?php bloginfo('charset'); ?>" />

You can’t blame theme developers for that. They simply have no other way to find out what language your site is in.

But if you are customizing your site using a child theme, then you can replace these database calls with your specific information in order to reduce all those database calls.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Review your parent theme for instances like this that can be easily replaced with static information.

[Back to Top ↑]

Optimize WordPress Database

WordPress database optimization

After using WordPress for a while, your database will have lots of information that you probably don’t need any more. For improved performance, you can optimize your database to get rid of all that unnecessary information.

This can be easily managed with the WP-Sweep plugin. It allows you to clean your WordPress database by deleting things like trashed posts, revisions, unused tags, etc. It will also optimize your database’s structure with just a click.

See our guide on how to optimize and clean up your WordPress database for improved performance.

[Back to Top ↑]

Limit Post Revisions

Limit post revisions in WordPress

Post revisions take up space in your WordPress database. Some users believe that revisions can also affect some database queries run by plugins. If the plugin doesn’t specifically exclude post revisions, it might slow down your site by searching through them unnecessarily.

You can easily limit the number of revisions WordPress keeps for each article. Simply add this line of code to your wp-config.php file.

define( 'WP_POST_REVISIONS', 4 );

This code will limit WordPress to only save your last 4 revisions of each post or page, and discard older revisions automatically.

[Back to Top ↑]

Disable Hotlinking and Leaching of Your Content

Prevent image theft in WordPress

If you’re creating quality content on your WordPress site, then the sad truth is that it’ll probably get stolen sooner or later.

One way this happens is when other websites serve your images directly from their URLs on your website, instead of uploading them to their own servers. In effect, they’re stealing your web hosting bandwidth, and you don’t get any traffic to show for it.

Simply add this code to your .htaccess file to block hotlinking of images from your WordPress site.

#disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?wpbeginner.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Note: Don’t forget to change wpbeginner.com with your own domain.

You may also want to check our article showing 4 ways to prevent image theft in WordPress.

Some content scraping websites automatically create posts by stealing your content from your RSS feed. You can check out our guide on preventing blog content scraping in WordPress for ways to deal with automated content theft.

[Back to Top ↑]

Use Lazy Loading if Needed

Use lazy loading in WordPress

If you add many images, multiple video embeds, and photo galleries to your blog posts, then your site can benefit from lazy loading.

Instead of loading all your images and videos at once, lazy loading downloads only those that will be visible on the user’s screen. It replaces all other images and video embeds with a placeholder image.

As a user scrolls down, your website loads images that are now visible in the browser’s viewing area. You can lazy load images, videos, and even WordPress comments and gravatars.

For images, iframes, and videos, you can use the Lazy Load by WP Rocket plugin. For WordPress comments see our guide on how to lazy load comments in WordPress.

[Back to Top ↑]

Use DNS Level Website Firewall

Use DNS level firewall

A WordPress firewall plugin helps you block brute force attacks, hacking attempts, and malware. However, not all firewall plugins are the same.

Some of them run on your website, this means attackers are already able to reach your web server before they get blocked. This is still effective for security, but not optimal for performance.

This is why we recommend using a DNS level firewall like Sucuri or Cloudflare. These firewalls block maclious requests even before they reach your website.

[Back to Top ↑]

Fix HTTPS/SSL Errors without Plugin

Using inspect tool to fix mixed content error

If you are switching your site to HTTPS/SSL, then it is likely that you may run across mixed content errors.

The easiest way to fix this is by installing a plugin like Really Simple SSL. However, the problem is that these plugins catch all URLs first, then change them to HTTPS before sending them to user’s browsers.

This has a small but noticeable performance impact. You can reduce this by manually fixing all URLs. For more details see our article on how to fix common SSL issues in WordPress.

[Back to Top ↑]

Use Latest PHP Version

WordPress is mainly written in the PHP programming language. It is a server side language, which means it is installed and runs on your hosting server.

All good WordPress hosting companies use the most stable PHP version on their servers. However, it is possible that your hosting company is running a slightly older PHP version.

The newer PHP 7 is two times faster than its predecessors. That’s a huge performance boost that your website must take advantage of.

You can see which PHP version your site is using by installing and activating the Version Info plugin.

Upon activation, the plugin will show your PHP version in the footer area of your WordPress admin dashboard.

PHP version in WordPress admin dashboard

If your website is using a version lower than PHP 7, then ask your hosting provider to update it for you. If they are unable to do so, then it is time to find a new WordPress hosting company.

[Back to Top ↑]

That’s it! We hope this article helped you learn how to improve wordpress speed and performance.

Go ahead and try out these techniques. Don’t forget to test your website speed before and after implementing these best practices. You’ll be surprised these changes will boost your WordPress performance.

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 24 Useful Tricks To Speed Up WordPress & Boost Performance appeared first on WPBeginner.

Credited Source

2 Views

WP Beginner

Which is the Best WordPress Photo Gallery Plugin? (Performance + Quality Compared)

Admin Posted On January 11, 2019

Are you looking for the best WordPress gallery plugin for your website?

There are so many WordPress photo gallery plugins available, but the problem is that most will either slow down your website, or they’re extremely difficult to use.

To help you pick the right solution, we have created a detailed comparison of the performance, features, and quality of the best WordPress photo gallery plugins.

Our goal is to help you find the WordPress photo and video gallery plugin, that is fast, easy to use, and has all the features you will need.

Our Criteria for the Best WordPress Gallery Plugin

In our opinion, a perfect WordPress gallery plugin should be fast, easy to use, and have all the necessary features that you need to create beautiful galleries (such as lightboxes, image navigation, albums, pagination, etc).

The gallery plugin should offer a great user experience and help improve your image SEO as well.

4 Best WordPress Gallery Plugins

We have hand-picked the four most popular WordPress photo gallery plugins on the market.

In our comparison, we will look at the speed, features, ease of use, and reliability of these plugins:

Let’s get started with our comparison.

Speed

Speed is crucial when you are choosing a WordPress photo gallery plugin. Not only does it affect your WordPress SEO, but it also affects user experience on your site.

If you are using a gallery plugin for a portfolio or photography site, then you simply cannot afford to compromise on speed.

We ran a speed test for each of these plugins using the same images without modifying any default settings. Below are our results:

Gallery Plugin	Page Load Time	Requests	Page Size
Envira Gallery	655 ms	23	988KB
Modula	696 ms	28	948 KB
NextGEN	867 ms	35	1.0 MB
FooGallery	917 ms	27	591 KB

As you can see in the above results, Envira Gallery came out as the fastest loading WordPress image gallery plugin. Modula came as a very close second with barely few milliseconds difference and with smaller page size.

The reason why Envira Gallery and Modula are so fast is that they are both well coded and highly optimized for speed. If performance and speed is your main concern (which it should be), then Modula and Envira Gallery are both great options.

Winner: It’s a tie between Envira Gallery and Modula

Ease of Use

Creating image galleries is not as simple as uploading a single image to your posts. You need to choose layouts, select columns, add thumbnail sizes, choose lightbox animations, etc.

Most beginners find the process quite overwhelming. The goal here is to find a WordPress photo gallery plugin that is both powerful and beginner friendly at the same time.

Envira Gallery

Envira Gallery follows and adheres to the WordPress coding standards and best practices. It provides a user interface that seamlessly blends into your WordPress admin area.

Creating a new gallery is quite simple and beginner friendly.

Envira Gallery user interface

Envira Gallery also comes with a Gutenberg block allowing you to easily add photo galleries into any WordPress post and page. You can also change gallery settings right from the post edit screen.

Gutenberg block for Envira Gallery

Classic editor users can use the shortcode or the button above the post editor to quickly add any gallery or album in your post/page.

Aside from that Envira Gallery also shows you the template tag that you can use it in your WordPress templates. This is particularly handy if you are developing a site for a client and want to include galleries straight into the theme.

Modula

Modula Gallery uses a similar approach to create new photo galleries. You can simply upload your files or select them from the media library to create a photo gallery.

Modula Gallery user interface

Below the images, you will find all gallery settings organized in tabs. From here you can change gallery style, theme, lightbox, and other settings.

To insert the gallery into WordPress posts and pages, you will need to copy the gallery shortcode and insert it using the Shortcode block in the Gutenberg editor.

There are no sidebar widgets or Gutenberg blocks at the moment to make it easier for users to insert Galleries.

FooGallery

FooGallery takes the similar approach as Envira Gallery and Modula. They use a simple user interface that looks and feels like WordPress.

FooGallery user interface

After uploading your photos, you can adjust the gallery settings in great details below the images.

FooGallery also makes it easy to insert photo galleries. You can use the built-in Gutenberg block, shortcode, or sidebar widget to display your photo galleries anywhere in WordPress. It also adds a button on top of the Classic Editor to select and insert galleries.

Unlike Envira Gallery, FooGallery does not show the template tag to insert your galleries into theme files or templates.

NextGEN Gallery

NextGEN is a little different than our other three contenders. It brings its own user interface, database tables, and separate folders to store your images. This is why NextGEN user interface looks a bit complicated in WordPress.

NextGen UI

It does offer a gallery wizard which can be helpful for beginners. However, it will take users some time to understand how to upload images and create a gallery. You may also find it a bit difficult to add the gallery into your post/page.

NextGen adds a Gutenberg block which allows you to create and add galleries from the post edit screen. For classic editor users, it adds a button to the post editor.

Winner: No clear winner. Envira, Modula, and Foo Gallery all offer easy to use interface.

Features

In order to create a beautiful photo gallery, you need functionality like lightboxes, full-screen mode, albums, pagination, navigation, slideshow, password protection, EXIF metadata, social media sharing, and more.

However it’s important to remember that too many features can slow down your site, so let’s take a look at how our contenders handle the balance in features and functionality.

Envira Gallery

Envira Gallery is built with a mobile first approach. This means that it is fully responsive out of the box.

It allows you to easily choose thumbnail sizes, animations, gallery layouts, add meta tags for your images all from the single user interface.

Apart from the built-in features, there are loads of features that you can add by installing addons such as: gallery templates, social sharing, videos, password protection, image protection, albums, slideshow, Pinterest, image proofing, WooCommerce support, and more.

Envira Gallery features

Modula

Modula is the newest of all plugins on our list, so they do not have the advanced features. However the plugin does cover all the basic features you’ll want from a WordPress gallery plugin like lightbox popup, social sharing, custom styles, grid layouts, and more.

It comes with a custom grid feature which allows you to use simple drag and drop to create your own custom grid for galleries.

It also has a video addon for creating video galleries. However, Modula is lacking other features like albums, watermarking, proofing, and gallery templates.

Modula features

FooGallery

FooGallery comes with a lot of powerful features however it is not mobile responsive out of the box. You can select the responsive template to add a responsive photo gallery.

Another feature that we missed is the lightbox. You can install the free Foobox plugin to add lightbox functionality, but we felt that it should have been packaged with the core gallery plugin.

FooGallery also comes with extensions that you can install to add more features such as custom branding, cube effect, lightbox, and more.

FooGallery features

NextGEN Gallery

NextGEN Gallery is the oldest of all four plugins, and it comes with an extensive list of features.

Many of the features that are available as addons in Envira and Foo, are available out of the box in NextGEN gallery. There are also premium addons with more features that you can install.

Most NextGen features require a certain level of familiarity with the plugin. Users will need some time to figure things out, reading the documentation, and posting questions in support forums.

Winner: Envira Gallery is the clear winner here with its extensive list of features that cover all the basics + advanced features for photographers, eCommerce websites, and portfolios. NextGEN is the close second with a matching set of features.

Compatability

WordPress provides you the freedom to move your site from one web host to another and even to different competitors.

We need to see if you can easily import/export and backup your photo gallery data.

Envira Gallery

Envira stores all your photo galleries as custom post types in the WordPress database. It stores your media files using the default WordPress media location. This means if you backup your WordPress site, then you will have all Envira Gallery data backed up.

Envira also allows you to import/export your individual galleries. This means that you can move a single gallery from one WordPress site to another.

Import / Export photo galleries using Envira Gallery

When you move your WordPress site, Envira will automatically detect it and will show you an option to fix the migration. All these features make Envira Gallery the most reliable photo gallery plugin for WordPress.

Modula

Modula also uses a custom WordPress content type to store your photo galleries. This means you can save your photo galleries with your WordPress backup and restore them when you restore WordPress site from backup.

Modula doesn’t allow you to import/export individual galleries.

FooGallery

Similar to Envira, FooGallery also stores your galleries as custom post types in the WordPress database. If you backup your WordPress site, then you will have a FooGallery data backup as well.

However, if you just want to export individual galleries, then there is no option for that because the plugin doesn’t come with an import/export feature.

NextGEN Gallery

NextGEN gallery does not come with import/export feature. Since it stores your data in separate database tables, this means you will need to configure your WordPress backup plugin to include those tables.

NextGEN also stores your images in a separate folder. If you want to create a backup for them, then you will need to download the folder separately to your computer.

Both Envira and FooGallery offer NextGen importers to make it easy for users to switch to their platform.

Winner: Enivra Gallery offers the most comprehensive set of tools to import/export your photo galleries.

Pricing

All four plugins have a free WordPress gallery version available in the WordPress plugin directory. All four of them have paid upgrades available with more features. The pricing of your photo gallery plugin will depend on which plan you want to use for any of these plugins. You can choose a plan based on the features you need after trying the free versions.

Winner: No clear winners here – the pricing of products will vary based on what features you need and plan that you select.

Conclusion

If you’re looking for a simple and fast solution, then Envira Gallery and Modula Gallery are both great options for a WordPress gallery plugin.

If you need the advanced features and don’t mind a learning curve, then NextGen gallery is your best option.

We hope this article helped you pick the best WordPress gallery plugin for your website. You may also want to see our expert-pick of the must have WordPress plugins for all websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials and join us on Facebook.

The post Which is the Best WordPress Photo Gallery Plugin? (Performance + Quality Compared) appeared first on WPBeginner.

Credited Source

1 Views

WP Lift

Weekly WordPress News: WordPress 5.0.2 Brings Performance Improvements

Admin Posted On December 21, 2018

One of the things that bugged a lot of people about the new WordPress Gutenberg block editor is how it slowed down for long content with lots of blocks. We’re happy to announce that on December 19, the core team released WordPress 5.0.2, which claims to make it 330% faster for a post with 200 … Read moreWeekly WordPress News: WordPress 5.0.2 Brings Performance Improvements

The post Weekly WordPress News: WordPress 5.0.2 Brings Performance Improvements appeared first on Learn WordPress with WPLift.

Credited Source

1 Views

Older Posts

Categories

performance

The Problem With WordPress Sliders

The Contenders for Best WordPress Slider Plugin

Speed – Which is the Fastest WordPress Slide Plugin?

Ease of Use – Which WordPress Slider Offers Better User Experience?

Soliloquy

MetaSlider

Smart Slider 3

Slider by Nivo

Slide Anything

Master Slider

Features – Which Slider Plugin for WordPress Offers More Choices?

Pricing

Conclusion – The Best WordPress Slider Plugin

Flywheel Review: The Feature List

Flywheel Performance Tests:

Exploring the Custom Flywheel Hosting Dashboard

Automatic Backups and Easy Management

Simple Staging Sites

Lots of Other Helpful Features

Awesome Development and Billing Workflows

Integration With Local

Billing Transfer

Simpler SFTP

White Label

Flywheel Pricing: How Much Will All This Cost?

Final Thoughts on Flywheel

What is Speed Index in Lighthouse?

How Google Speed Index is Measured

How to Get Speed Index from Google Chrome

What Speed Index Score Should You Be Aiming for in Google?

How to Improve WordPress Speed Index

If It Doesn’t Spark Conversions, Get Rid of It

Use predefined heights and placeholders

Optimize Your Images

Optimize Stylesheets, Scripts, and Fonts

Optimize the Critical Rendering Path

Utilize Caching

Speed Index Limitations

How to Improve Speed Index with a WordPress Plugin

1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!

Like this:

Related

Async Components

Dynamic Imports

Conditionally Loading Async Components

Project Setup

Making the Store View

Async with Loading and Error Component

Conclusion

Keyboard Shortcuts

Docking

Settings

Go Incognito During Development

Command Palette

Escape to the Console

Find Page Colors

Color Contrast Accessibility

Capture Screenshots

Find Unused CSS and JavaScript

Disable the Network Cache

Throttle Network Speed

Reorder Network Responses

Filter Incomplete Requests

Filter by Response Size

Filter Third-Party Content

Block Network Requests

Recreate Ajax Requests

Enable Offline File Overrides

Examine Storage

Performance Monitor

Audits

Like this:

Related

Table of Contents

Why Speed is Important for Your WordPress Site?

How to Check Your WordPress Website Speed?

What Slows Down Your WordPress Website?

Importance of Good WordPress Hosting