6 Ways to Improve the Speed and Performance of Your WordPress Website

6 Ways to Improve the Speed and Performance of Your WordPress Website

Everything is speeding up. Many people want to have the most important information as quickly as possible and to get it without unnecessary waiting. Speed is especially expected these days when browsing websites. Poor performance and slow loading times lead to an increase in the bounce rate. In today’s article, you can learn how to help speed up your website in WordPress. 

Why Is Website Performance Important?

Google recommends 5 seconds or less as the most optimal loading speed for 3G connections. If your loading time goes from 1 second to 3, the likelihood of bounce rate increases by 32 %. If your site takes 1 second to load, it increases by up to 123 %! According to a Google analysis (2018), mobile sites take up to 15 seconds to load on average! Website speedaffects nearly 70 % of consumers. The probability of making a purchase increases with website performance. If your website is slow, you’re losing customers and lowering your conversion rate. Your website speed is also a very significant SEO factor. That’s why we always try to keep an eye on the speed and performance when creating a website in WordPress, and we do everything we can to optimize it properly without using too many plugins.You can get an objective overviewof your website speed using various tools. We recommend Google PageSpeed Insights, but there are many others such as GTmetrix or WebPageTest. Let’s take a look at some of the ways in which we improve website performance and optimize it.

1. Less Ads

A large number of ads can be detrimental to your website, as ads load JavaScript, CSS and media, which can greatly slow down the page and also degrade the user experience. 

2.  Divide Long Pages

Long pages slow down the loading of the site.

  • If one of your web pages has too much content, it might be better to divide it into several pages.
  • Also keep length in mind when writing articles for your blog. Sometimes it’s better to split an article into multiple articles, which will also help speed up your site.

3. Latest Versions of WordPress, Plugins and PHP

WordPress plugin developers are constantly working on improvements, so it’s a beneficial to update them regularly. The PHP version also has a big impact on the performance of a WordPress website. Cloudways published the results of their benchmarking test, which measured site performance improvement from PHP version 5.6 to 8.0. The graph below shows that performance is continuously improving. Compared to the current PHP 8.0 with the fastest load time of 164 ms, PHP 5.6 came out almost 3 times slower.

Zeni team - average response time
Zeni team – average response time

4. Caching

Preload and prepares page content to minimize calculating and loading from the database when accessing the page. The user receives a preloaded version when the page is loaded, which can increase the loading time of the site by up to several times. In order to be able to resolve data requests faster in the future, caching stores this data. A Caching plugin should definitely be partof every production site because it will give you a huge increase of site performance. For our WordPress clients, we set up Redis Cache, which enables caching using an in-memory database.

5. CDN (Content Delivery Network)

  • This is a specific group of servers that are geographically closer to your visitors, thus reducing the response time when the page loads. 
  • Once the CDN is set up, your content (images, videos…) is cached on proxy servers and loaded from a server closer to your visitor’s location, which reduces response time and increases the speed of loading.
  • For our clients, we use the Cloudfare CDN service, which we set up for them and which is standard for all the sites we manage.

6. Quality Hosting

If you think that you have tried everything to speed up your website, but you are still not getting the expected results, you should consider a new hosting provider. At Zeni, we can offer you hosting that will make your website faster. We can also help with speeding up your site and increasing your traffic. Get in touch and we’ll be happy to help

SOURCES

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

Creating a Website for i4comfort

Creating a Website for i4comfort

The i4comfort application by A-technology brings complex yet simple solutions for a remote control of technology in your house. The idea of reducing heating costs, and thus also reducingthe CO2 footprint thanks to an intelligent technology control, attracted us and we were pleased to be involved in creating of a website for this application.

Why And How It Was Created

We created the website for i4comfort in CMS WordPress of an already existing client, for whom we launched a completely new production website this year. The company A-TECHNOLOGY s.r.o. has its presentation website a-technology.cz, so it was not only important to design the i4comfort website in a similar way as the parent one, but also to create a new identity for the new website at the same time.

A Comparison Between the Old And the New Website

The old i4comfort website had several drawbacks:

  • It did not meet the security criteria.
  • There was no development environment in the form of staging.
  • Its logo and appearance were outdated.
  • It was not responsive.
Old website

The new website:

  • It is fully responsive.
  • In multiple places, it has a CTA button calling for action, making it more likely to gain a customer.
  • We created a new logo and a new website design.
Home page of i4comfort

