7. Have you optimized CSS?

A good Plugin to use is WP Minify Fix: http://wordpress.org/plugins/wp-minify-fix/. Simply Activate it.

What the plugin will do is Minify all your items. In short, it will remove all the white spaces from all your files.

Look at – www.gtmetrix.com

Compacting HTML code, including any inline JavaScript and CSS contained within it, can save many bytes of data and speed up downloading, parsing and execution time.

The above will fix these problems on most sites:

  • Convert small CSS files into one large file or bring in-line
  • Minify CSS
  • Move inline style blocks and <link> elements into the head vs. body
  • Avoid CSS @import

Note: Make sure to test your site and ensure everything is loading properly after adding the plugin WP Minify Fix.

Note: How do you know if WP Minify Fix is working? View source – http://yoursite.com/

7. Have you optimized images? (99% of the load time is from images)

 a. Serve scaled images

 b. Specify image dimensions

 c. Combine images using CSS sprites

 d. Ensure URL’s are stored locally and not being pulled from remote servers

 e. Use a CDN

 f. Searching for unnecessarily large images & how to resize

 g. WP Smush.it or Prizm Image Imsanity

 

 

A. Serve scaled images

 

See Step 6. – B. GT Metrix

 

B. Specify image dimensions

 

Make sure to add your width and height attribute when adding images to your site. If you’re using WordPress – the width and height attribute will already be set.

 

C. Combine images using CSS sprites

 

This is not recommended as the time it takes is not worth all the work to get it done. If you really want to do this, use – http://csssprites.com/  http://spriteme.org/

 

D. Ensure URL’s are stored locally and are not being pulled from remote servers


Make sure to load your Images from your own server.
A super easy tool to do this –

Add the Plugin – Cache Images from Matt Mullenweg
https://wordpress.org/plugins/cache-images/ – it is old, but it works

In WordPress à Tools à Cache Images

There are 2 buttons – Use them both.

As the system runs, it will look for images that are not stored in your WordPress. Install and cache them to your own server.

Sometimes, you have to run through the system, but overall it works well.


E. Use a CDN

This will always speed things up if it is setup well.

1) Get a CDN from MAXCDN

2) Add https://github.com/wmark/CDN-Linker to your WordPress setup

3) Add the URL that was given to you by MAX CDN to CDN Linker – Test the links and make sure they work.

If you want, you can also setup a CNAME. Read through this post – http://www.markdescande.com/setup-maxcdn-on-wpengine/

 

F. Searching for unnecessarily large images & how to resize

 

The easiest way to do this is make sure your images are less than 60kb. If they are not:

 

1) Upload the images to http://accounts.prizmcloud.com/?type=image

 

2) Down load the optimized image to your PC.

 

3) Now, upload the optimized image from your PC to http://www.smushit.com/ysmush.it/

 

4) Download the image from www.smushit.com and make sure to rename it to the correct file name.

 

5) Now, upload it back to your website and you’re good to go.

 

G. WP Smush.it or Prizm Image

 

Note: These 2 Plugins work on WPE, but only install one of them.

è Click: Plugins

è Click: Add New (http://www.Yourwebsitename.com/wp-admin/plugin-install.php)

è Search Type: WP Smush.it or Prizm Image

è Sometimes, problems can occur with WP Smush.it on WPEngine.  We will use Prizm Image as it just works well on WPEngine.

è Click: Activate

Here are some settings you can adjust:

1) Click on Settings -> Media (http://www.yourwebsitename.com/wp-admin/options-media.php)

2) Enter your Prizm Image License Key. – It takes 5 sec to get a Key here – http://www.prizmimage.com/Home/Login

3) On the settings page: SettingsMedia (http://www.yourwebsitename.com/wp-admin/options-media.php)

Change the setting to the following:

3.1) Select quality of reduced images use – Set it on: Higher Quality – Larger File Size

3.2) Tick the box – Remove JPEG metadata

3.3) Select JPEG Mode – Set it on: Do not change the JPEG mode

3.4) Prompt: Use Prizm Image on upload? – Set it on: Automatically process on upload
(This means any new image will run through the script and be optimized.)

3.5) Prompt: How many seconds should we wait for a response from Prizm Image? – Use 120

3.6) Prompt: Enable debug processing – Do NOT tick it

3.7) Now make sure to hit Save
4.)  Click: Media Library (http://www.markdescande.com/wp-admin/upload.php)

4.1) Click: Screen Options (On the top right hand side)

4.2) Set it to show 100 Media items and then click: Apply (This will now give you far less pages to work through.)

