October 27, 2022

Optimize WordPress sites made with the Newspaper theme

Improve the performance of the NewsPaper theme and your slow WordPress site.

Newspaper-WordPress-Theme
Print Friendly, PDF & Email

NewsPaper is a generic WordPress theme for online newspapers, blogs and magazines with everything you need to start your strong online project. Front-end editing functionality, drag and drop, page lazy loading speed, intuitive interface, etc.

From loads of ready-made demos for newspapers, online magazines and blogs to countless collections of layouts and components, Newspaper doesn't disappoint.

Also, you don't need to be an expert to work with Newspaper. Even someone without programming and design skills can still be successful in creating a modern editorial website.

Main features of the NewsPaper theme

I'll cover some of the more important features in more detail below, but let's start with a short list of all the features you get with the Newspaper theme:

  • Optimized performance: load times of around 2,2 seconds for a full demo site in my performance tests.
  • Over 120 importable demo sites: choose between importing demo content or just demo theme settings.
  • Visual design with drag and drop: customize demo site templates and create your own designs using the tagDiv Composer page builder bundled for the frontend.
  • Over 1.500 importable section templates: choose from over 1.500 post and page templates to import into the tagDiv composer.
  • Header / Footer Generator Page: Design your own custom headers or footers within the Website Manager.
  • Mobile friendly: you get responsive design, Google AMP support, and a bundled (and optional) mobile theme plugin.
  • Integrations: the newspaper integrates with WooCommerce, Instagram, bbPress, BuddyPress and more.
  • Integrated banner advertising spots: Easily place AdSense or other banner ads on your site. You can also include your ad placements with the Div Composer tag.
  • tagDiv Shop - the plugin that extends the capabilities of your WooCommerce site.
  • Pre-built ecommerce websites: complete site design ready for installation
  • tagDiv Opt-In Builder - a plugin that helps you generate new leads, get subscribers and show content to subscribed users only.

A WordPress magazine theme like NewsPaper is definitely a good option for bloggers, newspapers, media publications, online sellers or anyone else who posts a lot of content.

Basically, magazine themes help you to show large amounts of content, with extra options to present certain content or categories.

For example, in the default demo site design, you can see how you can use large images to present your most important posts. Then, visitors can also filter specific post categories in the smaller section below:

NewsPaper Theme

NewsPaper today, is a very widespread theme, in blog and news sites, since until recently it seemed to be the only intelligent and complete option for the creation of magazine-mode editorial websites.

If this reasoning was true until 2021, today we will not recommend the use of this theme, but rather we will direct a potential customer on alternative themes such as Zox News.

However, this post does not want to focus on what is the best solution for the creation of editorial portals, considering that in our opinion every specific need of the customer must be examined before recommending one topic or the other, but rather to communicate what the NewsPaper speed issues and solutions.

NewsPaper, Pagespeed Insight and Google Core Web Vitals

Unfortunately, over the years, we know that metrics have changed quite drastically, first through the metrics adopted by the PageSpeed ​​Insight analysis and then from 2021, thanks to the advent of Google Core Web Vitals which we have talked about in a very grueling way in several posts on our blog.

Core Web Vitals LCP FID CLS explanation "width =" 1024 "height =" 588 "srcset =" https://managedserver.it/wp-content/uploads/2021/04/core-web-vitals-addy-1024x588.png 1024w, https://managedserver.it/wp-content/uploads/2021/04/core-web-vitals-addy-300x172.png 300w, https://managedserver.it/wp-content/uploads/2021/04 /core-web-vitals-addy-768x441.png 768w, https://managedserver.it/wp-content/uploads/2021/04/core-web-vitals-addy.png 1280w "sizes =" (max-width : 1024px) 100vw, 1024px "/>

With this change we have clearly observed that unfortunately the NewsPaper theme tends to not perform well on mobile devices, determining value Core Web Vitals not sufficient, and therefore generating a PageSpeed ​​Insight evaluation certainly not suitable for obtaining the SEO and positioning advantages that a high score can entail.

So far nothing new, as we have noticed, the development team of the NewsPaper theme has also noticed, which not surprisingly, but specifically, has developed a WordPress plugin that can be integrated with the NewsPaper theme which is called td_mobile and allows you to overcome (at least in theory) the limits of the NewsPaper theme on mobile devices such as smartphones.