The Website Graphics

  • The website graphics correspond to the graphics of the mentioned parent website.
  • However, the new website has a unique and memorable design.
  • Its unique website identity makes it clear that it is a separate website.
  • At the same time, it feels familiar to customers of a-technology.
  • Information is not only communicated through text, but is also displayed graphically in many places, making it more memorable and clear.

Technical Functions

A Modern Experience

The website contains many visual effects which do not slow it down thanks to their careful integration. The website is also responsive on any device.

  • Many animations and interactive parts use only styling options (css).
  • There is no need to load JavaScript because of some clickable interactive sections where it is used very often on other websites.
  • Thus, the website is much faster, and yet provides the same quality experience, such as here:
Visual effects of website

The Website Responds to the User

The symbols of each technology change according to what the user is currently reading. The CTA button, icons, or navigation elements (top menu, dots on the right) also change according to the positions on the website. You can see everything on website „Jak funguje i4comfort“.

The Website Responds to the User

On page ,,Možnosti využití”, the images change interactively according to what the user reads. Thus, the reader can easily imagine what exactly they read about and also remember it better. This creates a unique, fast and interactive experience that will attract users.

Benefits of the New Website

Theme Built on Sage

Easy Configurability

  • The theme programmed by us for WordPress allows easy configurability.
  • The behaviour and style of the page header are separately configurable.
  • All content is easily editable without the need of developer’s intervention.

Mobile/Desktop Usability

The desktop environment is far from being just an enlarged mobile environment.  A good experience for every user is important to us.

  • All of the desktop space is used. Thus, as much information as possible is displayed on the screen and the website does not seem empty even on larger screens.
  • The mobile environment is adjusted for being used with a finger and also on smaller screens.
  • On a mobile, everything is easily clickable, simply and quickly accessible.
  • Many sections look significantly different on a mobile and a desktop.
  • For a better experience, many parts were simplified for a mobile. Some visual aspects used for a desktop were removed, because they had no added value for the mobile user.
Website is responsible

For i4comfort, we have created a new fast and clear website with a plenty of improvements. If you need help with creating of your website and want to provide your customers with a quality experience, do not hesitate to contact us, we will be happy to help you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

A Website Form – A Good Helper

A Website Form – A Good Helper

“Why is it a good idea to have a form on a website?” Today, we will adress this question. If you are creating a website for any type of a client, it is always a good idea to include a form. Some clients do not like making phone calls and prefer to request the service via the form. If you do not offer them this service, you might lose them.

Types of Forms

1. A simple inquiry form

This is a form that only consists of:

  • Name and surname
  • Address
  • Telephone number
  • E-mail
  • Additional information for us

This form can be found on websites of sole traders or companies usually offering only one service.

A simple inquiry form

2. A more complex inquiry form

We usually choose this type of a form for a client who is offering more types of services or selling more types of products, but is not yet interested in selling their services and products via an e-shop. For example, this type of a form might consist of:

  • Name and surname
  • Address
  • Telephone number
  • E-mail
  • Service/product – a selection from 2 to X  
  • Additional information for us

This form is usually used by those who require more information from their clients already at the beginning via the form, so they avoid bothering their clients and themselves with “unnecessary” phone calls regarding additional information later.

A more complex inquiry form

3. A multilevel inquiry form

When it comes to this type of a form, it is necessary to specify its structure in detail with our client. The better the specification is,  the better the quality of incoming inquiries will be. 

This type of a form is used by companies that manufacture more than two different products and have more than one production segments. These products/segments can have more than one type. These products are also sold both in the B2B and B2C spheres.

Therefore, it is necessary to fit as many questions as possible into the form, but also make them clear and logically subsequent. The form can contain a lot of information with different conditions. When a certain type of a segment is selected, only a specific selection of products for that specific segment will be displayed. This way, you can get an accurate specification of your client’s inquiry, which can then immediately be sent to a certain employee who can quickly start working on it. This will shorten the procedural time, which the client will certainly appreciate.

A multilevel inquiry form
A multilevel inquiry form

4. A form connected to a system

Sometimes, our clients want their form to be directly connected to their internal system. Not only it simplifies the work, but it essentially makes it more efficient and helps avoid possible errors caused by a human factor. All the information acquired from the website’s visitors are being directly sent to the internal system and to the certain person (employee).

A form connected to a system

A service order (an inquiry)  is sent to the Orion system and to the service technician (to their mobile app). The service technician recieves relevant information about the service order including a map location. Thus, they can plain their route and handle more service orders per day.

Form Benefits

A valuable contact information

If a potential client gives us their contant information (their e-mail or, in the best case, a telephone), the sales department is then able to contact them.

More detailed information

