Forem: RiteshShetty123

How To Setup CI/CD Pipeline With Bamboo For PHP Projects

RiteshShetty123 — Thu, 29 Sep 2022 11:21:40 +0000

Accurate automation testing and seamless product delivery are the two major factors that can help build an exceptional product experience. This principle applies to a range of software products like websites, mobile applications, web applications, and more.

Every software developer wants the code to be well-tested and well-delivered to the end-user. Though this sounds complex, the process can become easier when automation takes over. That’s where Pipelines come into the play. The build & deployment pipelines help in the implementation of the automation process.

It governs all the activities, right from version control to providing applications into the hands of the end-users. This is achieved via prominent CI/CD tools like Jenkins, Circle CI, GitLab CI, etc. The combination of CI/CD with Bamboo, GitLab, and LambdaTest helps in making the most out of DevOps and Selenium test automation.

CI/CD with Bamboo helps in building CI/CD pipelines, especially when the application involves cross connectivity with different APIs and various third-party applications. This also provides immunity to the risk of a failed production deployment. Gitlab helps in version controlling the code, whereas CI/CD with Bamboo helps to pipeline the source code for different types of testing (i.e. cross-browser testing, white-box testing, unit testing, etc.). The best part is that the advantages offered by CI/CD with Bamboo are independent of the development language. CI/CD with Bamboo is used for PHP projects for ensuring that the code going into the production pipeline is of high quality.

Till now, we touched upon the importance of pipelines in the automated process of building software applications and deploying them to the target production environment. With the stage all set, let’s look at how to set up the CI/CD pipeline with Bamboo for the PHP project.

In case you are curious to know how Bamboo stacks up against other CI/CD tools, make sure to check out the Comparison of top CI/CD tools in the LambdaTest Learning Hub.

Bamboo is a popular Continuous Integration (CI) tool developed by Atlassian in 2007. Bamboo is a commercial product that lets you perform automated builds, tests, and releases. All of this in a single workflow!

Read — Jenkins vs Bamboo: Showdown of CI/CD tools

Pre-requisites for Bamboo Installation

Before proceeding with the Bamboo CI/CD pipeline for PHP projects, you need to ensure that prerequisites for Bamboo are met. Here the prerequisites for installing and configuring Bamboo on the requisite (i.e. Windows/Ubuntu) server.

Installation of Atlassian Bamboo
Atlassian Bamboo is a Continuous Integration and Continuous Deployment (CI/CD) server. Bamboo provides assistance to software development teams with automated building and testing of software source code. It can also work as a reporting tool for statistical analysis. The steps to install Bamboo are provided ahead in the article.

Installation of PHP
PHP is a server-side scripting language that is used to develop static websites, dynamic websites, or web applications. It stands for Hypertext Preprocessor, which was earlier known as personal home pages. The installation of PHP and PHPUnit (i.e. unit testing framework in PHP) is necessary since we would be demonstrating CI/CD with Bamboo for the PHP project. Please check out our detailed Selenium PHP tutorial for steps on installing PHP, PHPUnit, Composer, and more.

Installation of Node.js
In the integration of LambdaTest with Bamboo, we will install Node.js as a second task. Node.js is a JavaScript runtime that is used to build scalable network applications. Node.js has no thread networking and thus is free from deadlocks. You can download the zip version or the windows installer version from here. You can further read Selenium NodeJs tutorial to gather details on automation testing with NodeJs.

Git repo of a PHP Project
Git repository is used for version control of source code. It is also used to clone the repository and create a build of the application. The PHP project in the Git repo will be used for the demonstration of CI/CD with Bamboo with a PHP project.

For the demonstration of Bamboo integration with LambaTest integration, we will use the repository with Javascript project and Protractor tests. The link to the repository is https://github.com/LambdaTest/protractor-selenium-sample-gitlab.git

New Project in Bamboo
The new project in Bamboo is to create a new pipeline for the build (or deployment) of the application. Since we will be using the LambdaTest Selenium Grid, we first create an account on LamdaTest. Please make a note of the user-name and access-key from the profile section on LambdaTest. We will be integrating LambdaTest with the Bamboo pipeline.