4.3) Select all the images on the page – Just tick the box below the wording Bulk Actions and it will select all of them.

4.4) Give the script time to run on the next page – look for the wording To go back to the previous page, click here – Click it

4.5) On the right hand side, you will see the wording Reduced by.

If you see it, you’re good to go. Do the same for the next batch of pages.

NOTE: Do this step LAST as it is a server hog.

4.6) When you’re done with all your images:
Click: Media à Bulk Prizm Image
(http://www.yourwebsitename.com/wp-admin/upload.php?page=wp-image_service-bulk)

4.7) Click: Run All My Images – Just give it time to run and do not run it when you have a lot of customers on your website as this will slow down the process.

4.8) After the page has run, at the bottom of the page you will see:

Prizm image finished processing.
Cumulative Total Savings: XXX MB

 

G. Imsanity and alternative method
Not recommended – https://wordpress.org/plugins/imsanity/

Make your images tiny. You don’t need a 150kb image. You only need a 30 kb image.

Some great tools are:Complete the steps as follows:

1) Take your big image and run it through this – http://compressnow.com/compress-multiple-images.php

2) Take your compressed image and then run it through this – http://www.smushit.com/ysmush.it/

3) Now, upload it to the site.

Don’t use PNG if you can avoid it. Use this tool instead – https://tinypng.com/

6. Have you run baseline reports?

website-speed-testing

a.     Pingdom
b.    GT Metrix
c.     Webpagetest.org
d.    Yslow

 

Make the Following before Running Reports

Location on all tests – Try to always use Dulles, VA.

Recommended Tools:
http://www.webpagetest.org/
http://gtmetrix.com/
http://fpt.pingdom.com/

Some Test Reports:

A.    Pingdom

 

http://tools.pingdom.com/fpt/#!/3M6FB/http://www.google.com/
for: http://www.google.com/

Tested from Dallas, Texas, USA on August 1 at 13:01:20

Page size 424.4kB

Note: (A Rule of thumb is 1 mb = 1sec load time. This test site is loading at 437ms and page size is 424.4kB so this site is almost perfect.)

Load time 437ms
Requests 50
Perf. Grade 100/100

Your website is faster than 98% of all tested websites.
Look for Performance Grade TAB

You will see that most of the items are 100%. This means that it has been well optimized.

Here is a fast speed trick:

Fix Remove Query Strings from Static Resources

Click: Plugins

Click: Add New à  Query Strings Remover http://www.gethow.org/query-strings-remover

Click: Activate

 

Fix Minify

Click: Plugins

Click: Add New à WP Minify Fix http://wordpress.org/plugins/wp-minify-fixed/

Click: Activate


What did you just do?

You have just fixed your reports to look better.

Remove Query Strings from Static Resources
Most caching system will not cache resources with a ‘?’ in their URL even if a Cache-control public header is present in the response.

By adding the plugin Query Strings Remover, we have removed the ‘?’. Now the items can be cached and served faster.

 

Minify (This means to remove all the spaces in your code)

Note: You can use Pingdom to see what your users will see and how fast the site will load. 99% of the time it is correct.

 

B.    GT Metrix

 

http://gtmetrix.com/reports/www.markdescande.com/V1QDJaOo

Page Speed Grade: (94%) A
YSlow Grade: (92%) A

Page load time: 0.90s
Total page size: 401KB
Total number of requests: 45

This report makes your life super easy. Make sure to click the tabs.

The most important items are:


-> Serve Scaled Images


When you test your site, make sure to click the tab Serve Scaled Images

Make sure you use the correct image size. If an image needs to be 200px x 200px then do not add a 400px x 400px image and have WordPress resized it for you.

 

-> Optimize images


After you have all the correct image sizes in place, run the report again. Here is the trick… Click the Optimize Images tab.

You will now see a list of images that have already been optimized for you. Right click Save As and then rename them and upload them back to your server.

Run the report again and make sure you don’t have any images left to do.

There are a lot of tips on GTMetrix,  but for now make sure you only work on the images since most of your site speed is from the load time of any images.


Note:
If you don’t want to use GTMetrix images then you can use these tools:

Images http://www.smushit.com/ysmush.it/
Images http://compressnow.com/compress-multiple-images.php
Images http://image.prizmcloud.com/

 

C.    Webpagetest.org

http://www.webpagetest.org/result/140801_6T_J89/

A First Byte Time
A Keep-alive Enabled
A Compress Transfer
A Compress Images
A Progressive JPEGs
B Cache Static Content
yes Effective use of CDN
Web Page Performance Test for www.markdescande.com/
From: Dulles, VA – Chrome – Cable 8/1/2014 1:16:58 PM