The more detailed the form, the more accurate information we acquire from it. However, we always make sure that the form does not become a village gossip with million unnecessary questions.

Inquiry segmentation

Larger companies have a special trader for each type of a product. If the assistant, or even the form itself, knows who they should assign the inquiry to, they will automatically do so. This shortens the reaction time and the specialist can react very quickly.

Ideal Forms

Simple

Each form should consist of only the most important information required from the client.

Understandable

In forms, we prefer to use common terms instead of professional ones. Not every visitor might understand them, since they can be from outside of our industry.

Tools and Plugins Used to Create Forms

Free

There are plenty of them for WordPress. I will mention just a few of them:

Contact form 7

Gravity Forms + Custom Post Types

Caldera Forms

Paid

You can purchase extended versions of some of the free plugins. I recommend the following ones:

Caldera Forms

Gravity Forms

Summary

  1. Specify as much as possible with your client before you create the form.
  2. Decide which information is really necessary to acquire from the visitor/potential client.
  3. Less is sometimes more. Include only the necessary in the form.
  4. Choose a good plugin. Some builders already have a built-in contact form.
  5. The more visitors your website gets thanks to the contact form, the better your chances of selling your product.

If you are interested in any mentioned form and want help creating it, do not hesitate to contact us.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

5 Things We Must Not Forget When Creating a Website

5 Things We Must Not Forget When Creating a Website

Creating a website is a complex process that consists of several activities. From market research, through graphic design, web programming, text creation to the launch of the website. Read the following 5 things that are very important to us when creating a website and are always taken into account.

Keywords Analysis and Goal Setting

People type various terms into search engines to help them find what they are looking for. With keywords analysis, we can find phrases that are frequently searched for and are also related to your website’s content. This helps us find out which specific keywords visitors will be able to reach your website with.

Before creating a website, the most important thing is to define principles and values of the company, which will help to analyze keywords. It is necessary to focus on the company’s vision for the future and also on its story. Then, it is necessary to determine the company’s goals. Based on these factors, we will create a website for a quality variety of clients. 

Keywords analysis is an important priority for the success of your website, which then leads to search engine optimization.

Search Engine Optimization (SEO)

Thanks to SEO optimization, we can get your website among the top search results much easier. With the current level of search competition, the best possible search engine optimization is a must. 

For SEO optimization, we not only “tune” the texts on the website. It is a more complex process. What is important for optimization and what do we focus on?

  • Loading speed
  • website security
  • photo and product description; 
  • pictures; 
  • text optimization
  • correct headings, titles; 
  • SEO technical setting; 
  • and many more …

—> About poper creation of optimized website content, you can learn here: Proper creation of optimized website content

—> How to write articles for SEO, which we do, can be read here: SEO – How to write articles to be readable and optimized for search engines

Copywriting

The proper text writing on the website is the basis of the already mentioned search engine optimization and also of the web creation itself. Therefore, it is important to write texts that are not only interesting, but also gramatically correct with the use of appropricate keywords. Copywriting consists of preparation of texts in accordance with an analysis of your target audience and their optimization for search engines using keywords, the correct hierarchy of headings, etc.

You can read more about the essential elements of an article here: What essentials elements should be part of any article?

Website accessibility

Remember that it should be as easy as possible for the visitor to navigate through your page. Moreover, over 67 % of users browse the Internet on a mobile phone or a tablet today. If the visitor don’t find what they are looking for, the website is too complicated for them, various windows pop up on the website, or the website is overwhelmed by adds, they immediately leave and thus increase your website bounce rate, which also worsens SEO.

That’s why we create websites that always meet the necessary criteria. It is important to us to assure that your website is responsive and as accessible as possible to all visitors.

Accessible sites and the most common problems of websites were explained by our colleague Mishka here: An accessible website is suitable for everyone

How did we help with website accessibility? Read our case studies to find out:

—> Even a large school with a lot of activities can have a clear website

—> Accessible website for Primary and nursery School in Otnice

—> Website for Hrušovany Kindergarten on the Accessible School Theme

Marketing

If you want a really powerful website that delivers results, SEO optimization alone is not enough. When creating a website, you should consider how exactly you want to present it to your visitors. Will you write a blog? Will you offer various promotions or benefits? How do you want the reviews to be incorporated on your website? Based on your decisions and needs, we will adjust the website’s creating and design. After its launch, it is also important to invest in marketing, such as PPC campaigns or social media visibility, which we are also glad to help you with. 

You can read about how to properly prepare for marketing here: Prepare properly for marketing

