I have faced this error umpteen times and have always struggled to get rid of it. Hence I present you the solutions through this article. There is no necessity to panic!
This error message “Error establishing a database connection” looks pretty serious.
Understanding of the problem
WordPress uses two main technologies: PHP and MySQL.
PHP is a programming language. WordPress core files are written on it.
MySQL is a database management system (DBMS). WordPress uses a MySQL database to store site content: posts, pages, and site title, widget layout, etc.
The error discussed in this article occurs when WordPress cannot access information in the database using PHP commands. When this happens, WordPress displays the message “Error connecting to database”.
Several reasons this error occurs:
Invalid login credentials. If the password has changed, WordPress will not be able to receive information from the database.
Corrupted WordPress files. This can occur when updating plugins, themes, and WordPress itself.
Corrupted database. For example, if a malicious plugin damaged the database from the inside. And also due to a hacker attack, a failure in the topic, etc.
The database server is down.
A large amount of traffic. Because of this, the database cannot respond to queries. For example, if one of your posts has become “viral”, and at the same time, many users are trying to access your site.
How to fix the “error establishing a database connection” error
First I recommend a way that will quickly solve the problem. Then I will dig deeper.
Step 1: Contact Your Hosting Provider
If your site worked a minute ago, and now it is unavailable, then an error may occur on the hosting side. Quality hosting offers quick chat support.
In it, tell us that you had the error “Error establishing a database connection” and ask:
whether the database server is running;
whether there are jumps in activity or traffic on the server now.
Hosting support will inform you whether your database is in order and whether there are suspicious actions on the server.
If the problem is not on the server-side, go to step 2.
Step 2: Check if plugin files or topics have been corrupted
For example, maybe you updated the plugin or theme, and everything crashed. Or connected the site to an external service, edited the files manually. If you did not, skip this step.
What can be done:
Connect to the hosting via FTP. You can do this with the free FileZilla tool.
To connect, you must enter the username and password for your FTP account. The easiest way to get them is to look for the first emails you received from the provider. And also request them from the host’s support service.
Then connect to the server and go to the root folder of WordPress. Usually it is called “public_html” or “www”.
If you see in front of you subfolders like “wp-content” and “wp-admin”, then you are at the root of WordPress. Example: Go to the wp-content folder and rename the plugins folder. Set any other name to the plugins folder.
Return to the site and check if the problem is resolved.
If the error is resolved, now you know that it was caused by some kind of plugin. Go back to the server, rename the folder back to “plugins”. Go into it and change the folder names of individual plugins. The easiest way to do this is to add an underscore at the end of the name: “_”
Continue until you find out when the error occurs and when not. Once you narrow your search to one specific plugin, delete it or find a solution to the problem on the Internet.
If the error persists after renaming the plugins folder, perform the same process for the themes folder.
If this does not help, rename both folders back to “plugins” and “themes”. The error is related to something else.
Step 3: Check if the database has been corrupted
Go to your WordPress dashboard – YOURSITE.com/wp-admin
If you see the same error: “error establishing a database connection”, skip the step.
Pay attention to what WordPress offers you to do. One of the options:
If you see a message starting with “ One or more database tables are unavailable […]”. This means that you need to “repair” the database.
First, connect to the site via FTP. Go to the root directory of WordPress and upload the “wp-config.php” file to your computer.
Open it in a text editor and a line at the end (right before “ That’s all, stop editing” ):
Now upload the file back to the site (via FTP). Go to YOURSITE.com/wp-admin/maint/repair.php
Here is what you should see:
Press any of the buttons. After the automatic recovery is complete, return to the site and see if the error is fixed.
If there is no error, great! But you still need to return the “wp-config.php” file to its previous state. Delete the line you added and reload the file.
If the error persists, continue to the next step.
Step 4. Verify the database connection credentials.
If the password and login from the database have changed, the error “error establishing a database connection” is raised! Its correction is performed in the wp-config.php file. I am talking about these lines:
They contain all the information WordPress needs to connect to the database. If something in it is incorrect, the connection will not be established.
Copy the above lines, paste into the chat window and ask the hosting support service if the data for connecting to your database is correct. If not, the specialist will provide the correct values for authorization.
Copy the new credentials and put them in the wp-config.php file.
Step 5: Recover WordPress Files
WordPress core files can be corrupted for a number of reasons. But you can restore the default WordPress files. The easiest way to do this is to download a clean version of the engine from WordPress.org and install it on top of the one you have.
Follow this link and download the latest version of WordPress. Unzip the archive and delete the wp-content folder from it.
Next, connect to your site via FTP, go to the root of WordPress, upload new CMS files. Overwrite existing files.
When the download is complete, return to your site and check the result. If this does not help, contact the hosting support service again. Tell them about everything you have done and ask for help.
How to avoid this error in the future?
There is no ideal way to protect the site from database connection errors. But the likelihood of these problems can be minimized by adhering to some rules:
Only work with hosts that have optimized their servers for working with WordPress. Thanks to this, you can always count on qualified help support.
Install a simple backup plugin such as UpdraftPlus. Thanks to it, you will always have a working backup of WordPress.
Three out of four WordPress sites are vulnerable to various attacks.
Here are some tips for troubleshooting security issues.
Tip # 1: Two-Factor Authentication
An effective method of protecting WordPress from brute force attacks is to use two-factor authentication. It provides an additional level of security when entering the system.
When authorizing in the administration panel, in addition to the login and password, you will need to enter a one-time password sent in SMS. Several specialized plugins are available to implement this feature: Duo Two-factor authentication and Google Authenticator.
Tip # 2: Strong Password
Use a strong password of at least 10 characters. Its meaning should be a combination of lowercase letters, uppercase letters, numbers and special characters.
Passwords should be hard to guess and should be changed regularly. It is advisable to use different passwords for different sites. You can use services such as the Strong Password Generator to get them.
Tip # 3: Limit the number of login attempts
If you reduce the number of login attempts over a certain period of time, you can protect WordPress from brute force attacks.
There are plugins that implement this mechanism. They block users IP addresses that exceed the threshold of failed login attempts.
Tip # 4: Choose a Good Hosting Provider
Choose a good hosting provider that specializes in WordPress and provides a firewall, malware scanning, current versions of PHP and MySQL.
Tip # 5: Scheduled backups
Use scheduled site backups. If something goes wrong, you can always recover lost data. Plugins Vaultpress, Backup Buddy allow you to regularly create backups and perform a system recovery.
Tip # 6: Change the admin username
Do not use the word “admin” as the administrator login. Hackers primarily use this username to infiltrate the site. If you already have a WordPress site that uses the admin login, create a new user and give him administrator privileges. Then delete the admin account from WordPress. You can also change the administrator username using specialized plugins.
Tip # 7: Keep WordPress Up To Date
Update your WordPress system every time a new version is released. Running an outdated version of WordPress makes the site vulnerable.
Hackers are aware of the security issues of legacy versions of WordPress and can use them to hack a site.
Tip # 8: Update Plugins and Themes
Plugins and themes are also susceptible to attacks, so they need to be updated regularly.
You can easily identify plugins that require updating by looking at the corresponding section of the administration panel.
Tip # 9: Remove Unused Plugins
Inactive plugins on a WordPress site are also vulnerable. First of all, due to the fact that you can ignore their updates. Therefore, it is recommended to remove plugins that you are not using. Please note that simply deactivating the plugin is not enough.
Tip # 10: Monitoring WordPress Files
Use specialized security plugins such as Shield. They will let you track changes in WordPress files. These plugins are a complete security solution.
In this article, we looked at just a few strategies that you can use to enhance WordPress security. WordPress protection is a component of the site that you need to constantly work on.
In this article, we’ll show you how to track scrolling in WordPress using Google Analytics
Why track user scrolling in WordPress?
Scrolling means scrolling down a web page. Tracking scrolling depth is an important indicator of user engagement. It will provide information on how users interact with site elements to view content.
For example, using tracking scrolling, you can find out the depth of viewing content, what kind of long materials users like, etc.
1. Tracking scrolling depth using Google Analytics
Google Analytics is a free web analytics service from Google that allows you to better understand site visitors. By default, Google Analytics monitors the total number of page views, the number of visitors, top pages, and others.
For advanced metrics such as scrolling depth, contact forms, file downloads, event tracking, Google Analytics requires user tracking settings.
But this is a rather complicated process. Fortunately, there are WordPress plugins that let you track advanced Google Analytics metrics like scrolling depth.
Track WordPress Scrolling Depths with MonsterInsights
MonsterInsights makes it easy to install and use Google Analytics on a WordPress site without the need for source code.
The MonsterInsights plugin launches the following Google Analytics metrics in one click: e-commerce tracking, file downloads, affiliate links, contact forms, scrolling depth and many others. Scrolling depth tracking is activated by default in the plugin.
Activate and install the plugin. After that, go to the Insights »Preferences page and select the Engagement tab. Scrolling tracking is enabled by default.
The MonsterInsights plugin fires events in Google Analytics when site visitors scroll down the page. Then Google Analytics tracks 25%, 50%, 75% and 100% scroll.
In the WordPress admin dashboard, you can view scrolling statistics ( Insights »Reports» Publishers). View depth information is displayed next to the Interests section.
Average Scrolling Depth
Scrolling depth information can be used to optimize pages for maximum conversion.
View scrolling data in Google Analytics
Once the tracking has been configured in the MonsterInsights plugin, scrolling reports will start showing up in Google Analytics.
In Google Analytics, go to the ” Real-time Report” – “Events” section to view scrolling information for the last 30 minutes.
For complete information, go to the tab “ Behavior” – “Events” – “Overview”.
To view detailed information, click on the “Scrolling Depth” link.
For more detailed information, use the Google Analytics “Advanced Options” function, a link to which is located next to the “Scrolling Depth” event. Here you can see the scrolling data for each individual page.
2. Tracking scrolling using the WP Scroll Depth plugin
If you do not need a comprehensive solution for Google Analytics, you can use the WP Scroll Depth plugin.
After activating the plugin, go to the ” Settings” – “Scrolling Depth” section to configure tracking parameters.
By default, the depth of scrolling will be tracked on all pages of the site. For this, WP Scroll Depth uses jQuery.
This plugin controls four scrolling points: 25%, 50%, 75% and 100% of the page height. When the user reaches the scrolling point, the plugin sends the event to Google Analytics using jQuery.
After that, you can view data about the “Scrolling Depth” event on the “ Real-time Report” – “Event” tab in the Google Analytics toolbar.
What is lazy loading & why is it required for any website?
In this article, I will tell you how lazy loading works and how it can improve site performance. As well as how to implement lazy loading in WordPress.
Lazy loading is a way to increase the page display speed by delaying the loading of non-critical resources that are located below the visible area of the browser window. Such resources include images that we do not see yet. Images are ideal for lazy loading, as they are resource-intensive. Videos, scripts and comments can also be left for later.
With lazy loading, resources are not loaded until they are needed. And if the user does not scroll the web page to the end, they will not be displayed on the page at all.
Why is lazy loading better?
Lazy loading images in WordPress improves website performance, SEO and user experience. It reduces the weight of the start page and loads its elements as needed.
In this case, the browser first creates the DOM so that the user can start interacting with the site, even if the web page has not yet been fully loaded.
With lazy loading, image files and a web page are not reduced. If the page’s “weight” is 3 MB, then it will remain that way with or without lazy loading.
At Google, page loading speed is a ranking factor. Therefore, the search engine recommends using lazy image loading to improve performance.
And lazy loading reduces the amount of data transferred. Visitors with a slow internet connection will be grateful to you for this.
How does lazy loading work?
First of all, you need to determine which images should be postponed. This is the graphic content that is not currently visible to the user. And also the one whose absence will not affect the structure of the web page.
For example, the logo image used in the header of the site or in banners above the main text should not be downloaded using lazy loading.
In addition, you need to “lazily” upload images that are 500 pixels lower from the viewing area so that they can fully load before the user reaches them.
Disable regular image upload – If you are using lazy loading on a site, you must prevent downloading in the usual way. One way to do this for <img> tags is to remove the image URL from the src attribute and move that address to the data-src attribute for temporary storage.
Determine how the browser will detect images in the viewport – You need to determine how the browser will find images in the viewing area. You can use the Javascript event handler or the Intersection Observer API to do this.
Javascript event handler – Using JavaScript event handlers scroll, resize, and orientation change is an ideal way to determine if an element has reached the viewport. Since this approach is compatible with all browsers. But you also need to implement element visibility identification using getBoundingClientRect. This may cause a slight delay in rendering images. An example can be seen here.
Intersection Observer API – The Intersection Observer API is the most efficient way for browsers to determine when an image has entered the viewing area. This approach is faster than using event handlers. To implement it, register an observer to view the elements and set the browser action when the image enters the viewport area. Intersection Observer API has good browser support but has not yet received widespread distribution. Therefore, you need to use Javascript event handlers as a fallback for incompatible browsers.
Move image URL to the src attribute – Once the browser detects that the image has appeared, it will need to insert the URL into the src or srcset attribute to load and display the image. After that, you need to remove the classes added to the image to help Javascript identify it. Then remove the observer.
How to use lazy loading in WordPress
You can add lazy uploads to your WordPress site using plugins or Javascript. Both options give similar results.
Option 1: Use JavaScript to delay loading hidden images in WordPress
The best way to do this is to create a plugin for your JavaScript code. There are two examples on this page. One shows how to use event handlers, and the other shows how to use the Intersection Observer API.
Option 2: Using the JavaScript Lazy Loading Library
If you want to use the JavaScript library, there are many options:
react-lazyload – React deferred loading library, does not use Intersection Observer.
js – uses only Intersection Observer, a super lightweight.
blazy is also lightweight but does not use the Intersection Observer.
js – uses Intersection Observer and event handlers.
lazysizes – suitable for lazy loading of videos and frames.
You can also use jQuery since this library is already contained in the core of WordPress.
Option 3. Using the lazy loading plugin
The easiest way to add lazy uploads to your website is to use a specialized WordPress plugin. Most paid image optimization plugins (e.g. Smush Pro) have built-in lazy loading functionality. It is also available for free on WordPress.org.
The process of activating lazy loading in the Smush plugin extremely simple. All you need to do is go to the ” Lazy Download ” section of the Smush Pro plugin and click the ” Activate ” button.
What you need to know when using lazy loading for images
Lazy loading does not add extra weight to the site. But if implemented incorrectly, it can prevent search engines from crawling the site.
Keep in mind that the folding line (above the fold line) of a web page varies depending on the user device.
Use the placeholder attribute instead of leaving the src attribute empty. And specify the height and width of the image so that the content does not move when it is downloaded.
Use the <noscript> markup to indicate what action should happen if the visitor has JavaScript disabled.
Conclusion
Delayed loading is an efficient and easy way to improve site performance. This method will work for all images specified in the <img> tag.
If you need to lazily load background images in CSS, then you should use a similar method designed to target images. You will also need to use CSS selectors.
Have you already used lazy loading on your site? Did it boost site performance in Google Pagespeed Insights? Write to us, we are happy to help speed up your website.
In this article, we will look at how the Speed Index is calculated. As well as how to measure it in a Chrome browser.
What is Lighthouse Speed Index?
Lighthouse is an open-source tool that Google PageSpeed Insights uses to analyze the loading speed of a web page.
Lighthouse evaluates a webpage by the following criteria:
Source Security.
Accessibility of the page for users.
Site availability for users with an unreliable internet connection.
User assessment of the speed of the site.
The speed index is one of the indicators for assessing the speed of a site. It reflects the performance of the site in real conditions.
How Google measures the speed index
The official Lighthouse Speed Index defines Speed Index as a metric of web page load performance. It shows how quickly the contents of a web page are displayed visually.
In April 2012, WebPagetest.org and Google introduced the Speed Index metric. The search engine described in detail how the speed index is calculated.
Here’s how it works: when you check a web page using Google PageSpeed Insights, the Lighthouse service records the video of the page loading. The speed index value will vary depending on the viewing area that you set for the test.
Lighthouse breaks the video into frames: 10 frames per second. For example, if your site loads in 3 seconds, you will get 20 frames demonstrating the loading process.
To determine how complete the page is loading, Lighthouse compares each frame with the final one. He then puts the completeness of the page load on the Y-axis and the duration of the load on the X to determine the average. The total score is the sum of the individual intervals. The area of the graph highlighted in blue represents the speed index.
Also, the Visual Progress method from Paint is used to determine the speed index. It is used to determine the index in browsers created based on the WebKit engine. It does not use video upload recording. The metric is calculated based on the timeline data on the drawing events. Not all browsers support this method, so it is not so widespread.
How to measure speed index in Google Chrome
To do this, press the key combination Ctrl + Shift + i. Then go to the “Audits” tab, select the “Performance” checkbox and click on the “Run Audits” button.
What indicator of the speed index should you strive for?
We measured web page speed index. But which result is good?
According to Paul Irish of the Google Chrome development team, the ideal speed index should be less than 1000 ms, which is equivalent to 1 second. It turns out that it is necessary to achieve the lowest possible estimate of the speed index.
How to improve speed index in WordPress?
WordPress Speed Index can be improved as follows:
Optimize content.
Optimize the critical rendering path.
To improve the perception of content, you can use various techniques of progressive loading.
If this does not increase conversion, get rid of it.
The most effective way to improve site performance is to remove unnecessary resources. For example, unused images, JavaScript, CSS files, etc.
To find out how higher loading speed affects site profitability, take the test for PageSpeed mobile platforms. On the results page, go to the “Evaluate the impact of a faster site” section. A built-in calculator will show how higher the site speed can increase annual revenue.
Use specific block heights and placeholder images
To quickly provide the user with an important piece of content, leave space on the page for items that take a long time to load (images and videos). To do this, use CSS to set the blocks to a specific height or preload the placeholder images.
Optimize Images
The best way to reduce the weight of a web page is to get rid of excess images. And after that, optimize the remaining graphic content with the following methods:
Apply delayed image loading after the first screen appears
Using more efficient image formats.
Resize images that are too large for their container.
Image Compression
Optimize style sheets, scripts and fonts
The CSS and JavaScript files that are connected at the top of the layout of the web page slow down it’s loading. Therefore, they should be optimized.
In addition, each font is a resource for which the browser takes extra time to download. By default, font loading does not start until the DOM and CSSOM models are created. Which can also lead to a delay in rendering text.
Ways to optimize additional web page resources:
Removal. For example, reduce the number of font options available.
Do not upload one large javascript file. Use code separators to split the file and load scripts that are not important for DOM rendering at the bottom of the web page.
Compress your files so that they load faster.
Optimize your critical rendering path
The critical rendering path is a list of resources that the browser needs to display the answer to the user’s current question.
You need to analyze the components in the critical rendering path and look for ways to optimize the load. Here’s what Google recommends about this :
Analyze the elements of the critical path.
Minimize the number of important resources. Postpone loading minor items.
Download all important resources as quickly as possible to reduce the critical path length.
Use caching
Using HTTP caching, the browser saves a copy of the resources downloaded by the user via HTTP. This allows you to retrieve them without re-accessing the server.
You should also use an intermediate cache. For example, a content delivery network (CDN) cache is ideal for loading resources from a data centre closest to a user.
Speed Index Limitations
If your site has dynamic elements, the speed index measurements will be inaccurate. Below are the elements that affect the speed indicator:
Autoplay video.
Carousels.
GIF files.
The speed index, when used in conjunction with other Google PageSpeed Insights metrics, gives you a complete understanding of how to optimize your site.
How to Improve Speed Index with WordPress Plugin
wpmudev has developed the Hummingbird plugin to help you increase your speed index. It also allows you to improve the user experience for visitors to your site.
A widget is a component that adds certain functions to a site. Widgets are embedded directly on the site. To add a widget to a resource, you need to copy and paste the code provided by the developer.
Why do websites need widgets?
Sites can work without widgets, but they are needed to add additional functionality to the site.
Site builders and CMS provide limited options. Widgets can compensate for the disadvantages of these platforms.
I have compiled a list of the top 10 widgets that will make your WordPress website more functional:
1. Reservio
Reservio is a widget for online recording. Adding a Reservio reservation button to a website is much easier than making appointments by phone.
Reservio syncs with programs such as Outlook, iCal, and Google Calendar. The widget is also compatible with the popular website and CMS designers: Wix, Webnode, Weebly and WordPress.
2. Smartsupp
Smartsupp is designed to add online chat to the site. It is ideal for those who run an online store. The widget allows customers to quickly contact you on any matter of interest to them.
Adding personalized communication methods to your site will increase your conversion rates in the long run. Online chat increases the average cost of an order by 10% and conversion by 40%.
3. Disqus
Disqus expands the possibilities of commenting on publications on the site. It also provides additional tools for monitoring and responding to comments.
4. AddThis
To promote the site you need to use effective ways to attract users. For example, involve registered users of the site. Encourage them to share your content with friends, family, colleagues and acquaintances on social networks.
The AddThis widget makes this easy. He adds the “Share” button to the site, with which you can connect more than 200 social media. All buttons are optimized for mobile devices.
Available options for customizing buttons:
Change the appearance of buttons.
Resize buttons.
Placement of icons as a string.
5. Survio
Using the Survio widget, you can create a new survey in just a few minutes and integrate it into your site. This is an effective way to get additional information from site visitors.
This widget provides hundreds of survey templates to choose from. Here are just a few of them:
Brand recognition.
Purchase experience.
Technical support.
Event planning.
Bank customer survey.
Hotel guests.
Customer service delivery.
6. MailChimp
If you use the MailChimp service for electronic newsletters, be sure to install the registration form widget from MailChimp on the site. To do this, just copy and paste the form code in the desired dream HTML site markup.
MailChimp offers four kinds of forms:
Classical
Abbreviated.
Horizontal
No style.
The widget is compatible with platforms such as WordPress, Jimdo, Webs, Weebly, Yola, Blogger and Blogspot.
7. GetResponse
GetResponse is another popular email marketing service. But besides this, it provides a standard widget for posting a subscription form on the site.
In addition, GetResponse provides a feedback widget that you can use to create custom contact forms. As well as a widget for conducting various surveys. For instance:
Surveys when refusing a purchase.
Customer Satisfaction Survey
Surveys for market research.
This widget can integrate with MailChimp, Mailer and HubSpot.
8. Gumroad
Gumroad was created specifically for those who use their website to sell digital goods or services.
Installing it is very simple. All I did was type “Buy on Quick Sprout” in the form field and the button automatically changed. Then you need to decide.
After that, the widget code is automatically generated based on the settings used. It will need to be copied and pasted onto your website.
Payment processing using this widget will cost 3.5% + 0.30 US dollars per transaction.
9. Swiftype
How can site visitors find the right content or product? This problem can be solved by adding the Swiftype search bar widget to the site. It is used by companies such as CBS, AOL, BMW, AT&T and Samsung.
The principle of operation of this widget is extremely simple. After specifying the website address, Swiftype will index all its content and create a search engine.
This widget has an autocomplete function as the user enters his search query. Also, this widget adjusts the search depending on the price, location, date or type of content.
10. Wufoo
Wufoo is a widget for creating surveys, invitations, contact forms, a registration form and providing payment information.
All you need to do is create a form using a special form designer and paste it into your website. After the user completes the form, Wufoo will notify you by email or text message.
Over 400 form templates are available. You can also set custom parameters and create dynamic visualizations using charts and graphs.
Conclusion
You can significantly improve your site by adding this or that widget.
There are a large number of widgets. But the ones listed above are distinguished by the flexibility of installation, ease of installation and wide functionality.
I am sure that in the above list there is a useful widget for everyone.