Atlassian Bamboo can only run with the JDK(JAVA Development Kit). Thus, a supported version of Java is required. JAVA_HOME is a system environment variable that provides the path to Java’s home directory. If a path is not returned you’ll need to set the JAVA_HOME environment variable manually before installing Bamboo.

Why use Bamboo Pipeline for PHP Project

Now that we have covered the prerequisites for CI/CD with Bamboo, let’s look at the essentials of the Bamboo pipeline. The Bamboo pipeline lets you build and run unit & integration tests by integrating the source code.

Bamboo Pipeline also provides reliable, secure, and well-managed benefits over other tools like Jenkins. Some of the prominent advantages of using a Bamboo pipeline for PHP projects are below:

Automated build and test process
The source code when pulled out of a repository to a Bamboo pipeline gets compiled and focuses on creating a build. After compilation, the unit tests and integration tests are run. The pipeline gives different ways to manage builds that have different requirements or targets.

Build and deployment process independent of the local environment
When a large team assembles to create a secure software product, working in a local environment might not suffice the long-term requirements of the project. Version controlling using tools like GitHub, GitLab, etc. is an absolute must.

Bamboo pipeline fetches the code from the relevant repository, triggers a build, and integrates the tests. This pipeline makes the whole process automated and triggers as soon as a developer commits code. This is one of the major advantages of using CI/CD with Bamboo or in general using CI/CD along with automation testing.

Automatic trigger of unit tests and integration tests
The Bamboo pipeline helps in optimizing the build performance through parallelism.
This pipeline leverages elastic resources and can perform different tests in different environments.

Integrate code repositories from version control systems
The Bamboo pipeline can connect to a lot of version control systems via the relevant plugins. Build can also be tested against different target environments. The build and test process can be expedited with parallel test execution.

Automatic builds and deployments are performed to a server
The Bamboo pipeline starts the build, just like it is done by MSBuild in Visual Studio. Once the project is built, “Artifacts” are created. “Artifacts” are the build results like an executable app, config files, property files, etc.

Plugins and Interfaces for performing tasks
Bamboo has a rich plugin ecosystem with plugins available for doing tasks such as cloning a source code repository, performing user acceptance testing(UAT), and more. Some plugins also enable Sonarqube integration that helps in performing code quality checks. The Integration builds from the pipeline provide early ‘fail fast’ feedback on the quality of new changes.

Detailed reports statistics
Bamboo uses the concept of a ‘plan’ with ‘jobs’ & ‘tasks’ to configure and order the actions in the workflow. A Bamboo pipeline can have more than one plan and can provide reporting across all plans. The reporting can be done via the wallboard which is a dashboard of the pipeline. It provides detailed statistics like the number of builds, deployment environments, etc. The pipeline also provides links to the other applications and allows setting up different permissions for all the plans.

Scheduling and coordinating sequential stages
Another major advantage of CI/CD with Bamboo is sequential execution of different stages is possible with the Bamboo pipeline. Jobs in different stages can be executed sequentially and/or parallelly on a need basis. Stages process jobs on multiple agents and multiple environments. Sequential stages use artifacts from the previous stage in the upcoming stage. The end result is a more structured and well-organized pipeline workflow.

If you are a PHP expert, you can acquire a benchmark industry certification specializing in core PHP programming skills and expand your opportunities to advance your career in PHP automation testing.

Check out this: Complete Guide to End to End Testing with examples to learn more!

How to install and run Bamboo CI

Now that we have covered the advantages of CI/CD with Bamboo, let’s look at how to run Bamboo for continuous testing:

Follow the below-mentioned steps for installing Bamboo on Windows:

Check for the supported operating systems, hardware platforms, databases, and browsers for the version of Bamboo that is to be installed (more details here).
Java installation and JAVA_HOME environment variable should be set correctly. set correctly.
Download the latest Bamboo executable for installation.

Installing Bamboo using Windows Installer

<0l>

The installer is a setup wizard known as “install4j wizard” that sets up the Home directory for Bamboo and saves all the required bat files.

Select the folder where you want to install Bamboo and click Next

Set the home directory as C:\Users<current-user>\bamboo-home and then click Next.

Click on Finish to complete the installation

Check this out: Selenium Testing Automation Cloud- Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers

Installing Bamboo on Windows using the Zip Archive