If you want your website to be efficient and customer gaining, do not hesitate to contact us. We will be glad to help you. 

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

Serial Killer – Why You Want a website created on Sage?

Serial Killer – Why You Want a website created on Sage?

Our Zeni Team had an opportunity to be a part of the international festival of TV and web series – Serial Killer. We created wordpress theme for their new website which is based on Sage. In this article, you can take a peek into our creating process and learn all the benefits of a Sage.

What is Serial Killer?

Creators of all best new series from Central and Eastern Europe meet at this international competition festival of televison and web series every year. You‘ve probably already figured that this idea makes many fans excited. On huge screens, they can watch exclusive premieres that cannot be seen anywhere else. Furthermore, in the Focus section, the festival always focuses on a different country and introduces its work.

Creating a Website

Since the festival caught our attention, we decided to help create its website.

At the beggining the HTML structure was created by the graphic designer Martin Pecina. It was then necessary to divide it into smaller parts and build an entire website based on it.

We divided the page into following sections:

  • series;
  • panels;
  • videos;
  • speakers;
  • team members.

For each mentioned section, we identified which data will need to be filled in and added the possibility of editing the data in the administration. It was also necessary to fit the data into the prepared graphics design to make content come to life.

Which Functionalities Did We Create for Serial Killer?

Bulk download of photos from individual days from presskit

Our client wanted the possibility of downloading photos from individual days all together in a zip file as presskit. We prepared the functionality that zips all the images and then the user can download them.

Subscription section

The option to buy a subscription was also needed to be added tort he internal web section. We solved this using Woocommerce and Gravity Forms which ensures purchase process, login and also access restrictions on certain pages.

Archiving Previous Years

This is one of the new features. The client requsted the possibility to archive series, series sections, panels and speakers. Thus, these won‘t be displayed in standard sections anymore but the client is able to add them to desired pages.

So Why You Want a wordpress theme build on Sage?

  • The best tool for creating templates

It helps the programmer to keep their code clean and redable. Whether we’re talking about writing CSS with SASS, Blade templates, Javascript routing or Controllers, in which it is directly possible to specify a functionality for a specific template. It’s so much more fun to work with such a tool.

  • It includes Laravel blade templating

This helps us to create simple and clean templates. In addition, we also installed ACF Sage directives in order to make working with ACF field easier and simpler.

  • Because JavaScript routing

Sage already includes the functionality allowing us to split the JavaScript into files and then load it only on specific pages. This makes JavaScript cleaner and thewe dont have to worry about unwanted Javacript running.

Website Perfomance

Whether a reader stays on your site depends mainly on whether you can attract their attention as soon as possible or not. But how do you do that if loading of the site takes forever? That’s why performance, reliability and speed are very important for your website.

Sage on its own will not guarantee that these requirements will be met. However, a good programmer combined with such a good tool as Sage can work wonders. Maybe even do a magic trick or two. After all, performance and speed always depends on the programmer themself.

As with our other projects, we try to load only the necessary data and thus always achieve a fast loading website. For example, we removed unnecessary CSS and JS files, added lazyload of images and many more.

Would you also like to build your website with such a high-quality tool as Sage? Would you also like to enjoy the great performance and speed? Don’t hesitate to contact us. Leave us a message and we contact you as soon as possible.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

Seven reasons to use staging environment for your project on WordPress

Seven reasons to use staging environment for your project on WordPress

or seven ways to screw it without a staging.

0 What is Staging?

Staging or testing environment is a production-like environment where you can test new features in terms of integration testing and user acceptance testing. In other words, it is a 1:1 copy of your live site, where you can apply new things in the testing environment without screwing it up for your client and site visitors.

1 WordPress core updates

WordPress itself is under continuous development. Releases are divided into two groups: major and minor. Major releases (marked X.Y) are scheduled and you can beforehand read about what the new features will bring, whereas minor releases (marked X.Y.Z) are mostly about bug or security fixes and they come into usage more unexpectedly. Both types of releases can break something. There can be backwards compatibility of themes/plugins/your code, removing/upgrading of 3rd party libraries, or they can change Gutenberg blocks behavior etc. Are all plugins and theme you use ready for the new WP Core release? You can never make sure of this. In general, testing this on your live website is not the best idea.  Use staging!

2 Plugins and/or Themes updates

While WP Core major upgrades are pretty predictable and they have a solid schedule, this is rarely true with plugins and themes. This means that with a medium WP site (in terms of number of plugins), you will get a surprise upgrade at least once a week. Many paid plugins usually don’t have a transparent changelog, which makes predicting potential errors or clashes almost impossible. The only way to keep your live site stable is toalways upgrade on staging first”.

