Page Speed & Core Web Vital

In this article, we will explain to you how to set up page speed and Core Web Vital optimization on your website with JNews. By properly configuring your website, your website can achieve optimal page speed results and meet the criteria for Web Vital.

1. Let’s Prepare
2. Setup JNews Core Web Vital
3. Setup JNews Page Speed
4. Setup Google Analytics
5. Enable Compression
6. Optimize Images
7. Leverage Browser Caching
8. Use a Content Delivery Network ( CDN )

 

1. Let’s Prepare

---

• Please make sure you have already using the latest version of JNews theme V9 or higher and keep all JNews plugins up to date.
• We recommend you only activate the plugin that you really need. Less number of plugins will decrease the resource that needs to load and decrease the functionality that needs to be executed. This thing will improve your site performance.
• We suggest you do page speed optimization after you finish setting up your website. So you won’t need to refresh the cache every time you made any change on your site

 

2. Setup JNews Core Web Vital

---

The Largest Contentful Paint ( LCP ) is responsible for the majority of the issues in JNews for Core Web Vital. To optimize the LCP, we’ve added a new option to the JNews element that allows you to do so.

1. Optimizing Largest Contentful Paint on a single post.
   Please go to Customizer → JNews: Single Post Option → Single Post Option → Single Thumbnail Setting → Force Normal Load. This optimization may have no effect on custom featured images.
   
2. Optimizing Largest Contentful Paint on a single page or landing page ( Only for JNews elements ).
   It will take some effort to complete at this point. Please check your site on PageSpeed Insights and look for the Diagnostics → Largest Contentful Paint element to see which elements are causing Largest Contentful Paint. Now that you’ve identified the elements, use the page builder to edit your page and navigate to the element settings, where you can check the Use Normal Image Load option if it exists.
   

 

3. Setup JNews Page Speed

---

To begin, please install and activate Autoptimize and WP Super Cache plugins. To avoid conflicts, make sure there are no minify or other caches plugins installed. On JNews V6.5 we provide some speed options on the Customizer and we have improved the options on V9. Many PageSpeed Insight points, such as Speed Index and Total Blocking Time, can be optimized here.

You can use another Minify or caches plugin but you still need the Autoptimize plugin to use the Optimized Script Loader feature and make some adjustments.

1. 1. Optimizing Total Blocking Time
      Please go to WordPress Admin Dashboard → Appearance → Customizer → JNews Additional Option → Speed Optimization.
      • Turn Optimize Assets option on.
      • Turn Base64 Image option on.
      • Turn Ajax Mega Menu option on.
      • Turn Disable Image Srcset option on.
      • Turn Enable Optimized Script Loader option on. ( Lazyload Script )
      • Turn Enable Async Javascript option on.
      • Select defer on Async Javascript Method
      • Set the other options to off.

      

   2. Optimizing Speed Index
      Please go to WordPress Admin Dashboard → Settings → Autoptimize → JS, CSS & HTML.
      On JavaScript option section:
      • Turn Optimize JavaScript Code? option on.
      • Turn Aggregate JS-files? option on.
      • Please enter “wp-includes/js/dist/, wp-includes/js/tinymce/” in Exclude scripts from Autoptimize Remember to make a backup before making changes, as this option can cause errors if third-party plugins or scripts and configurations are incorrect.* Note: If you encounter JS issue that related to undefined jQuery error, please try to insert “wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js, js/jquery/jquery.min.js“
      • Other options should be left as default

      
      On CSS option section:

      • Turn Optimize CSS Code? option on.
      • Turn Aggregate CSS-files? option on.
      • Other options should be left as default

      
      On HTML option section:

      • Turn Optimize HTML Code? option on.
      • Other options should be left as default

      
      On Misc option section:

      • Turn Save aggregated script/css as static files? option on.
      • Turn Minify excluded CSS and JS files? option on.
      • Turn Enable 404 fallbacks? option on.
      • Other options should be left as default

      

   3. Optimizing Third-Party Scripts
      Please go to WordPress Admin Dashboard → Settings → Autoptimize → Extra.
      • Select Combine and link deferred in head on Google Fonts
      • Turn Remove emojis option on.
      • Set the other options to off.

      

   4. Optimizing Server Request
      Please go to WordPress Admin Dashboard → Settings → WP Super Cache → Easy.
      • Turn Caching option on.

      
      Then, please go to WordPress Admin Dashboard → Settings → WP Super Cache → Advanced.

      • Turn Compress pages option on.
      • Turn Cache rebuild option on.
      • Turn Enable dynamic caching option on.

      

 

4. Setup Google Analytics

---

If you’re using Google Analytics on your website, we already provide an option to handle this thing. In this case, you don’t need to use an additional plugin to set up Google Analytics.

For setup, please go to WP Admin Dashboard → Appearance → Customizer → JNews Additional Option → Analytics / Tracking → then insert your Google Analytics code and enable Load Analytics Locally for better page speed result.

 

5. Enable Compression

---

Implementing the enable compression suggestion can be done simply in your server’s settings. If you are not very technical, you can ask your technical support team to enable GZIP compression for your server.

On the Apache server, you can add code below to tell your server to enable GZIP compression when returning a response to the browser.

 

6. Optimize Images

---

Our themes try to optimize the image by making every image on the container as fit as possible.

But all images still need to be optimized. You can install a plugin such as wp-smushit to optimize the image.

or if you have access on your server, you can use this command (Imagick need to be installed) :

If you are not very technical, you can ask your technical support team to set up it on your server.

 

7. Leverage Browser Caching

---

When a web browser displays your webpage it has to load several things like your logo, your CSS files, JS files, and other resources.

What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” (saved). This is the reason that the first view of a web page takes longer than repeat visits.

The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file

Again, if you are not very technical, you can ask your technical support team to set up it on your server.

 

8. Use a Content Delivery Network ( CDN )

---

Using a Content Delivery Network (CDN) can help to reduce load times for all of your visitors.

A CDN is a global network of servers. Each server will keep “static” files that make up your website. These static files include non-changing files such as images, CSS, and JavaScript. Unlike your WordPress pages, which are “dynamic”. When you use a CDN, users are served static files from the server that is closest to them each time they visit your website. Because the CDN is handling a lot of the work, your own web hosting server will be faster as well.

We recommend using the Cloudflare CDN. We have used the Cloudflare CDN on all of our websites. It works well with WordPress websites and complements your existing caching plugins for faster load times.