Download the ZIP folder for the latest version of Bamboo
Extract the contents of this ZIP Archive folder into a particular location (e.g. C:\Program Files\Bamboo)
Set up the Bamboo home directory to C:\Users<current-user>\Bamboo-home.
With this, the installation of Bamboo is completed
Start the Bamboo server from the location: \bin\start-bamboo.bat
Go to the web browser and access the running Bamboo instance by typing http://localhost:8085/ in the address bar.

Check this out: Online Automation Testing Platform- Accelerate your release velocity with blazing fast test automation cloud

How to Configure Bamboo CI

When you open the URL http://localhost:8085/ for the first time, you will be redirected to the setup wizard page
In order to use Bamboo, you must have a valid license key (evaluation or commercial). The evaluation license can be generated from the MyAtlassian self-service account.

3- To get the valid license key, click on the link given down the box(on keyword ‘Atlassian’). You will be redirected to a new page for generating the license key. The trial version is valid for 90 days per project.

4- Check the Server ID and then click on “Generate License”.

5- You will be redirected to a new page, where the license key will be available in a box next to Server ID.

6- Copy the valid License key and paste it in the required box below the Server ID. You should also select Express Installation.

7- Alternately, you can also select Custom Installation. After selecting Custom Installation, it will redirect you to a new page. If you want to change the URL (or any system paths or directory), you can change it in this step. Post that, click on the ‘Continue’ button.

8- After a couple of minutes, the Bamboo CI instance will be ready for usage.

9- Set the administrator user. Go ahead and provide details like Username, Password, Full Name, and Email Id to register as the admin user.

10- After creating the admin user, you can log in to the Bamboo Application and create a new project or plan.

Check this out: Online Automation Testing Platform- Accelerate your release velocity with blazing fast test automation on cloud

How to integrate Bamboo Pipeline With Cloud Selenium Grid

With the completion of Bamboo CI/CD installation, we are all set to perform Selenium test automation with PHP using Bamboo CI/CD. Here the major steps for using CI CD with Bamboo and Selenium PHP on a cloud-based Selenium Grid:

Cloud-based Selenium Grid specializes in running serial (and parallel) tests across multiple browsers, operating systems, and devices. LambdaTest provides a cloud-based Selenium Grid that lets you perform Selenium test automation on 3000+ different browsers and operating systems online. Check out our detailed tutorial on cloud testing to get an in-depth understanding of the benefits of cloud-based Selenium Grid.

Read — What is Parallel Testing and why is it important?

We will be using Bamboo CI/CD for the PHP project, with the execution on LambdaTest’s cloud-based Selenium Grid. Here are the steps for integrating the Bamboo pipeline with LambdaTest Grid:

Check for the installation of Bamboo, PHP, PHPUnit, and Composer with Selenium dependencies.

Once the setup is installed, we will check out the sample code in a Github repository. The code in the repository is a simple PHP and Selenium web automation script that searches for LambdaTest on Google.

<?php

require_once('vendor/autoload.php');

use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;
use PHPUnit\Framework\Assert;

/*
    LambdaTest selenium automation sample example
    Configuration
    ----------
    username: Username can be found at automation dashboard
    accessToken:  AccessToken can be generated from automation dashboard or profile section
    Result
    -------
    Execute PHP Automation Tests on LambdaTest Distributed Selenium Grid 
*/

 # username: Username can be found at automation dashboard        
    $LT_USERNAME = getenv("LT_USERNAME");

    # accessKey:  AccessKey can be generated from automation dashboard or profile section
    $LT_ACCESS_KEY = getenv("LT_ACCESS_KEY");

    $host= "http://". $LT_USERNAME .":" . $LT_ACCESS_KEY ."@hub.lambdatest.com/wd/hub";

    $result="passed";

     $capabilities = array(
        "build" => "Sample PHP Build",
        "name" => "Sample PHP Test",
        "platform" => "Windows 10",
        "browserName" => "Chrome",
        "version" => "88.0"
     );

      try{
           $driver = RemoteWebDriver::create($host, $capabilities);

        $driver->get("https://www.google.com/ncr");

        $element = $driver->findElement(WebDriverBy::name("q"));

          if($element) 
        {
        $element->sendKeys("LambdaTest");
        $element->submit();
        Assert::assertEquals($driver->getTitle(),'LambdaTest - Google Search');
        }
        } catch(Exception $e) {
            $result="failed";
            print  "Test failed with reason ".$e->getMessage();
        }
        finally{
            // finally quit the driver
            $driver->executeScript("lambda-status=".($result == "passed" ? "passed":"failed"));
            $driver->quit();
    }