What is NewsPaper's TagDiv Mobile plugin?

Mobile div tag

The mobile theme is a feature specially designed to maximize the performance of the theme on mobile devices.

Mobile devices are evolving at the speed of light, getting smaller and faster every day. The key to the digital user experience is in your hands as visitors seek out information and expect fast page loading speeds and fresh content. This is the ultimate challenge: making mobile experiences as fast and rewarding as desktop ones. They brought all of these things back to the design board and solved them by creating the new Mobile Theme feature.

The philosophy

The mobile browsing experience is often frustrating. The causes are many: slow page loading speed, small and difficult to read text, low quality images, banners that block the content, buttons too close together that make it impossible to touch the one you want, and so on. They have therefore decided to put an end to this mess and, for this, they have developed the “Mobile Theme” which is called TagDiv Mobile and you can find it as td_mobile in the plugin directory.

How does it work?

The mobile theme is a lighter, performance-optimized template included in the NewsPaper package and loads on mobile devices ONLY. The Mobile theme comes with a template for pages, posts, categories, and more.

They have fine-tuned each model with care to deliver optimum performance and an excellent user experience. The posts come in a clean, predefined format that includes all the features available on the main theme. On the homepage, for example, it automatically renders a grid that contains the featured posts and a section of the most recent posts.

The theme does not require any other plugins and guarantees maximum performance. Once activated, a new administration panel becomes available in the Theme Panel area which allows you to customize various parameters for the "Mobile Theme".

Installation and configuration

You can install and activate the plugin in the themes panel in the Plugins section. It will automatically download the plugin from the NewsPaper theme developer's official repository and activate it.

Page customization

For the home page, the “Mobile Theme” comes with a single default page template that includes two sections:

  • Upper Grid: Shows 3 featured posts (posts included in the featured category)
  • latest articles - shows the latest articles

This template is displayed only if a static page is used. You can check the page settings in the WordPress admin panel Settings-> Reading section.

Once the plug-in is installed, a new tab called “Mobile Theme” appears in the NewsPaper -> Themes Panel area. The options allow you to customize the appearance and functionality of the mobile theme and make it conform to your expectations.

Therefore, we will not go into the explanation of the customization of the plugin and of your WordPress site, as this procedure is still quite intuitive even for not really technical figures.

Optimize WordPress and NewsPaper with TagDiv Mobile support.

Now that we have introduced the history and problems of NewsPaper, as well as the way in which the parent company has decided to stem the performance problems by developing a special Mobile TagDiv Mobile theme, now comes the salient part of the post, the focus of the speech and that that we know how to do well.

As we have always said and reiterated, our job is to speed up WordPress which is developed and built on non-performing technologies such as PHP and MySQL.

Attached plugins, slow SQL queries, poorly written, without indexes, and a spasmodic use of non-cacheable AJAX POST calls make this CMS an objectively slow and heavy CMS to run well for both the user and the search engines.

In this regard, we have never made it too secret that the use of static caches both in the backend and in the frontend can mask the problem in the same way as a foundation can mask an acne.

The problem remains, but no one notices it and everyone, search engines, companies, customers and visitors have their own rewarding and extremely satisfying user experience.

The TagDiv Mobile problem and server-side caches like Varnish

A Cache like Varnish (but we could also talk about LScache, or NGINX FastCGI Cache) tends to store a GET HTTP request and repurpose it every time it is requested, instead of running PHP processes again and querying the MySQL database to retrieve a since it had already recovered previously.

 

For example, providing a previously cached result immediately is the difference between having a site that loads in one second, and a site that loads in 5 seconds. Moreover, it is possible to manage very high traffic peaks in the order of tens of thousands of users per minute without any crash.

Google Analytics Traffic

However a cache tends to serve the same content to all visitors requesting that type of content, except for specific bypasses and exclusions which could for example occur for particular cases in which a user is logged in.

But what if this TagDiv Mobile plugin generates a different format for the mobile user than the desktop user and the Cache caches the mobile layout?

It happens that when a Desktop browser requests that page, it will still see the site with the mobile version compared to that of the Desktop version.

 

