DEV Community: Darius Grigorjevas

Web Hosting. What Features You Would Add?

Darius Grigorjevas — Thu, 12 Mar 2020 14:41:07 +0000

What features have you missed and think that would be a nice addition to a web hosting that you use?

Let's talk about this in the comments!

Your favorite underrated CSS properties

Darius Grigorjevas — Tue, 10 Mar 2020 09:08:29 +0000

We all know that CSS has many underrated properties that tend to be forgotten over time, despite being useful. For example, clip, font-stretch, or text-shadow are a few of my favorite properties that are used less.

Also, I would like to mention scroll appearance properties. Even though being only a small detail, a nice scrollbar can positively enhance the overall look of your web application!

What are some of your favorite not so popular CSS properties?

How To Solve?: "ECONNREFUSED - connection refused by server"

Darius Grigorjevas — Fri, 06 Mar 2020 13:30:44 +0000

Chances are that while you've been using FileZilla you've also come across the ECONNREFUSED - connection refused by a server error. If that's the case - great that you've found this tutorial! I am going to show you three methods that might help you with resolving this FTP error.

First Method. Changing FileZilla's Default Port Value

The error could appear due to using the incorrect port while connecting through FileZilla. In this situation, you just need to change the default FTP port to the default SFTP port number. Simply change 21 to 22 on the "Port" input box.

Second Method. Disabling Anti-Virus/Firewall

Sometimes this error can occur when anti-virus software and/or firewall is refusing FileZilla's tries to make a connection.

In the event where anti-virus or firewall is causing ECONNREFUSED, what you need to do is simple. What you need to do: disable anti-virus and firewall and try to connect again. Firstly I'll show you how to do this on macOS :

Click the "Apple" icon on the top menu bar. Navigate to "System Preferences".
Find the "Security & Privacy" settings.

Go to the "Firewall" tab and select "Turn Off Firewall".

If you're using Windows, follow these steps:

Hit the "Windows" key and type in "Control Panel".
Then go to "System and Security" and find "Windows Defender Firewall".

Locate "Turn Windows Defender Firewall on or off" selection on the sidebar on the left.

Alter the options to switch off Windows Defender Firewall for public and private networks, in the following window and click "Ok".

For a thorough explanation of how to deactivate various anti-virus software, take a look at this post.

If turning off the anti-virus or firewall doesn't help and you still get the ECONNREFUSED - connection refused by the server error - try the following method.

Third Method. Altering FileZilla's Network Configuration Wizard

What should you do if the previous solutions don't bring the desired result? To fix the error, you can try altering FileZilla's network configurations:

Connect to FileZilla FTP client, then go to "Edit" and then to "Network Configuration Wizard".

When "Firewall and router configuration wizard" window appears, click "Next" to continue.
As the Default transfer mode select "Passive (recommended)". Also, tick "Allow fallback to another transfer mode on failure" selection.