?>

3- With the completion of the basic requisites for Bamboo CI/CD with PHP project, let’s log in to the Bamboo dashboard. Click on the Create your first build plan to construct a new Bamboo project.

4- Enter the Bamboo project name as ‘Selenium grid integration’ and plan its name as ‘running automation tests’. The next step is to link the GitHub repository containing the source code and tests.

5- For linking the repo, click on Link new repository besides Repository host and from the dropdown ‘Select repository host’. Select Git as the preferred version control system.

6- Enter the Git repo name (in this case it’s LambdaTest PHP) below the dropdown and then provide the repo URL beneath the Git details. If the repository is private, you would need either Username & Password or SSH Keys to authorize the repository.

7- For public repositories, simply provide the URL

8- Use Test Connection to see if Bamboo is able to perform Source code Checkout appropriately or not. After clicking on Test Connection, you should get ‘green tick’ with indicating ‘Connection successful’.

9- Click on the Configure Plan button. With this, the Bamboo CI/CD for PHP project is ready for use! A new page will appear to configure more tasks ahead.

10- The first task is ‘Source Code Checkout’ which is built by default as we connect the Git repository to the Bamboo project. You can add more tasks by clicking on ‘Add task’. The build plan will run on the agent environment but you can always provide the Docker image after selecting ‘Run this job in’ as ‘Docker container’. Check out our detailed blog on how to run Selenium tests with Docker.

11- Click on ‘Add task’ to create a task for running Selenium web automation tests on the LambdaTest Grid via PHPUnit. Select ‘test’ from the left menu of the popup box and choose PHPUnit.

12- A new dialog box opens up in the right column of the page. Here, you will provide the required Task description, executable, arguments, environment variables etc. The details are given below.

13- If the executable has nothing in the dropdown, you need to specify the address of the PHPUnit executable installed on your machine. Click on ‘Add new executable’ and a new popup dialog box appears. Here, provide the ‘Executable label’ as ‘PHPUnit’ and set the path as ‘C:\PHP7\vendor\bin\phpunit’( i.e. path where PHPUnit is installed). Select Add.

14- In this demo of Bamboo CI/CD for PHP projects, we run the tests implemented in lambdatest.php on the LambdaTest Grid. Provide lamdatest.php in arguments and click on Save. This will add a new task successfully.

15- Click on the ‘Save and continue’ button, to save the plan configuration. A new page will open with all the plan details and configuration.

16- Click on the Default plan configuration and below the Plan details tab, check the Plan enabled checkbox. Click on Save to save the plan configuration.

17- Now, to run the plan and two tasks sequentially, just click on the Run > Run Plan button on the topmost right side of the page.

18- This will initiate the job and logs will be reflected under the logs tab.

Test your web and mobile apps on Online Emulators Android . Ensure your apps are compatible across latest and legacy Android operating systems, devices, and browsers.

Using Bamboo CI/CD to run tests on LambdaTest

With LambdaTest integration with Bamboo CI/CD, you can perform cross-browser testing 3000+ browsers and operating systems online. The tests could be performed directly from the Bamboo server (e.g. browser compatibility testing can be performed as soon as the changes are committed to the build). Integration of LambdaTest with Bamboo CI/CD server can help in reducing release cycles and shipping the product faster.

Here are the steps for integrating LambdaTest with Bamboo CI/CD:

After installing the pre-requisites, login to your Bamboo server as Administrator
Create a new Project named ‘LambdaTest integration’ and add a new plan named ‘integration plan’.
After creating a new plan, create 3 tasks. To know how to create a new plan and task, just refer to the previous steps discussed earlier.
The link to the new Git repository with Javascript project and Protractor tests is https://github.com/LambdaTest/protractor-selenium-sample-gitlab.git
Provide the repository name at the time of construction of the new plan
Fork this repository via your Git Account and replace and in *.conf.js

7- Click on the Configure Plan button. Our first task will be source code checkout which is created by linking to the repository. The plan will be created with the default job and stage.