This behavior occurs because the TagDiv Mobile plugin uses the WordPress is_mobile () function to determine the type of Browser and conditionally generate a different layout based on the Desktop / Mobile browser.

This is_mobile () function, however, is called and executed only the first time the page is called, because from the second time the page is called, the static cache will provide the result already cached without running the php code and therefore the is_mobile ( ).

function wp_is_mobile () {if (empty ($ _SERVER ['HTTP_USER_AGENT'])) {$ is_mobile = false; } elseif (strpos ($ _SERVER ['HTTP_USER_AGENT'], 'Mobile')! == false // Many mobile devices (all iPhone, iPad, etc.) || strpos ($ _SERVER ['HTTP_USER_AGENT'], 'Android' )! == false || strpos ($ _SERVER ['HTTP_USER_AGENT'], 'Silk /')! == false || strpos ($ _SERVER ['HTTP_USER_AGENT'], 'Kindle')! == false || strpos ( $ _SERVER ['HTTP_USER_AGENT'], 'BlackBerry')! == false || strpos ($ _SERVER ['HTTP_USER_AGENT'], 'Opera Mini')! == false || strpos ($ _SERVER ['HTTP_USER_AGENT'], ' Opera Mobi ')! == false) {$ is_mobile = true; } else {$ is_mobile = false; } / ** * Filters whether the request should be treated as coming from a mobile device or not. * * @since 4.9.0 * * @param bool $ is_mobile Whether the request is from a mobile device or not. * / return apply_filters ('wp_is_mobile', $ is_mobile); }

Practically looking at the code of the function you understand even if you are not a programmer that the function returns a true or false value based on the User Agent. If the User Agent of the calling browser is among the mobile ones, then true will be returned, otherwise false.

At this point when you start seeing that desktop browsers display the mobile layout, or vice versa, that mobile browsers display the desktop layout, you are usually going to do two things, or rather two waivers:

  1. Remove the TagDiv Mobile plugin and rely on NewsPaper's standard responsive behavior
  2. Remove Server Side Static Cache such as Varnish, LSCache or NGINX FastCGI Cache.

Regardless of what the choice is, there will still be an important renunciation which will result in a significant deterioration in terms of performance.

If you remove the TagDiv Mobile plugin, you will always benefit from the advantages of a server-side static cache, however the values Core Web Vitals may not be adequate or sufficient.

If you remove the static cache on the server side, you can get good core web vitals values, but nevertheless the response time will be slow and you will have a TTFB that is certainly greater than the maximum 200 ms recommended (and tolerated) by Google. With 100 users connected you will also be definitely offline due to CPU load problems.

As you want to see, in short, it is always a big problem.

How do we solve the problem and optimize the NewsPaper sites in Managedserver.it?

To solve the problem, over time we have understood how it is of absolute importance not to have to give up either the server-side cache or the TagDiv Mobile plugin.

For this purpose we have therefore used a technique that allows you to determine the type of device on the web server through NGINX and divide the cache into two macro groups: Desktop and Mobile.

Based on the requests that will arrive, the cache will serve the mobile with the cache reserved for the mobile, and the desktop requests with the cache reserved for the desktop.

Dynamic Serving

All this while guaranteeing a high HIT RATIO and thus allowing both the server-side optimizations and the optimizations derived from the TagDiv Mobile plugin to coexist.

To give a real example, here are the results of one of our clients on which we use this approach:

PageSpeed ​​Insights Notizieinvetrina.it

As we said before, starting in June 2021 essential web signals have officially become ranking factors taken into consideration by Google to define the positioning of websites in the SERP. Consequently, by respecting the optimal thresholds set by the Core web vitals, you will have a better chance of appearing on the first page of Google search results, gaining great visibility.

If you or your client also uses the NewsPaper theme and the WordPress site is not achieving good performance or an adequate PageSpeed ​​score, we can perform the same optimizations on the website, so that you can get the best results.

Do you have doubts? Not sure where to start? Contact us


We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.

0256569681

Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.

PRACTICAL

ManagedServer.it is the leading Italian provider of high performance hosting solutions. Our subscription model is affordable and predictable, so customers can access our reliable hosting technologies, dedicated servers and the cloud. ManagedServer.it also offers excellent support and consulting services on Hosting of the main Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUST A MOMENT !

Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top