First View – 1.560s
(This is the most important factor. You would like to see this below 3 seconds. This is how fast your website will be for a first time user.)

Repeat View – 0.942s
(This is when a customer comes back to your page. This always needs to be fast. If you run some type of caching, it will always be lower than the First View)

 

The report itself is not telling us much, but let’s look at the next part: Domains Tab

http://www.webpagetest.org/domains.php?test=140801_6T_J89&run=1&cached=0

When looking at this, always remember less is more, so the more calls you have to outer websites, the slower your website will be.

Think of it like this, your take a drive to the store to get bread and then you drive home. Then you remember that you have forgotten to get milk and you have to drive all the way back to the store to get the milk.

Now, think of your poor server having to do the same thing. Let’s say you have a twitter widget on the home page. The server has to first load all the items from Twitter before it can load your website.

Recommended: Your home page needs to be clean and free of calls to other websites. This will speed things up as the server has to do less work.
Here is a list of helpful outer tools. They work the same as Pingdom, GTMetrix and WebPageTest.org

http://www.webhostinghero.com/speed/
http://www.feedthebot.com/
http://loadimpact.com/

D.    Yslow

If you fixed all the recommendations provided in Google page speed then your Yslow will automatically increase.

5. Are WordPress, Themes and Plugins on the latest version?

updating-wordpress

a.     WordPress Core
b.    Removing Unused themes
c.     Updating Themes
d.    Plugins

 

Make sure you are running current versions of all items.

Updating to current versions – This process is difficult and can be problematic. Make sure you have backups in place.

A.    WordPress Core

WordPress Core – Make sure that you have the latest version – http://wordpress.org/

 

B.    Removing Unused themes

Always delete any themes that you don’t use.

 

C.  Updating Themes

Make sure to always use the latest version of the theme. This is not always easy. Use this tool to help – http://www.wpthemedetector.com/

 

D.  Plugins

Make sure to always use the latest version of the plug-in – http://wordpress.org/plugins/

Note: This is important – if you don’t use it, delete it.

 

E. Files and Folders


Check to Ensure That There Are No Files and/or Folders That Look Out Of Place

After upgrading, look through FTP at your site and see if there are any files and/or folders that look out of place.

1) On FTP – Go to -> /Home public_html (WordPress)

2) Go to -> /wp-includes (WordPress)

3) Go to -> /wp-content (WordPress + All your images and plugins and themes)

Note: 99% of the time you will pick up junk in here. Best advice – download the files you’re planning to delete and then delete them one by one.

Make sure that your site is still working.

If you see that your site is not working then it is a matter of just uploading the files / folders from your back up. /wp-admin (WordPress)

2 Files That Make WordPress Work

1)    .htaccess Download a copy to your local PC

2)    wp-config.php Download a copy to your local PC

 

Here are some fast speed tricks you can do:

wp-config.php File:


1) Edit wp-config.php  – Make a backup first.

2) Add these lines near the bottom of the file

[code]define(‘WP_POST_REVISIONS’, 12);
define(‘WP_DEBUG’, false);
define(‘WP_MEMORY_LIMIT’, ’98M’);
define(‘WP_MAX_MEMORY_LIMIT’, ‘128M’);
/* That’s all, stop editing! Happy blogging. */[/code]


.htaccess File:


1) Edit .htaccess – Make a backup first.

2) Add this at the top of the file – http://pastebin.com/embed_iframe.php?i=UCvyR6xx

wp-content folder:


wp-content folder  – This is like the heart of WordPress.

Numerous plugins / themes will install items that should not be there.

So a good blueprint to use would be:

/wp-content/ plugins
/wp-content/ themes
/wp-content/ uploads
/wp-content/ upgrades

If you do see items in /wp-content/ that you do not think should be there, i.e. images, cache, etc, then do the following:

  1. Rename the folder i.e. Images to  Imagesold
  2. Pull up the site
  3. Click around the site
  4. Make sure it all works. If it is working then you can delete the folder.

TIP: Download the folder to your local computer and then delete it from the server. Pull up the site and, if the website doesn’t load, you can re-upload the folder.

3. Have you removed comment spam and implemented prevention tactics?

stop-wordpress-comment-spam

a. Using Akismet
b. Plugin: Stop Comment Spam

  1. A.    Using Akismet – Comment Spam Removal

 Comment spam will fill up your DB with junk comments and make your site slow.