8- Install required Package is the second task that needs to be added here. We will install Node.js. Click on ‘Add Task’ and in the popup dialog box, select npm. Specify the details as :

Task description: Install required Package
Node.js executable: <Add the path to the location, where Node.js is installed in your computer>
Command: install
Advanced Options : tick on the ‘Use isolated cache’ Checkbox

9- In the third task, we will attempt Protractor testing which is an automation and end-to-end BDD testing framework that plays an important role in testing AngularJS Applications.

Read — Cross Browser Testing with Protractor and Selenium

You can install Protractor via npm install command:

npm install -g protractor

You can also create a configuration file known as conf.js, for the local machine. The code to be put in conf.js is:

exports.config = {
  seleniumAddress: '[http://localhost:4444/wd/hub'](http://localhost:4444/wd/hub'),
  spec: ‘single.js’
};

To configure the protractor test for LambdaTest, you would need to use the below script:

echo "start testing"
//Add access credentials in plan variable
set LT_USERNAME=<Your_LambdaTest_Username>
set LT_ACCESS_KEY=<Your_LambdaTest_Access_Key>

wget [https://downloads.lambdatest.com/tunnel/v3/windows/64bit/LT_Windows.zip](https://downloads.lambdatest.com/tunnel/v3/windows/64bit/LT_Windows.zip)
unzip -o LT_Windows.zip


//To start Tunnel
LT --user %bamboo.LT_USERNAME% --key %bamboo.LT_ACCESS_KEY%

node node_modules/protractor/bin/protractor single.conf.js

10- Along with replacing bamboo.LT_USERNAME and bamboo.LT_ACCESS_KEY with your LambdaTest Account Username and Access Key in the Script, you will also need to configure the LambdaTest Tunnel.

To configure the Tunnel in your local machine, login to your LambdaTest account. The Dashboard will appear, click on Automation from the left-side column on the dashboard. On the topmost right side, you will find a button named ‘Configure Tunnel’.

On click, you will find the WinrarZIP Archive with a binary file. Extract this zip to a new folder, and execute the command given above to start the Tunnel after navigating to that folder.

11- Use the below command to connect the application to LambdaTest Selenium web automation platform:

LT --user %bamboo.LT_USERNAME% --key %bamboo.LT_ACCESS_KEY%

12- The last step in Bamboo CI/CD with the PHP project is the creation of the script. Click on ‘Add Task’ and select ‘Script’ from the popup dialog box. As soon as it is selected, a new task will be added below npm.

Task description : Run Protractor Tests
Interpreter : Shell
Script location : Inline 
Script body : (This consist of script given above)

13- Click on Save and then select the Save and Continue button.

14- Enable the Plan and Run it by clicking the top-most ‘Run>Run Plan’ button. You will get all the details related to the execution of the Selenium web automation test in the tunnel.

15- You can check the status of the test using the Automation Dashboard on LambdaTest.

You can also run multiple tests in parallel, which is the most demanding feature of the Selenium Grid. To run tests in parallel on LambdaTest, change the script body specified in the last step:

echo "start testing"
set LT_USERNAME=<Your_LambdaTest_Username>
set LT_ACCESS_KEY=<Your_LambdaTest_Access_Key>
node node_modules/protractor/bin/protractor parallel.conf.js

On the top right corner of LambdaTest Dashboard, you will see a Tunnel Active option, click on the same to monitor the test status.

Test your web and mobile apps on Online Android Emulators . Ensure your apps are compatible across latest and legacy Android operating systems, devices, and browsers.

Wrapping Up !

Kudos! Now, you know how to work with the most popular Continuous Integration Server — Bamboo CI/CD. You have also seen how it makes testing super easy and integrates perfectly with cloud based Selenium Grid like LambdaTest. Bamboo CI/CD can be used with PHP projects to run Selenium automation tests as scale.

CI/CD with Bamboo helps enterprises utilize the power of automation via cloud-based Selenium Grid. Though we demonstrated CI/CD with Bamboo for the PHP project, the popular CI tool is usable with projects spanning other popular programming languages.

Be sure to check the best CI/CD tools that help you build, test, and deploy at an accelerated pace. That’s all folks. I hope this tutorial would be a knowledge — packed bundle for all of you. If you find this useful, share it with your friends and on social media platforms too.

Happy Testing !!

Here’s How Experts Are Improving Website Performance To Meet Core Web Vitals

RiteshShetty123 — Thu, 22 Sep 2022 13:59:05 +0000

You might have seen the Core Web Vitals announcement from Google last year, well the update is just right around the corner! Adding page experience as one of the ranking factors is a surefire game changer and one of the first major updates from Google in 2021. This is why a major thrust should be given to page responsiveness, cross browser compatibility, and other such factors as they are integral in providing a seamless end-user experience.

// Detect dark theme var iframe = document.getElementById('tweet-1266036796485332992-751'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1266036796485332992&theme=dark" }

As Google announced this last year, 70% of the users started engaging with Lighthouse and PageSpeed Insights to find out the possibilities of improvement.

This clearly indicates how important is the ranking factor for businesses. To reap the benefits of this update, all you got to do is simply adhere to Google’s goal of making the web experience better! It’s that easy!

Well, to prepare for the impact of core web vitals update we asked a few experts to help us with their opinions and subject expertise. In this blog, you will learn about the core web vitals, its impact and key actionable tips for you to get started.

What Are The Core Web Vitals?

Throughout the years, Google has always prioritized user experience and consistently worked upon tweaking its search engine service. With this Core Web Vitals update, it’s just one more step to serve the web audience better.

Although there are existing metrics that help Google understand if your website is secure to accessor is your website mobile friendly? But this package of Core Web Vitals comprises three main metrics that would help Google supercharge the user experience.

Core Web Vitals comprises of three key metrics:

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

These metrics will join hands with Google’s existing metrics like:

mobile friendliness
website security, and
Intrusive interstitials

The combined metrics will constitute page experience ranking signals. However these metrics are not here to stay for long and Google will be evolving them by adding more relevant metrics to make the web experience better.

Let’s deep dive into each of these Core Web Vitals metrics:

LCP — Largest Contentful Paint

Largest Contentful Paint (LCP) measures the loading time of the largest image or text block on your webpage. This is an important metric because your website might not load everything at once! The browser sends multiple requests to the server calling out for different assets like CSS, images, videos etc.

When your website loads to a point where images or text blocks are organized and actionable, that is Largest Contentful Paint. So lesser the requests sent to a server, faster the loading time. Google states that an LCP of 2.5 seconds or below to be good, and anything above 4 seconds is poor.

FID — First Input Delay

First Input Delay (FID) measures the time taken for your website to process a user’s request, which can be anything from the initial interaction of clicking a link on your website or doing some operations with WebElements like buttons, drop downs, etc. This metric is crucial as it helps to understand whether the user is interacting with your website and how?

For a good user experience, your website should have an FID score of 100ms or less. Afterall creating a first impression is extremely important!

CLS — Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures the instability of elements on your webpage after it is loaded. Cumulative Layout Shift has more to do with the real experience that a user has on your website. For example, you are reading an article and suddenly the space you are reading navigates! That’s a bummer right?

This usually happens due to non optimized font sizes, imagessments or even a third party ad that loads late on the website. With the help of CLS, Google can now understand the overall experience of your website. Since this is an experience-based and not a time-based metric, a good website experience CLS score should be 0.1 or less.

Till now you have been optimizing for page loading time, mobile first experience, and more. However, the above mentioned metrics enhance the optimization by measuring the loading time, interaction of users, and visual stability of your website. So it’s essential to have a strategy in place that can help your website rank better.

// Detect dark theme var iframe = document.getElementById('tweet-1223191694788702208-376'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1223191694788702208&theme=dark" }

Test your web and mobile apps on Online Emulator Android. Ensure your apps are compatible across latest and legacy Android operating systems, devices, and browsers, click here.

How important are the Core Web Vitals for SEO?

Sites that are well optimized for user experience get more traffic and better rankings. If you are already ranking on top positions, you need to optimize your website for core web vitals to stay ahead of your competitors.

A study on fashion websites reported that only 1 out of 25 websites is optimized for core web vitals. Which means they are still not prepared for the update and won’t gain any rank boost. So if you are thinking that your page experience is poor, well you are not alone!

Also rooting for the long run when Google will amplify this update with more metrics, it’s a better practice to start optimizing now!

Google has made an important change by enabling non AMP content to get featured on Top Stories Carousels for mobile search. Now its core web vitals threshold which is more important to get featured on Top Stories.

Higher the rankings of core web vitals, higher the chances of getting featured on Top Stories Carousels for mobile search (on Google).

Well, Core Web Vitals is not the only ranking signal you got since there are hundreds of ranking signals on which your search engine rankings depend on. So having just one update affecting your ranking is usually hard to believe.

All being said, the main goal of Google to implement this update is making the web experience better. It was observed that delays in the website affected the user retention rate and if your website meets the threshold of Core Web Vitals update, 24% of the users would never abandon due to page load time.

This means you are gaining 24% more traffic — users or maybe customers! Ultimately, they would help you grow the online business and providing them a seamless experience would be the only way to go forward.

Expert Opinions On How To Improve Website Core Web Vitals

There are multiple things you can do to improve your Core Web Vitals for improving the rankings. We asked a few experts on how they are preparing for the update and their answers clearly indicate the growing importance of Core Web Vitals for online businesses. Let’s deep dive into the strategies, the checklist, or the plan that can help you get prepared for the update.

Optimizing Mobile Performance

Mobile performance is an important factor that Google has clearly indicated! The ranking will impact mobile search results only as of now. This is an important aspect to know if you are thinking about where to start with the changes. You need to ensure that your website is not only mobile friendly but optimized for performance too.

Our expert Bruce from SoftwarePundit, explains “We started with optimizing our fonts as the loading time was causing cumulative layout shifts (CLS) and also shifted to fixed image sizes” This would definitely help in optimizing the score for CLS, as over sized image sizes will cause interactivity issues and users might just bounce off.

Similarly, John from Vivaflavor experienced that loading time of his website logo had not been optimized and fixing that went a long way towards improving the CLS score.

Ted from JustSeo also states the importance of mobile optimization as they tested this over and over to make sure that every page loads on mobile devices the way it should be. To make this work, we changed some fonts, and we’ve enlarged some of our buttons to make sure they’re easy to click on smaller screens.

Using tools like LT Browser you can optimize the mobile view of your websites by testing on 50+ device resolution on the go. Furthermore it also allows you to run performance reports which includes the Core Web Vital metrics on Lab data for you to analyse, debug and test instantly.

Defining Display Ad Sizes

Core Web Vitals update can cause major changes in how programmatic ads work. Publishers usually accepted the substandard experience on their website due to multiple ad slots, larger ad sizes, and slow loading time.

Earlier such user experience was accepted as these display ads bring in revenue to the publishers. However with the Core Web Vitals update, this would definitely change!

Richmond from Meal Prepify, states that website owners with content based sites that run display ads should create at least one test page.

Display ads are a big hit to site speed and make it hard to identify issues to fix.

Disable ads for one of your low traffic posts and run it through various speed tests. Work through all of your speed issues related to your site and then reactivate ads. This will ensure that your site is running as fast as possible compared to other sites in your niche.

Display ads can definitely hit two of the three Core Web Vitals metrics — CLS and LCP.
You as a publisher need to make sure that the ad slots are well defined with fixed image sizes and are optimally placed over the whole website. Slightest of the dip in ranking might directly affect your revenue.

One of the most important steps you can take is to ask your ad platform partners steps they’re taking. Ask them to change the strategy if things don’t work as per the initial plan.. If your ads are jumping around when the page loads, chances are your ad platform partners are the only ones who can fix it explains Eric from BeanPoet.

Optimizing Site Speed Metrics

Well these are the non Core Web Vitals metrics but are co-related to the First Input Delay.
Sebastian from dofollow.io explains it’s important to pay closer attention to the metrics
Average Document Interactive Time and Average Document Content Loaded Time.

If your visitors are unable to engage with your site fast enough because of this factor, not only will they quickly leave the site but Google Core Web Vitals update might affect your search rankings.

Both of these analytics are often overlooked, but they just became much more pressing for e-commerce businesses in 2021 and beyond.

Minifying CSS/JS & Reduced Redirects:

One reason your website loads slowly is due to junk bits of code in your CSS/JS files. When your web page loads, it reads all these unnecessary files which obviously affects the loading time and might affect your LCP & FID Core Web Vitals metrics.

Kevin from GR0 states a good point here which will help you reduce the page loading time is by minifying CSS, JavaScript, and HTML for your code. You can also reduce the number of redirects your site has. Every time a page on your site redirects to a different page, it takes additional time and will make your site slower.

Image Optimizations & Lesser Plugins:

This is by default one of the most important factors to improve your Core Web Vitals score! Large images on the website are measured by LCP and unoptimized images can adversely affect your page experience. Other image optimizations include removal of images in the first fold for mobile, using reduced image file sizes, and implementing image formats such as WebP.

Connor from AssuredMarketing considers implementing lazy loading and image compressors to avoid increase in page loading time for the users. Lazy loading allows you to fetch the image when it’s necessary to avoid the lag in page loading time.

CMS tools such as WordPress automatically support the Lazy loading of images which further help you workaround the page load time. You can also use plugins like WP Rocket to optimize caching, lazy loading for better performance. Tushar from toptech10s states that shifting to WordPress Gutenberg helped with a huge improvement in page load time and also met the Core Web Vitals criteria.

As you can see in this image above on the left, there is an image placeholder which is basically lazy loading in action. As the user interacts, the image then loads completely. This can also be done for video optimization.

Apart from images, a lot of websites use 100’s of plugins which makes the user experience clunky and results in slow loading time. This affects the LCP metrics of Core Web Vitals.
Using essential and lightweight plugins will only help you improve your loading time but also take you a step closer to reach the Core Web Vitals threshold.

Ted from JustSeo explains that one of the main determinants of page experience is how fast the visual elements above the fold loads. For this, we made sure that our main image is optimized before we upload it so that less work is required to make it visible. And since we’ve been looking forward to this update, we’ve made sure that we upload only optimized images.

Hosting Server Optimization:

For your LCP score to improve, server responsiveness plays an important role which is directly related to your hosting provider. If you are using a shared server, it is recommended to move to a dedicated server. Also, consider using CDN for images, videos and other multimedia as they are faster than the hosting server.

John from Vivaflavor advices to reach out to your hosting provider and ask them how well they are prepared for the Core Web Vitals update. With Optimizations at the host level, he has been able to eliminate all FID and LCP issues across the archive.

Actionable Tips For Core Web Vitals Update

With all the above mentioned information, here is the digestible action plan for you to get started on the optimization of Core Web Vitals

Optimize every page for Mobile Performance
Avoid large text boxes, use reduced text sizes and optimize fonts,
Image optimization, avoid first fold image for mobile, reduced file size, WebP formats.
Implementing Lazy loading and using essential plugins.
Removing or minifying unused CSS and JS files.
Defining display ads sizes, limited slots and optimizing for AdSense.
Server Optimization, using CDN and opting for a dedicated server (instead of a shared one).

Test your web and mobile apps on Online Android Emulator . Ensure your apps are compatible across latest and legacy Android operating systems, devices, and browsers, click here.

How to test your website for Core Web Vitals?

Google has made it extremely easy with all the information and timely updates about the Core Web Vitals. You can test your website by simply turning in the URL on PageSpeed Insights where all the Core Web Vitals metrics are implemented.

Additionally, you can also check how your website is doing for Core Web Vitals on Lighthouse, Google Search Console and more.

Another option is you can leverage mobile web development tools like LT Browser, which helps you generate performance reports to measure Core Web Vitals, Perform test on mobile devices across 50+ screen resolutions of mobiles, desktops, and tablets. Using LT Browser you can streamline UI UX development, test content placement and alignments, assess visually heavy websites on different screen resolutions and debug on the go.

Wrapping It Up!

The Core Web Vitals update from Google is supposed to go live in June 2021. Unlike other updates, Google has been very informative about this update and has provided detailed resources to get started with the optimization. This proposed update will ultimately help Google to improve user experience now and in the future, as more metrics will be introduced to help measure page experience.

Optimizing your website for these metrics will not only give a positive impact on the search engine rankings but also help you improve your user experience. We all know that better user experience leads to better satisfaction, reduced bounce rates, increased traffic and conversions, thus increase in revenue! So why not start optimizing!

Now you can Test on Latest Safari Desktop and Mobile Browsers for Cross Browser Compatibility. Test on real Mac machines running real Safari browser online.