3 Place to test that awesome new plugin

Let’s implement that social media integration with this plugin! But sir, it seems like it made image uploads not working and last ten thousands of articles imported last night are missing featured images now. Another night fixing, great!. This would not have happened with testing this plugin on staging first.

Meme Production is down, another great night fixing

4 Place to test updates of a server stack

So your site is still running on PHP 5.6, right? Try PHP 7.4 and make it faster! So you upgraded PHP on your live site and now all you can see is a bunch of Fatal Error messages along with 2 hours of e-commerce site downtime in which your client lost a few thousand bucks. Good job, bro!Next time you will run that through staging first, promise?

5 Place to test your code

Will my code work well with code of other team members? Don’t forget, your “team” is not just inside your company, but also includes all developers who contributed to any part of the website (WP Core, plugins…).  You should always test your code locally before pushing it to any other environment, but you usually need the client, project manager and QA team to take a look. Or do you need to perform testing on real people? Perfect, here you got staging to make your life easier.

6 Experiment with CMS

“What if we move that widget from left panel to the footer and change its’ title?” Any bigger change in CMS should be first tested on staging. From experience, clients can quickly change their mind when they see their brilliant idea alive on the site. Are you using any kind of page builder for your frontend? Previews are powerful feature, but usually you need to see the whole picture including menus, plugin setting changes and so on. That’s where staging comes in very handy. Also you don’t want visitors to see that jumping widgets and menu items on production, do you?

7 Showroom for your Client

Bringing your laptop to the client’s office nowadays (considering both global market and pandemic) isn’t the best idea of showing your client that awesome new feature. Ever heard of wow-effect? Don’t do that, please. Show your client new features incrementally on your staging. You both will sleep much better, trust me!

Meme We found more bugs than our customers did

In the next article we will take a look on how to set up a staging environment.

If you are interested in your own quality website and need help, write to us and we will be happy to help you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

Case study: Accessible website for Primary and nursery School in Otnice.

Case study: Accessible website for Primary and nursery School in Otnice.

From September this year, all primary school websites must comply with the so-called accessibility rules. The point is to make the website usable and accessible for people with disabilities, such as the blind and partially sighted or deaf.

We have recently implemented our solution for schools based on the WordPress platform on www.zsotnice.cz, which is website of the primary and nursery school in Otnice.

For the existing pages, we have identified the following issues in terms of accessibility and simple user friendliness:

Complicated web navigation:

  • web contained 2 navigations (menus) that overlapped with content,
  • one of the menu had 3 levels.

Introductory carrousel(automatically rotating page content), which distracted from other information (this element is considered inaccessible content).Web complexity:

  • the entire content of the posts was listed in the list of posts, due to some posts the user had to scroll through several pages,
  • web contained pages that had no content (were not filled),
  • the site contained information that does not belong to the website – personal information, such as a list of students who paid for a ski course, etc.,
  • similar information was divided into several pages – the user had to click through the site unnecessarily before getting the required information.

Web opacity:

  • important information was on the web only in PDF files, not in a “plain text” form directly on the web, for example Clubs, Organization of the School Year, Meal Payments, Tuition Fees,
  • some links on the site were provided only by the URL of the link, it was not clear exactly what content the user would get to, for example important resources for choosing a profession,
  • menu items had several colors for no apparent purpose.

Inaccessible content:

  • cross references were missing,
  • the web menu was not controllable from the keyboard,
  • the site did not meet the requirement for contrasting colors,
  • small web font,
  • the website was not responsive – it was practically unusable on a mobile phone,
  • when browsing the web from the keyboard, it was not clear which link the user was on,
  • the download files were listed by file name, not content description.

So what did the new website from our production actually bring to the school in Otnice?

  1. Simplified web navigation – only 1 menu with 2 levels and an uniform color
  2. Simplification of the website: 
  • pages with similar content are merged into one,
  • maximum information embedded on the web directly in the texts,
  • informations on the web are always in one place – better searchable and are better maintained,
  • blank pages removed.
  1. Web acceleration.
  2. Responsive website.
  3. Contacts to the school directly in the header and footer of each page.
  4. Easy embedding of content on the web.
  5. The website complies with the accessibility rules.

We were happy that we helped to solve the requirements of accessibility for the website of the Primary and nursery School in Otnice. We thank the school management for their cooperation and we wish that their new website www.zsotnice.cz will satisfy the school, parents and students. 

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.