Akismet Is the Answer – Say Goodbye to Comment Spam.
How to Install Akismet:

  1. Click: Plugins
  2. Click on: Add New
  3. Type the words: Akismet and click: Search Plugins
  4. Click: Activate – You will need a key. Just follow the prompts on the screen to get your own key.

 

How to Tweak Akismet:

  1. Click: Settings – >Akismet (http://www.YourSiteName.com/wp-admin/admin.php?page=akismet-key-config)
  2. Tick the box – Always put spam in the Spam folder for review (The remaining settings on the page can stay as is.)
  3. Click: Save Changes

 

B.    Plugin: Stop Comment Spam

 To help Akismet – You need to install one more plugin

  1. Click: Plugins
  2. Click: Add New -> Stop Spam Comments by Pino Ceniccola
  3. Click: Activate

Check how many junk comments you have:

  1. Click: Comments -> All Comments
  2. Go through them all, page by page, and make sure to mark them as spam
  3. When you’re done, delete them all.

Doing this helps clean up your DB and makes your site faster.

2. Have you backed up your website?

backing-up-your-site

a. Site Files
b. Database
c. Using Plugins or 3rd Party Services for Backup

Preparing Your Website for Speed Upgrades – You need to back up your website.

If you’re running on WPEngine, follow step 2.1.

If not, follow step 2.2.

2.1) How to make a backup on WPEngine:

Log in here – https://my.wpengine.com/dashboard (Make sure you are on the correct install.)

The URL will look something like this – https://my.wpengine.com/installs/username

  1. On the left there is a tab: Backup Points – Click it
  2. Click: Backup
  3. In Description – Put something in that you will remember Like “full back up before image tweaking”.
  4. Send notification – Make sure to type in your email address.
  5. Click: Create Backup
  6. Wait until you receive the email from WPE informing that the backup is complete.

A and B – Site Files & Database

2.2) If you don’t have a backup system in place:

  1. Download a copy of à .htaccess wp-config.php – Download the entire WP-content directory.
  2. DB – You would need PHP MyAdmin
  3. Login to PHP My Admin
  4. Click on the DB Name you want to work with
  5. Click: Export
  6. Click: Custom – Display all possible options.
  7. Look for the tab: Compression: Gzip – Then go all the way to the bottom and click Go.
  8. Wait for the DB to download (This can sometimes take a long time. If you think it is taking too long then ask your host if they can make a backup of the DB for you.)

Following this method will allow you to have a local backup of all your WordPress files.

C.    Using Plugins or 3rd Party Services for Backup

 This is not recommended as they almost never works. Instead, use point 2.2 above. It is old school, but it works well.

Note: If you have a tiny WordPress of less than 50mb then you can use – https://wordpress.org/plugins/wp-clone-by-wp-academy/

How to Check and Improve Website Speed?

Website speed is highly important when it comes to generating or losing revenue. Various studies have proven that slow loading speeds directly affect traffic since people are quite sensitive to the length of time they have to wait for pages to load.

For example, a Linden 2006 study revealed that a mere 5 second increase (from .4 to .9 seconds) in page load speed dropped Google’s traffic and ad revenue a whopping 20 percent.  An Amazon study by Kohavi and Longbotham in 2007 had similar findings. A one percent drop in sales occurred with every 100 milliseconds of increased load time.

The Importance of Website Speed

Website speed is also taken into consideration by Google when it comes to ranking. The faster the speed, the higher the ranking. This decision by Google is due to the fact that 75 percent of users have declared that they would not revisit a website if it took longer than 4 seconds to load. Therefore, slow web loading times not only affects visitor experience, but it also prevents visitors from being able to readily reach your site because of low Google rankings.

Since web speed is so important to internet business, you should actively seek ways to increase the running speed of your site. You can check the speed of your webpage by using YSlow on Yahoo, or using either Page Speed Insights or Firebug for Firefox offered by Google. Following are some of the best ways to check website speed.

Compress and Scale Website Images

Images take up a lot of server space and, if they are not tweaked to web-based quality format, they will increase loading time. Therefore, ensure that all of the photos and images used throughout your website are compressed and properly scaled.

You can use the Page Speed plugin offered by Google to compress your images. Once compressed to web-based quality, the images are saved into a chosen local file and uploaded as replacements for non-compressed images.

Photoshop can be used to correctly scale images to pixel dimensions that are the same as your HTML code. By scaling your images to proper pixel size, you eliminate the lag time required by the server to re-size them upon viewing.

Utilize CSS Sprites and Browser Caching

To further increase your website speed you can utilize CSS sprites which allow you to combine images and reduce loading time. Therefore, you can combine numerous images into one CSS sprite and increase speed because your browser will be opening one photo instead of numerous photos. CSS sprites also allow you to maintain the effect of all the images.

