Month: July 2021

How to Install a WordPress plugin

How to Install a WordPress plugin

You may just found out that using plugins leverages your WordPress Site. Because plugins make it easier for users to add features to their website without hiring a developer to code it from scratch. We will cover the 2 different methods of installing a WordPress plugin to apply the added features and functionalities that a WordPress plugin can offer.

First Method: Installing a WordPress plugin using WordPress Plugin Search

This is in my opinion the most straightforward way of installing a WordPress plugin. This contains the plugins in the WordPress repository so you will only see free plugins with this option.

First, you need of course access to the admin area of the site. Once you are on the WordPress dashboard, hover your mouse to the “Plugins” menu on the left sidebar menu and 3 options will appear including “Add New”:

WordPress: Dashboard

You will see the WordPress Plugin Search at the top right corner of the page like what you see on the screenshot below. Find the plugin by typing the plugin name or the functionality you are looking for. After that, you will see a bunch of plugin listings that are related to the keyword you entered:

WordPress - Plugin Search

When you found the plugin you’re looking for, you can click the “Install Now” button. In the screenshot below, we searched for the Pegasaas Accelerator WP plugin.

WordPress will now download and install the plugin for you. This is not the final process of this method though as WordPress lets you install the plugin without activating it. So go ahead and activate it by clicking the “Activate” button, the same button as the “Install Now” button earlier that was replaced by the “Activate” button.

WordPress - Installing a plugin

There may be some configuration or installation wizard you need to go through depending on the plugin that you install. And that’s it, you just installed your first WordPress plugin.

Now let’s go to the other method of installing a WordPress plugin.

 

Second Method: Installing a WordPress plugin using Manual Upload

As I mentioned earlier, the first method lets you install free plugins. Basically, paid plugins cannot be found in the WordPress repository. So if your plugin of choice is a paid one, you will be manually uploading it to your WordPress site.

First, you need to download the plugin from the source (which will be a zip file). Next, you need to go to WordPress admin area and just like the first method, hover your mouse to the “Plugins” menu on the left sidebar menu and click “Add New”. The “Upload Plugin” button is at the top left like what you see on the screenshot below.

WordPress - Manual plugin add

Now the plugin upload form will appear and you can click the “Choose File” button and upload the zip file you downloaded earlier from your source. Once the file is selected, the disabled “Install Now” button will be enabled and you can click it to start installing.

WordPress - Manual plugin upload

WordPress will not activate the plugin automatically. Click the “Activate Plugin” and the same as the first method, you need to go through some configuration or installation wizard that may vary for each plugin that you install.

WordPress - Manual plugin activation

Now, you can start using the plugin and enjoy it.

First Contentful Paint: What is it?

First Contentful Paint: What is it?

What is First Contentful Paint?

First Contentful Paint (FCP) measures how long it takes the browser to load the first piece of  (webpage) DOM content after a user navigates to your webpage. Images, non-white canvas elements, and Scalable Vector Graphics (SVG) on your page are considered DOM content.  For the purpose of measuring First Contentful Paint,  “iframe” content is not evaluated, however the calculation does take into consideration text with pending web fonts.

First Contentful Paint is the first of six metrics tracked in the Lighthouse report’s Performance section. Each metric measures a different aspect of page load time.

First Contenful Paint - Google PageSpeed Insights Lab Data

Google PageSpeed Insights Lab Data

Google’s PageSpeed Insights displays FCP in seconds

First Contentful Paint happens in the third frame, as that’s when the first text and image elements are rendered to the screen.

First Contenful Paint - Mobile

Google’s PageSpeed Insights displays First Contentful Paint on mobile

You’ll see that while some of the content has rendered, but not all are rendered completely. This is an important distinction to make between First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which is used to measure whether the page’s main contents have completed loading.

The focus is on content, and the idea is that this measure will tell you when your user receives consumable information (text, images, etc.) – which is far more relevant for assessing user experience than when a background or style has been applied.

 

How PageSpeed determines your First Contentful Paint score

Based on data from the HTTP Archive, your First Contentful Paint score is a comparison of your page’s FCP time to FCP times for real websites. For example, sites performing in the ninety-fifth percentile, First Contentful Paint takes roughly 2.2 seconds to render. If your website’s FCP is 2.2 seconds, your First Contentful Paint score will be 78 out of possible 100.