Choose "Use server's external IP address instead".
Select the "Get the external IP address from the following URL". Enter the default value in case the input field is empty and continue (default value is http://ip.filezilla-project.org/ip.php).
Do not adjust the port range configuration and then choose the "Ask operating system for a port".

At this point, you need to ensure that you've made correct configurations. Hit the "Test" button to let FileZilla try to make a connection to probe.filezilla-project.org and it will perform some simple benchmarks.

If the test goes without any failures, attempt to connect to your hosting account once more. It should work perfectly well. In case the "ECONNREFUSED" error repeats itself, you should try reaching out to your hosting customer support to get some help.

To Conclude

There you go - three methods of fixing ECONNREFUSED - connection refused by server error. Hopefully, one of these three methods will help you to fix this FileZilla error! If you have questions or more solutions for this error, do not hesitate to leave a comment!

Eliminating Render-Blocking JavaScript and CSS on WordPress

Darius Grigorjevas — Fri, 28 Feb 2020 15:33:37 +0000

Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that - optimizing your website’s loading speed. Let’s say you’re using this tool and get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning. No need to worry! In this tutorial, I will show you how to address the issue.

Understanding “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Warning

While reading Google’s PageSpeed rules, you can see that “Eliminate render-blocking JavaScript and CSS” is one of the rules. Failing to do this will affect your website’s loading speed - slow it down. Now you’re probably wondering how can JavaScript and CSS make your website slower?

To put it simply, whenever you set up a new plugin or theme, they will enrich the front-end with new JavaScript and CSS code. Therefore browsers may take longer to load the webpage.

ATF (Above The Fold) is the part of your website that is visible after the first load. Any other part - anything you see after scrolling down is BTF (Below The Fold).

This warning gets pretty clear now doesn’t it? If any irrelevant JavaScript and CSS are rendered when someone visits your website, you might receive a warning to decrease the range of render-blocking JavaScript and CSS in above-the-fold content.

Discovering Render-Blocking JavaScript and CSS Using Google PageSpeed Insights

To fix render-blocking, you should first test your website’s speed with PageSpeed Insights:

Go to the page, paste your website’s URL address in the “Enter a web page URL” field.
Hit Analyze to get the results.
Since most websites score around 50 to 70, this should help you measure your score. Also, Google will list recommendations to improve the performance of your site.

If you happen to discover the recommendation to remove render-blocking JavaScript and CSS in above-the-fold content, then I’d suggest you settle the issue.

Remember that your site doesn’t have to reach the maximum score, which is 100. Your goal is to try to receive a nice score without sacrificing UX.

Also, understand that you shouldn’t remove any scripts that are crucial for quality UX only to get a bit higher score on PageSpeed Insights.

The rules on which Google evaluates your site are only directions to consider for improving your website. In the end: use your own judgment!

Solving the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Error

It is really easy to diminish render-blocking JavaScript and CSS resources on WordPress websites. There are my three plugin recommendations that would help you fix the error:

W3 Total Cache

One of my favorite plugins: W3 Total Cache. After you’ve finished installing and activating it follow these actions on your WordPress admin dashboard:

Performance -> General Settings.
Look for the Minify heading and you’ll see some choices below the heading.
Check the “Enable” box for Minify. After that choose “Manual” for the Minify mode.
Click the “Save all settings” button.
Retrieve all render-blocking JavaScript and CSS scripts. Google PageSpeed Insights will assist you in finding them.
After finding the rogue script, find your way back to Performance -> Minify.
Locate the JS intersects. Select the embed type Non-blocking using “defer” for the Before <head> tag in the Operations in areas section.
Select your website’s active theme and push the “Add Script” button in the JS file management section. Copy the JavaScript URLs from the PageSpeed Insights and paste it on the provided fields.
Down below you’ll find the CSS segment. Now find the “CSS file management” part. Select your website's current theme and hit Add a style sheet. Like in the previous step, copy and paste the CSS stylesheets URLs from the Google PageSpeed Insights to the required fields.
Lastly, hit the “Save Settings & Purge Caches”.

Autoptimize

Another option would be using the plugin called Autoptimize might also help in solving the render-blocking JavaScript and CSS error. Implement these actions on your dashboard after installing and activating the plugin:

Visit Settings -> Autoptimize.
In the JavaScript and CSS Options sections individually tick the “Optimize JavaScript Code?” and “Optimize CSS Code?”.
Hit “Save Changes and Empty Cache”.

To guarantee that the matter has been fixed, check your website on Google PageSpeed Insights once more. If the warning doesn’t appear, that’s great - you can move on! Otherwise, let’s try adding some additional optimizations:

Navigate to Settings -> Autoptimize.
Click the “Show Advanced Settings”.
Once there, find and tick both the “Also aggregate inline JS” and “Also aggregate inline CSS” selections.
Save your adjustments.

Speed Booster Pack

Last but not least - Speed Booster Pack. This plugin also may be effective in getting rid of render-blocking JavaScript and CSS error on your website. In order to do this with the mentioned plugin, you should follow these actions:

Navigate to the Speed Booster Pack segment and enter the Advanced tab.
Find the JavaScript Optimization menu, activate Move scripts to the footer and Defer parsing of Javascript files.
Find the CSS Optimization menu down below and enable the CSS render-blocking optimization.
You will also see the extra options like Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS into the footer. You can do some tests with these settings to reach appropriate results.
By activating all of these settings, you will make your website load faster, although it could present an instance called FOUC (Flash Of Unstyled Content). To explain it shortly - it’s an occurrence when a website appears briefly with the browser’s default styles prior to loading an external CSS stylesheet due to the web browser engine rendering the page before all information is retrieved.

Once you’ve tried the mentioned methods, try to run your website through Google PageSpeed Insights again to make sure that the render-blocking problem is solved.

Conclusion

Since search engines consider websites’ loading times when ranking results, it is one of the major elements in captivating and keeping visitors.

Google’s PageSpeed Insights gives the website a rating based on its loading speed. In a case where you’re testing your WordPress website and receiving the notorious “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning, you can efficiently resolve the problem with mentioned plugins!

Progressive JPEG images: What Is It and How It Can Improve Website Performance

Darius Grigorjevas — Wed, 15 Jan 2020 18:28:58 +0000

A progressive JPEG image is encoded differently than a standard or baseline JPEG image. It loads in successive waves until a clear picture is formed. This can improve a website’s performance as the images seems to be loading faster.

The Difference Between Baseline JPEG and Progressive JPEG

Baseline JPEG and progressive JPEG differs in the way it compresses and displays images — especially if you have a slow internet connection
The standard JPEG format loads images one line at a time, from top to bottom, and each line is already pixel perfect. Hence, it can take a while for the picture to load fully.

As for progressive JPEG, the image appears all at once as a whole, but it’ll be blurry and pixelated a first. Gradually, you will see a clear and fully loaded image.

Benefits of Progressive JPEG

On a website, progressive JPEG can improve user experience. Although blurry, visitors can already see the entire image at first sight. Plus, generally being smaller in size, progressive JPEG can also reduce resource usages like bandwidth and disk space — helping your website to load faster.
Most popular browsers, like Firefox and Chrome, also support progressive images. But if you use an older version of Internet Explorer (before Windows 7), make sure to install the latest update to enable the feature.

How to Use Progressive JPEG Images?

Here are the steps to optimize your website with progressive JPEG images:

Step 1: Analyze JPEG Images

To check what type of JPEG images your website displays, you can do a simple analysis with WebPageTest:

Paste your site’s URL to the Enter a Website URL box and press Start Test.
Once the test runs are complete, go to the Test Results page, then select the Performance Review tab. Scroll down until you find Use Progressive JPEGs.

The results will show “FAILED” for Baseline JPEG images, as shown below:

You will then have to convert them to progressive JPEGs.

Step 2: Convert Images to Progressive JPEG

There are free software and tools that can do the job. My recommendations are:

Optimizilla

Other than converting baseline JPEG images to progressive ones, you can also reduce the image size with this tool. It uses the lossy compression technique. Simply go to Optimizila and upload your image — up to 20 images in one session. You can then set the image quality before downloading, but make sure to keep it at 85 or above for better quality.

Once processed, your image will be both progressive and smaller in size.

RIOT

RIOT is free software that has a lot of features when it comes to image optimization. From creating progressive images, adjusting colors, and adding metadata information, everything can be done through its simple interface. You can also convert your image into three different formats — JPEG, GIF, and PNG. What’s more, you can see the changes directly, side by side. However, keep in mind that this tool is only available for Windows.

Step 3: Replace Old Images

After converting, you’ll need to update the images within your site. You can access your hosting’s File Manager or use an FTP client to locate the existing baseline images. Remove and replace them with the progressive JPEG images.
To avoid technical issues, make sure to use the same file name for every image. Now, test your website again using WebPageTest. If you do the process correctly, you won’t find any baseline JPEG images in the performance result.

Conclusion

If you want the images on your website to load faster, it’s better to change them into progressive JPEG format. It works by loading images in successive waves. You’ll see a blurry or pixelated picture at first, but it’ll clear out.
To see if your website contains baseline JPEG images, you can use the WebPageTest tool. If it does, you can convert them to the progressive format using either Optimizilla or RIOT.