Another way to reduce server lag is to utilize browser caching. Browser caching is used to store static resources which also frees up considerable space and, therefore, increases webpage speed. Browser caching is enabled by adding specific code to the .thaccess file.

Relocate JavaScript and Compress Your JavaScript, CSS and HTML Files

If your JavaScript is positioned at the top of any of your HTML documents then they will act as blockages to page loadings making them open very slowly. Therefore, you should relocate your JavaScript towards the bottom of your pages. You can also utilize HTML code in order to defer parsing until after the other aspects of the page have fully loaded.

Compressing, or minifying, your JavaScript files as well as your CSS and HTML files will also increase loading speed. There are various resources on the internet, such as minifier, that can be used to compress these kinds of files.

How to Determine Your Website Speed from the Viewer’s Perspective

There is much more to a fast loading website than simply choosing a hosting service that is considered good or localized. Various factors work together to increase website speed making your viewer’s experience much more enjoyable which, in turn, tends to generate increased visits and higher sales.

Besides, making your visitors happy, you also want faster loading speed because Google now considers that an important part of their ranking formula. Higher search engine rankings also result in higher visitor numbers which, again, tends to result in higher sales. Overall, the more rapidly and thoroughly those visitors are engaged in your website via a fast loading time, the better your business results will be.

How to See What Your Visitors See

It’s not always enough to increase your site’s loading speed. Keep in mind that many of the users visiting your website do not have the same browser, internet connection, location, or computer as you. Therefore, you don’t necessarily improve the visitor’s experience simply by tweaking your personal criteria.

In order to know whether or not that you’ve bettered your visitor’s experience through your tweaks or if you require more adjustments, you need to be able to see what your visitor’s are seeing. To achieve this, you want to test and gain results from several diverse users of your target audience.

Available Tools for Audience Web Experience Testing

There are various tools available to webmasters that can be used to gauge your website performance from the user’s point of view. One is available through Google’s Webmaster Tools located under Site Performance which provides you with your website’s average load time. Pingdom Tools is another option that also presents browser load times and other detailed information via waterfall charts.

Loads.in is probably one of the best tools for checking viewer access to your site by checking performance from numerous hosts located around the world. This program also provides detailed information of various access attempts through screenshots and waterfall charts.

What Your Test Results Reveal

Once you perform testing and scour over the results, there are certain criteria that you should look for that indicates whether or not you need to further adjust your website speed in order to enhance viewer experience. Following are the results and what they tell you in a nutshell.

If your results come back showing load times of less than two seconds then your speed is good and there is little concern of losing viewers due to lag times. Of course, the point should be made that further tweaking is advisable if you find ways to increase speed because faster is always better in cyberspace.

If your results return showing a response time of between two and six seconds then you should have moderate concern. Such results imply that additional optimizing is required to improve user experience. Although not bad, this range of readings will show quite a positive performance increase through the additional optimization.

However, you should have a high level of concern if your test results return at over six seconds. Such a slow loading time reflects that there are one or more major blocks to your website speed. If the problem cannot be fixed through tweaking, you may need to consider a total overhaul and redesign of your website using more speed-friendly methods.

How Fast Is My Website?

In order to keep the attention of potential clients when they arrive at your business’s website, you need an easy-to-navigate design and engaging original content. But if your site does not load quickly, your careful design and quality content may go to waste, because many of these would-be customers will navigate away. If you are not sure how fast your website loads, you can use the following online tools to find out:

Google PageSpeed Insights

To use Google PageSpeed Insights, simply enter the address of your website in the box and click
the button that says “Analyze.” Google will return an overall grade for your site, out of 100 possible points. Below that you will find recommendations for improving your score, organized into high, medium, and low priority suggestions.

WebPageTest

At this page, you can gather more quantitative data about your site’s performance, including loading times and rendering times. For the analytically-minded business owner, these conveniently organized tables may be a more appealing way to see what elements of your site could be changed to improve speed.

Pingdom Full Page Test

This speed test will tell you how your website stacks up when measured against all the other sites that Pingdom has analyzed. You can also see the grade, based on Google PageSpeed, and a load time, similar to those offered by WebPageTest.

GTmetrix

Once again, this site gives you a speed rating based on Google PageSpeed, though here it is put in letter grade format for ease of understanding. You want your site to earn and A or a B. GTMetrix will also provide you with a grade based on Yahoo’s YSlow tool, and again you want to earn an A or a B for maximum viewer retention.