One place for hosting & domains

      Optimize

      How To Set Up a Remote Database to Optimize Site Performance with MySQL on Ubuntu 18.04


      Introduction

      As your application or website grows, there may come a point where you’ve outgrown your current server setup. If you are hosting your web server and database backend on the same machine, it may be a good idea to separate these two functions so that each can operate on its own hardware and share the load of responding to your visitors’ requests.

      In this guide, we’ll go over how to configure a remote MySQL database server that your web application can connect to. We will use WordPress as an example in order to have something to work with, but the technique is widely applicable to any application backed by MySQL.

      Prerequisites

      Before beginning this tutorial, you will need:

      • Two Ubuntu 18.04 servers. Each should have a non-root user with sudo privileges and a UFW firewall enabled, as described in our Initial Server Setup with Ubuntu 18.04 tutorial. One of these servers will host your MySQL backend, and throughout this guide we will refer to it as the database server. The other will connect to your database server remotely and act as your web server; likewise, we will refer to it as the web server over the course of this guide.
      • Nginx and PHP installed on your web server. Our tutorial How To Install Linux, Nginx, MySQL, PHP (LEMP stack) in Ubuntu 18.04 will guide you through the process, but note that you should skip Step 2 of this tutorial, which focuses on installing MySQL, as you will install MySQL on your database server.
      • MySQL installed on your database server. Follow “How To Install MySQL on Ubuntu 18.04” to set this up.
      • Optionally (but strongly recommended), TLS/SSL certificates from Let’s Encrypt installed on your web server. You’ll need to purchase a domain name and have DNS records set up for your server, but the certificates themselves are free. Our guide How To Secure Nginx with Let’s Encrypt on Ubuntu 18.04 will show you how to obtain these certificates.

      Step 1 — Configuring MySQL to Listen for Remote Connections

      Having one’s data stored on a separate server is a good way to expand gracefully after hitting the performance ceiling of a one-machine configuration. It also provides the basic structure necessary to load balance and expand your infrastructure even more at a later time. After installing MySQL by following the prerequisite tutorial, you’ll need to change some configuration values to allow connections from other computers.

      Most of the MySQL server’s configuration changes can be made in the mysqld.cnf file, which is stored in the /etc/mysql/mysql.conf.d/ directory by default. Open up this file with root privileges in your preferred editor. Here, we’ll use nano:

      • sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

      This file is divided into sections denoted by labels in square brackets ([ and ]). Find the section labeled mysqld:

      /etc/mysql/mysql.conf.d/mysqld.cnf

      . . .
      [mysqld]
      . . .
      

      Within this section, look for a parameter called bind-address. This tells the database software which network address to listen for connections on.

      By default, this is set to 127.0.0.1, meaning that MySQL is configured to only look for local connections. You need to change this to reference an external IP address where your server can be reached.

      If both of your servers are in a datacenter with private networking capabilities, use your database server’s private network IP. Otherwise, you can use its public IP address:

      /etc/mysql/mysql.conf.d/mysqld.cnf

      [mysqld]
      . . .
      bind-address = db_server_ip
      

      Because you’ll connect to your database over the internet, it’s recommended that you require encrypted connections to keep your data secure. If you don’t encrypt your MySQL connection, anybody on the network could sniff sensitive information between your web and database servers. To encrypt MySQL connections, add the following line after the bind-address line you just updated:

      /etc/mysql/mysql.conf.d/mysqld.cnf

      [mysqld]
      . . .
      require_secure_transport = on
      . . .
      

      Save and close the file when you are finished. If you’re using nano, do this by pressing CTRL+X, Y, and then ENTER.

      For SSL connections to work, you will need to create some keys and certificates. MySQL comes with a command that will automatically set these up. Run the following command, which creates the necessary files. It also makes them readable by the MySQL server by specifying the UID of the mysql user:

      • sudo mysql_ssl_rsa_setup --uid=mysql

      To force MySQL to update its configuration and read the new SSL information, restart the database:

      • sudo systemctl restart mysql

      To confirm that the server is now listening on the external interface, run the following netstat command:

      • sudo netstat -plunt | grep mysqld

      Output

      tcp 0 0 db_server_ip:3306 0.0.0.0:* LISTEN 27328/mysqld

      netstat prints statistics about your server’s networking system. This output shows us that a process called mysqld is attached to the db_server_ip at port 3306, the standard MySQL port, confirming that the server is listening on the appropriate interface.

      Next, open up that port on the firewall to allow traffic through:

      Those are all the configuration changes you need to make to MySQL. Next, we will go over how to set up a database and some user profiles, one of which you will use to access the server remotely.

      Step 2 — Setting Up a WordPress Database and Remote Credentials

      Even though MySQL itself is now listening on an external IP address, there are currently no remote-enabled users or databases configured. Let's create a database for WordPress, and a pair of users that can access it.

      Begin by connecting to MySQL as the root MySQL user:

      Note: If you have password authentication enabled, as described in Step 3 of the prerequisite MySQL tutorial, you will instead need to use the following command to access the MySQL shell:

      After running this command, you will be asked for your MySQL root password and, after entering it, you'll be given a new mysql> prompt.

      From the MySQL prompt, create a database that WordPress will use. It may be helpful to give this database a recognizable name so that you can easily identify it later on. Here, we will name it wordpress:

      • CREATE DATABASE wordpress;

      Now that you've created your database, you next need to create a pair of users. We will create a local-only user as well as a remote user tied to the web server’s IP address.

      First, create your local user, wordpressuser, and make this account only match local connection attempts by using localhost in the declaration:

      • CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'password';

      Then grant this account full access to the wordpress database:

      • GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpressuser'@'localhost';

      This user can now do any operation on the database for WordPress, but this account cannot be used remotely, as it only matches connections from the local machine. With this in mind, create a companion account that will match connections exclusively from your web server. For this, you'll need your web server's IP address.

      Please note that you must use an IP address that utilizes the same network that you configured in your mysqld.cnf file. This means that if you specified a private networking IP in the mysqld.cnf file, you'll need to include the private IP of your web server in the following two commands. If you configured MySQL to use the public internet, you should match that with the web server's public IP address.

      • CREATE USER 'wordpressuser'@'web-server_ip' IDENTIFIED BY 'password';

      After creating your remote account, give it the same privileges as your local user:

      • GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpressuser'@'web_server_ip';

      Lastly, flush the privileges so MySQL knows to begin using them:

      Then exit the MySQL prompt by typing:

      Now that you've set up a new database and a remote-enabled user, you can move on to testing whether you're able to connect to the database from your web server.

      Step 3 — Testing Remote and Local Connections

      Before continuing, it's best to verify that you can connect to your database from both the local machine — your database server — and from your web server with each of the wordpressuser accounts.

      First, test the local connection from your database server by attempting to log in with your new account:

      • mysql -u wordpressuser -p

      When prompted, enter the password that you set up for this account.

      If you are given a MySQL prompt, then the local connection was successful. You can exit out again by typing:

      Next, log into your web server to test remote connections:

      You'll need to install some client tools for MySQL on your web server in order to access the remote database. First, update your local package cache if you haven't done so recently:

      Then install the MySQL client utilities:

      • sudo apt install mysql-client

      Following this, connect to your database server using the following syntax:

      • mysql -u wordpressuser -h db_server_ip -p

      Again, you must make sure that you are using the correct IP address for the database server. If you configured MySQL to listen on the private network, enter your database's private network IP. Otherwise, enter your database server's public IP address.

      You will be asked for the password for your wordpressuser account. After entering it, and if everything is working as expected, you will see the MySQL prompt. Verify that the connection is using SSL with the following command:

      If the connection is indeed using SSL, the SSL: line will indicate this, as shown here:

      Output

      -------------- mysql Ver 14.14 Distrib 5.7.18, for Linux (x86_64) using EditLine wrapper Connection id: 52 Current database: Current user: wordpressuser@203.0.113.111 SSL: Cipher in use is DHE-RSA-AES256-SHA Current pager: stdout Using outfile: '' Using delimiter: ; Server version: 5.7.18-0ubuntu0.16.04.1 (Ubuntu) Protocol version: 10 Connection: 203.0.113.111 via TCP/IP Server characterset: latin1 Db characterset: latin1 Client characterset: utf8 Conn. characterset: utf8 TCP port: 3306 Uptime: 3 hours 43 min 40 sec Threads: 1 Questions: 1858 Slow queries: 0 Opens: 276 Flush tables: 1 Open tables: 184 Queries per second avg: 0.138 --------------

      After verifying that you can connect remotely, go ahead and exit the prompt:

      With that, you've verified local access and access from the web server, but you have not verified that other connections will be refused. For an additional check, try doing the same thing from a third server for which you did not configure a specific user account in order to make sure that this other server is not granted access.

      Note that before running the following command to attempt the connection, you may have to install the MySQL client utilities as you did above:

      • mysql -u wordpressuser -h db_server_ip -p

      This should not complete successfully, and should throw back an error that looks similar to this:

      Output

      ERROR 1130 (HY000): Host '203.0.113.12' is not allowed to connect to this MySQL server

      This is expected, since you haven't created a MySQL user that's allowed to connect from this server, and also desired, since you want to be sure that your database server will deny unauthorized users access to your MySQL server.

      After successfully testing your remote connection, you can proceed to installing WordPress on your web server.

      Step 4 — Installing WordPress

      To demonstrate the capabilities of your new remote-capable MySQL server, we will go through the process of installing and configuring WordPress — the popular content management system — on your web server. This will require you to download and extract the software, configure your connection information, and then run through WordPress's web-based installation.

      On your web server, download the latest release of WordPress to your home directory:

      • cd ~
      • curl -O https://wordpress.org/latest.tar.gz

      Extract the files, which will create a directory called wordpress in your home directory:

      WordPress includes a sample configuration file which we'll use as a starting point. Make a copy of this file, removing -sample from the filename so it will be loaded by WordPress:

      • cp ~/wordpress/wp-config-sample.php ~/wordpress/wp-config.php

      When you open the file, your first order of business will be to adjust some secret keys to provide more security to your installation. WordPress provides a secure generator for these values so that you do not have to try to come up with good values on your own. These are only used internally, so it won't hurt usability to have complex, secure values here.

      To grab secure values from the WordPress secret key generator, type:

      • curl -s https://api.wordpress.org/secret-key/1.1/salt/

      This will print some keys to your output. You will add these to your wp-config.php file momentarily:

      Warning! It is important that you request your own unique values each time. Do not copy the values shown here!

      Output

      define('AUTH_KEY', 'L4|2Yh(giOtMLHg3#] DO NOT COPY THESE VALUES %G00o|te^5YG@)'); define('SECURE_AUTH_KEY', 'DCs-k+MwB90/-E(=!/ DO NOT COPY THESE VALUES +WBzDq:7U[#Wn9'); define('LOGGED_IN_KEY', '*0kP!|VS.K=;#fPMlO DO NOT COPY THESE VALUES +&[%8xF*,18c @'); define('NONCE_KEY', 'fmFPF?UJi&(j-{8=$- DO NOT COPY THESE VALUES CCZ?Q+_~1ZU~;G'); define('AUTH_SALT', '@qA7f}2utTEFNdnbEa DO NOT COPY THESE VALUES t}Vw+8=K%20s=a'); define('SECURE_AUTH_SALT', '%BW6s+d:7K?-`C%zw4 DO NOT COPY THESE VALUES 70U}PO1ejW+7|8'); define('LOGGED_IN_SALT', '-l>F:-dbcWof%4kKmj DO NOT COPY THESE VALUES 8Ypslin3~d|wLD'); define('NONCE_SALT', '4J(<`4&&F (WiK9K#] DO NOT COPY THESE VALUES ^ZikS`es#Fo:V6');

      Copy the output you received to your clipboard, then open the configuration file in your text editor:

      • nano ~/wordpress/wp-config.php

      Find the section that contains the dummy values for those settings. It will look something like this:

      /wordpress/wp-config.php

      . . .
      define('AUTH_KEY',         'put your unique phrase here');
      define('SECURE_AUTH_KEY',  'put your unique phrase here');
      define('LOGGED_IN_KEY',    'put your unique phrase here');
      define('NONCE_KEY',        'put your unique phrase here');
      define('AUTH_SALT',        'put your unique phrase here');
      define('SECURE_AUTH_SALT', 'put your unique phrase here');
      define('LOGGED_IN_SALT',   'put your unique phrase here');
      define('NONCE_SALT',       'put your unique phrase here');
      . . .
      

      Delete those lines and paste in the values you copied from the command line.

      Next, enter the connection information for your remote database. These configuration lines are at the top of the file, just above where you pasted in your keys. Remember to use the same IP address you used in your remote database test earlier:

      /wordpress/wp-config.php

      . . .
      /** The name of the database for WordPress */
      define('DB_NAME', 'wordpress');
      
      /** MySQL database username */
      define('DB_USER', 'wordpressuser');
      
      /** MySQL database password */
      define('DB_PASSWORD', 'password');
      
      /** MySQL hostname */
      define('DB_HOST', 'db_server_ip');
      . . .
      

      And finally, anywhere in the file, add the following line which tells WordPress to use an SSL connection to our MySQL database:

      /wordpress/wp-config.php

      define('MYSQL_CLIENT_FLAGS', MYSQLI_CLIENT_SSL);
      

      Save and close the file.

      Next, copy the files and directories found in your ~/wordpress directory to Nginx's document root. Note that this command includes the -a flag to make sure all the existing permissions are carried over:

      • sudo cp -a ~/wordpress/* /var/www/html

      After this, the only thing left to do is modify the file ownership. Change the ownership of all the files in the document root over to www-data, Ubuntu's default web server user:

      • sudo chown -R www-data:www-data /var/www/html

      With that, WordPress is installed and you're ready to run through its web-based setup routine.

      Step 5 — Setting Up WordPress Through the Web Interface

      WordPress has a web-based setup process. As you go through it, it will ask a few questions and install all the tables it needs in your database. Here, we will go over the initial steps of setting up WordPress, which you can use as a starting point for building your own custom website that uses a remote database backend.

      Navigate to the domain name (or public IP address) associated with your web server:

      http://example.com
      

      You will see a language selection screen for the WordPress installer. Select the appropriate language and click through to the main installation screen:

      WordPress install screen

      Once you have submitted your information, you will need to log into the WordPress admin interface using the account you just created. You will then be taken to a dashboard where you can customize your new WordPress site.

      Conclusion

      By following this tutorial, you've set up a MySQL database to accept SSL-protected connections from a remote WordPress installation. The commands and techniques used in this guide are applicable to any web application written in any programming language, but the specific implementation details will differ. Refer to your application or language's database documentation for more information.



      Source link

      How to Optimize Your Website for Mobile Devices


      Eleven years ago, the iPhone transformed how we browse, shop, and behave. Here’s why a mobile-friendly site is a must for small-business owners.

      More than a decade ago, Steve Jobs strode onto the stage at the Macworld Expo. In his signature style, the Apple co-founder, CEO, and resident showman promised the world three things: an updated iPod, a phone, and a mini computer.

      He listed off each item’s attributes: “A widescreen iPod with touch controls. A revolutionary mobile phone. And a breakthrough internet communications device.”

      But when it was time for the big reveal, he didn’t unveil three separate products. He held out one gadget in triumph: the iPhone. “Are you getting it?” Jobs asked the crowd. “These are not three separate devices. This is one device! And we’re calling it iPhone.”

      With an all-touch interface and sleek aesthetic, the iPhone stood out from the rest of the smartphones on the market. Eleven years later, more than 1 billion have been sold. Experts hail it as one of the most important devices launched this century.

      The iPhone led the smartphone revolution and transformed how websites are built and used, ushering mobile and responsive design. Today, nearly everything we do — from ordering takeout to hailing a Lyft to sharing a photo on social media to posting on our blog — can be done through a smartphone. And the iPhone was the key to this shift.

      Mobile Design: 10 Years On

      Today, many people use their smartphone as their sole computer. There are 3 billion people with smartphones, and 1.3 billion who own computers.

      Mobile traffic increases year over year, says Pete Polgar, Chief Marketing Officer at Clikz Digital, a digital design and marketing agency based in Little Falls, New Jersey, and is poised to surpass desktop traffic.

      “A phone is more versatile and provides more value to the end user than a computer,” he says. “You will see a massive increase in phone usage over the next few years as the technology gets cheaper.”

      If your website isn’t mobile-optimized, you’re missing out, says Polgar. He points out that Google will not rank your site highly if your website is not mobile-friendly. “If your users have a mobile bad experience, they are most likely not returning your website,” he adds.

      What Does Mobile Web Design Mean, Anyway?

      Responsive design means that no matter how big a screen is — from a phone to a watch to a tablet to a desktop — the site will fill the screen and present information in a clear way.

      “It’s not like you’re getting a flyer made or a newsletter that’s printed and has a constant canvas size,” explains Matt Felten, a Los Angeles-based product designer. “The proliferation of the iPhone means that designers have to adapt to variable screen sizes and come up with new methods for a plethora of different devices.”

      Starting a Site From Scratch? Think Mobile-First

      Bryan Clayton, CEO of GreenPal, spent nine months building his company’s site from scratch. “Right out of the gate, there were major problems,” he says. “We assumed that the majority of our users would shop for a lawn care service from their desktop or laptop computer. But it became very clear, very quickly that more people were accessing the website from their mobile phones and tablets than from a desktop or laptop computer — 4-to-1.”

      The original full-featured desktop experience included all kinds of bells and whistles such as animations. “We had all kinds of other features that make a desktop experience delightful,” he recalls. “The problem with this approach was that the desktop experience would not translate to a mobile web browser.”

      As a result, the website was bloated and didn’t work well on mobile. Users found that they had to pinch and zoom to get through the sign-up process.

      Small businesses — even ones with a local clientele — need to be online. Here are six reasons why.

      “Before our website was rebuilt for a mobile-first experience, conversion on a mobile browser was less than 4 percent,” he says. “That means that people who attempted to sign up abandoned in the process 96 percent of the time.”

      After rebuilding the site to be mobile-first, Clayton found that 82 percent of people who initiated the sign-up process to get a free price estimate complete the entire process from their mobile device and tablet.

      “Our mobile-first product is the only reason why we are even in the game today,” he says.

      Hone In On Your Audience

      Polgar finds that many clients still ask for desktop-based sites. But “a lot of these businesses did not analyze how their customers are finding them, which was on mobile,” he says.

      For any website launch or redesign, he suggests business owners first figure out how the customer uses their site. Once you determine how they will use the site, then you can develop an appropriate strategy.

      Additionally, make sure your site is accessible to all readers — from adjusting the contrast so colorblind people can read content to making it possible for visually impaired people to understand through screen readers.

      Ask For Customer Feedback

      Zondra Wilson, owner of Blu Skincare in Los Angeles, only found out that her site wasn’t mobile-friendly when she started asking for feedback from customers.

      “I would ask my customers to write a review and they would say they couldn’t find where to write it,” she recalls. “I would ask them about my blog or articles that I posted and they had a hard time finding them. They had trouble viewing my site on their cell phones. They had to scroll down a lot before my first picture or any information about my company popped up. They didn’t know how to navigate through my site. Many were frustrated and didn’t go past the first page.”

      Wilson recently upgraded her site to a more mobile-friendly version and has already noticed that users are viewing more pages on the site than usual.

      Wondering if you have what it takes to start an online business? Here are 4 traits successful entrepreneurs have in common.

      Think Small

      Less is more when it comes to mobile. Since phones aren’t as powerful as a desktop browser, you should make sure your site is optimized to load quickly, and that your web host can handle the traffic, explains Polgar.

      Ultimately, the best design strategy is simple: take away all excess clutter.

      “You need to design for small,” says Felten. “You have to be a little more focused. You have to cut down on information and content.” After your mobile site is in place, you may find that you don’t need to add more to the desktop version to the site, after all.

      “Small businesses will have to overhaul their current marketing strategies, as their screen real estate has shrunk significantly,” says Polgar.

      Vitaliy Vinogradov, CEO of Modern Place Lighting, found that a switching to a mobile-first design led to 30 percent more conversions compared to desktop. “One important thing to do is to remove excess plugins, popups, or any other screen inhibitors on the mobile version of the site,” he says.

      His team combed through the site and eliminated a few social sharing plugins that took up valuable real estate on the screen.

      Refine Your Design Aesthetic

      website wireframe sketch and programming code on digital tablet

      The rise of mobile has spurred the rise of design-centric companies like Apple and Google. Consumers today expect more sophisticated design, says Felten.

      “There’s a big push to see the business cases of a beautiful and well-performing website,” he says. “If I’m a small-business owner and all of the competition has a really nice website and I don’t, in a less than a second, people make a negative judgment about my product.”

      On the flip side, if you have a beautifully designed site, people think that you value and put the same amount of care in your product.

      Don’t forget to pay attention to typography. The right font can make or break your website’s conversion rate.

      Create a Consistent User Experience

      Before mobile-first design, people built a website meant to be viewed on a desktop and then designed a mobile version.

      The problem?

      Your desktop site might have an entirely different look and feel compared to its mobile site. For example, Gmail’s app on the phone is different from the mobile site and the desktop site. A simple, responsive design eliminates jarring differences in user experience, says Felten.

      Think Social

      The vast majority of blogs are being read and shared through social, says Felten.

      Think about it: from cat photos to product reviews to memes, if anyone is sharing content they’ve read from a blog, it’s most likely going to be through a social platform. This is a case where you’d want to make sure you have a responsive design, Felten suggests.

      Make social media work hard for your business. Here are 4 simple tricks.

      Your business should have a social media presence across the appropriate platforms, so you can reach the maximum amount of people. “For some businesses, it makes sense to have a Facebook, and others require an Instagram,” he says. “This creates multiple entry points to your site and a way to showcase your full range of services.”

      Do You Need An App For That?

      The iPhone also introduced the concept of apps that companies can build for their customers. But does your company need one? Felten says you should make sure that your website is strictly informative.

      If your company provides daily functions — like booking a service, checking a balance, or ordering a product, it may be best to create a companion app.

      This DreamHost customer built an aviation app to take plane scheduling to — get ready for it — new heights.

      What’s Next?

      “Moving forward for any small business, you need to have a website and your need to have all your browsers be mobile-friendly,” says Felten. Beyond that, Polgar foresees that the cloud will become even more important, which means that companies will have to design around making your files are easily accessible using an internet connection.

      7 Ways to Optimize Your Website for Mobile Devices

      Now that we’ve made it clear why it’s necessary to prime your site for mobile usage, let’s get a little more practical. In the next few sections, we’ll walk you through some of the most critical aspects of creating a mobile-optimized website, ranging from the simple to the more technically complex.

      We recommend that you take the time to implement as many of these methods as possible, to improve the odds that your website performs well on all devices (and is favored by Google’s mobile-first index). Let’s get to work!

      1. Test Your Site Using Google’s Mobile-Friendly Tool

      Before you take any further action, it’s a smart move to see how your site is already faring when it comes to mobile-friendliness. Doing this will help you hone in on the specific areas of your site that need work, and give you useful information on how you can make improvements.

      One way to do this is by simply using your website on several different devices. Access the site using your own smartphone or tablet, and see how it looks and feels to use. Doing this lets you get a feel for the loading times, how well the design works on a smaller screen, whether the content is still readable, and if the navigation is easy to use.

      Once you’ve done that, you can go even deeper by using a dedicated testing tool. Fortunately, Google has created one you can use for free, which will show you if your site is up to its standards for mobile pages. Appropriately, this is called the Mobile-Friendly Test tool.

      The Mobile-Friendly Test home page.

      To test your site, you only need enter its URL and select Run Test. The process will usually complete in a few seconds, at which point you’ll see the results.

      Mobile-Friendly Test results page.

      If your site is mobile-friendly, you’ll see a message letting you know, alongside a screenshot of how your website appears on a smartphone. On the other hand, if your site isn’t mobile-friendly, the results will show you what elements need to be adjusted.

      Mobile-Friendly Test results, showing that the page is not mobile friendly.

      Even if your site gets an overall positive result, it might still have difficulty loading certain assets. In that case, you’ll see a Page loading issues notification.

      Page Loading Issues notification.

      This will open a page where you can see exactly which resources Google wasn’t able to load.

       Information about loading errors.

      At this point, you can deal with each listed issue in turn. For example, you could edit your robots.txt file to allow Google to access blocked files, or fix any redirection errors.

      2. Use a Responsive WordPress Theme

      When it comes to choosing a WordPress theme, there are some things you need to keep in mind. For one, you’ll want to make sure it’s well-optimized and doesn’t negatively affect your website’s performance. It also needs to be secure, and provide you with the settings you’ll need to customize it. Of course, it also needs to have an appealing look and style.

      One piece of criteria that’s easy to overlook during this process is whether or not a theme is responsive. This means that your site’s design will be rendered properly, regardless of what device, browser, and screen size it’s viewed on. Fortunately, most themes these days are fully responsive. This is particularly true for many of the options in the WordPress Theme Directory.

      However, you’ll want to make sure a given theme is responsive before installing it. Most of the time, the developer will mention this explicitly in the theme’s description, so make sure you check its list of features carefully.

      An example of a theme description.

      Other sites will let you filter themes to only show the responsive options. ThemeForest is one such place.

      Browsing responsive themes on ThemeForest.

      Once you’ve found a theme you like that offers a responsive design, you may want to see how your site will actually look on each device. If the theme is installed, you can do this by navigating to Appearance > Customize in your dashboard. If you look at the bottom-left corner of the screen, you’ll see a set of icons representing different devices.

      Options for viewing a site in tablet or mobile mode.

      Clicking on one of these will change the view, and display your website as it will appear on the selected type of device.

      Customizing a site’s appearance in tablet mode.

      You can now see precisely how responsive your theme is, and whether it lets you make further configurations to improve the mobile experience. It may take some time to find the right responsive theme and set it up to work across various devices, but the final result will be worth it.

      3. Choose a Reliable Web Host

      We’ve said it before and we’ll happily say it again — picking the right web host for your site is one of the most crucial decisions you’ll make. The simple fact is that if you choose a host or plan that doesn’t offer the speed and resources you need, no amount of work on your part can stop your website from performing poorly.

      Your web host will do a lot to determine how well your site performs, and when it comes to mobile-first optimization, speed is even more important than usual. We’ll discuss why this is in more detail later on. For now, what’s relevant to know is that selecting a host that keeps your site running fast will help a lot with your site’s mobile-friendliness.

      With that in mind, you need to choose a plan that can guarantee consistently high performance and absolutely minimal downtime. The best option in most cases is going with a VPS hosting plan, as they tend to be affordable while still offering terrific performance at all times.

      DreamHost VPS hosting plans.

      However, if you need even more out of your web hosting, you might want to go with a managed dedicated server — which means you’ll be able to use a server that’s reserved specifically for your site. Not only does this let you customize the server to your exact requirements, but it also means increased security and speed – both of which are key elements on a mobile-friendly site.

      4. Improve Your Site’s Loading Times

      As we hinted at in the previous section, website speeds are particularly significant in a mobile-first world. Of course, keeping your site’s loading times to a minimum is always an important consideration. In fact, optimizing your site for speed will not only help you keep your bounce rates down, but it can also improve your users’ experience, which is good news for your bottom line.

      However, performance becomes even more of a priority when you’re optimizing a site for mobile users. Not too long ago, Google introduced its “Speed Update,” which made site speed a ranking factor for mobile pages. As such, it’s critical you consider how well your site performs on mobile devices if you want it to be easily found in search engines.

      Testing Your Site’s Mobile Speed

      The first thing you’ll need to do is find out how well your site is currently performing. Once again, Google is here to help you out with its Mobile Speed Test tool.

      The Mobile Speed Test home page.

      All you need to do here is enter your site’s URL and click on the arrow button. The tool will access and scan your website to see how quickly it loads on a mobile device.

      Mobile Speed Test results.

      You can also scroll down to find more detailed information. Here you’ll see how your site compares to the competition, and even how many seconds you could shave off your loading times.

      Graph showing a site’s loading times compared to competitors.

      If you want to make those times shorter, there are plenty of ways you can optimize your site for performance on both desktop and mobile devices.

      Optimizing Your Site’s Loading Times

      Let’s look at some of the basic methods you can use for improving your site’s speed.

      • Implement caching. When you use caching, some of your website’s files will be saved in a more convenient location (such as on each visitor’s local device), so they don’t need to be downloaded every time a new page is accessed. There are many free caching plugins available, although some hosting plans such as DreamPress include this feature by default.
      • Use a Content Delivery Network (CDN). Instead of delivering your files from one central server, a CDN lets you store copies of them in a series of servers that are spread out geographically. This makes loading times more balanced regardless of a given user’s location, while also reducing your bandwidth usage.
      • Compress your images. Large image files are often the culprits behind slow loading times. By compressing them, you can reduce their size without affecting their quality. There are a number of free and premium solutions to help you do this, including the ShortPixel plugin and the TinyPNG tool.
      • Minify your code. By optimizing your site’s CSS, HTML, and JavaScript code, you can make it more efficient and shave precious seconds off your load times.
      • Keep all aspects of your site up-to-date. Using outdated software to run your website not only leaves you vulnerable to security issues, but it also prevents it from performing at peak efficiency. By keeping your plugins, themes, and CMS updated at all times, you can avoid those problems.

      While this can seem like a lot of work, most of these techniques can actually be implemented using simple free solutions that require little-to-no configuration on your part. As a result, your site should perform considerably better on mobile devices and have an advantage in search engine rankings.

      5. Redesign Your Pop-Ups for Mobile Devices

      While pop-ups get a lot of criticism, they remain one of the most effective methods of grabbing a visitor’s attention. As such, we wouldn’t be surprised if your site contains at least one or two strategically positioned pop-ups, designed to increase conversions or pass vital information on to users.

      An example of a website pop-up.

      However, this can become a problem when your site is viewed on mobile devices. On a smaller device, screen space becomes more important, and even medium-sized pop-ups can become far more disruptive than they appear on the desktop version of your website.

      To crack down on pop-ups that harm the user experience this way, Google recently implemented some pop-up penalties. These are effectively a set of rules that pop-ups must follow, to avoid frustrating mobile users or covering up too much of the site.

      In order to avoid being penalized, you’ll need to make sure your mobile pop-ups adhere to those guidelines. In simple terms, you’ll want to configure your pop-ups as follows.

      • Pop-ups must be as non-obstructive as possible. On mobile devices, pop-ups should only cover a small fraction of the screen.
      • Pop-ups must be easy to close. It should be clear how a mobile users can dismiss the pop-up, usually via a clearly visible, decently-sized button.
      • Pop-ups containing necessary information are exempt. The above guidelines do not apply to login dialogs, age verification forms, or other pop-ups that display essential information (such as cookie notices).

      As long as you bear these considerations in mind when designing your pop-ups, you shouldn’t be at risk of getting penalized.

      6. Enable Accelerated Mobile Pages (AMP)

      As part of Google’s mission to make mobile surfing a smoother experience, the company has also recently launched its Accelerated Mobile Pages (AMP) project. The project has grown immensely since it was unveiled in 2015, and many sites are now using AMP to ensure that their mobile versions operate at peak performance.

      So, what exactly is AMP? In simple terms, it’s a method for creating mobile-friendly versions of your site’s pages. This involves stripping down the content, as well as removing unnecessary media files and advanced layouts. These AMP versions will then be served to users who access your site using a mobile device.

      Naturally, there’s a lot more to AMP, including specially-created versions of your site’s HTML and JavaScript files, but fortunately, you don’t need to understand all the technical details to take advantage of this technology yourself. If you want to create your own AMP pages, an excellent place to start is with the AMP for WordPress plugin.

      The AMP for WordPress plugin.

      While this plugin is light on features, it will introduce you to the basics of using AMP and is very easy to use. You just need to download and install the plugin, and it will automatically generate AMP versions of your pages. You can even make some changes to the pages’ appearance, giving you more control over how they look on mobile devices.

      7. Create a Mobile App

      Finally, we come to a solution that might seem drastic at first glance. After all, it wasn’t long ago that mobile apps were exclusive to large websites and services. However, the market has changed significantly, and it’s now commonplace for almost any type of business or organization to offer a mobile app in addition to its standard, responsive site.

      Creating a dedicated app comes with many unique benefits that a simple website can’t offer. For example, it enables you to offer subscriptions and deal with them directly through your own interface. You can also use push notifications to grab users’ attention when you post content or want to share some news.

      While it’s possible to code a mobile app from scratch (or hire a developer to do so), a far easier solution is to use a tool that helps you turn your site into an app. One such solution that’s optimized for WordPress users is AppPresser.

      The AppPresser home page.

      This is a premium tool with plans that start at $19 per month. For that, you get an intuitive app builder interface that should be easy to use if you’re already familiar with WordPress.

      With that interface, you can quickly put together an app based on a specific site for both Android and iOS, which you can then share with your users. For example, you could submit it to an app store, or provide it directly to your site’s visitors or subscribers.

      Conclusion

      We now live in a mobile-first world. The majority of internet users rely more on mobile devices than their desktop counterparts, which means that you need to carefully consider how your website works and looks on smaller screens. Optimizing your site so that it performs well and is still easily usable on mobile devices is key, especially if you don’t want to get penalized by search engines.

      Do you have any questions about creating a mobile-optimized website? Join us in the DreamHost Community and let’s start the conversation!



      Source link