The following table explains how to read your FCP score:

First Contentful Paint time
(in seconds)
Color-coding
0–1.8Green (fast)
1.8–3Orange (moderate)
Over 3Red (slow)

 

How to test your website’s FCP

You can use a variety of methods to evaluate the performance of your website. Google’s PageSpeed Insights is one of the best, both because it allows you to measure First Contentful Paint timings and it’s free:

First Contenful Paint - PSI Search

Google’s PageSpeed Insights — Website Performace Test

All you have to do now is type the URL of the page you want to test into the search bar. Then wait for a few seconds before showing you the results on the page with a lot of data to sort through.

Below that is the Lab Data section. The results of PageSpeed Insight recent test are shown below:

First Contenful Paint - PSI Lab Data

Selecting the button in the top right corner of the Lab Data section will provide a breakdown of what each metric means.

One of the nicest features of PageSpeed Insights is that it does more than simply inform you if your website is slow — it also offers suggestions on how to improve its performance in the Opportunity section:

First Contentful Paint - Opportunity Section

Google’s PageSpeed Insights — Opportunity Section

 

How to improve First Contentful Paint (4 basic steps)

To provide your website’s visitors the greatest possible experience, as performance optimization is essential, you should first reduce your First Contentful Paint timing.  Here are four key steps to improve your First Contentful Paint.

  1. Enable caching

    Caching is the process of storing copies of web pages in a cache, or temporary storage location, in order to access them more quickly. Technically, a cache is any temporary storage location for copies of files or data, but the term is often used in reference to websites. In order to load websites faster, web browsers cache HTML files, JavaScript, and images, while DNS servers cache DNS records for faster lookups and CDN servers cache content to reduce latency. In practice, you can use a variety of caching techniques, including:

    • Site caching: With website caching, you can control the settings for this type of caching with a caching plugin, which saves a flattened copy of your web page in a location in your website so that it can be quickly served to your visitors.
    • Browser caching: Browser caching allows your visitors’ browsers to store elements from your site using their own configurations.
    • Server caching: This type of caching uses a separate server to store your website’s resources in order to reduce the load on your own. A common example is a Content Delivery Network (CDN).
  1. Compress your website’s images

    The largest elements on any website are usually the media files. Unless you want to design a site that is entirely text, you’ll need a way to reduce image loading times.  To do this, you can either manually optimize your images using websites such as tinypng.com or an image compression plugin.

  2. Optimize your site’s JavaScript and CSS

    For aspects of functionality and design, most modern websites rely heavily on JavaScript and CSS.

    While scripts and stylesheets usually don’t have a lot of weight to them, the more that your visitors use them, the more they add up. Furthermore, browsers must execute each script separately, which can significantly slow down performance.

    Scripts and stylesheets can be minified and combined to reduce their load time.

  3. Implement lazy loading

    Browsers don’t always load and render your pages’ images in the order you want them to appear. As soon as the photos and graphics have finished loading, they will appear. The amount of time it takes them to do so varies depending on the size of the files, your internet connection, and other factors.

    Lazy loading delays the rendering of some images until the user scrolls down and sees them. In theory, this should help you cut down on your FCP times. However, this only works if you use lazy loading for the appropriate elements. Above-the-fold images, or those that appear in the first section of the page, should not be used with this technique to get the best results.

 

Automatically Improve your First Contentful Paint with a Web Performance Optimization Plugin

If you would rather have a tool automatically optimize your website’s First Contentful Paint, you can use a web performance plugin such as our Pegasaas Accelerator WP plugin for WordPress. Pegasaas offers a host of built in features that automatically implements:

  • Page Caching
  • Lazy Loading
  • Font Preloading
  • Performance Monitoring
  • Image Optimization
  • JavaScript and CSS Optimization
  • Resource Optimization
  • Server Performance Optimization

With Pegasaas Accelerator WP, website performance optimization is simple to set up and can have your site with an improved First Contentful Paint in just a few clicks of the mouse.

Sign up is easy and includes a free trial and 30 day money back guarantee, so that you know that the plugin is right for you and your website.  Try it out today!