Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to Optimizing your WordPress website
Similar to Optimizing your WordPress website (20)
Recently uploaded
Recently uploaded (20)
Optimizing your WordPress website
- 1. Optimizing your WordPress website for Speed & Performance Mary White WordPressKC www.wpkansascity.org | #wpkc
- 2. Grandview Triangle early 90’s
- 3. Why should I optimize my website?
- 4. Question? How long do you stay and wait for a website to load? Make a mental note…….. SHHH don’t Tell anyone
- 5. Every raise your hand Lower your hands as you hear your number…..
- 6. 1-3 seconds 3-5 seconds 6-10 seconds 11-15 seconds Look around who would be waiting on a slow site to load?
- 7. “Studies show that users leave a site if it hasn't loaded in 4 seconds; keep your users happy and engaged by providing a fast performing website! ~~From gtmetric” “According to Kissmetrics, nearly half of web users expect a site to load in two seconds or less, and they tend to abandon sites that don’t load within three seconds.”
- 8. Couple more reasons Why? Bounce rate-- the amount of time before someone leaves your web page One of Google points for ranking a website is the speed at which it loads. Google uses many factors but you don’t want to lose out on this one
- 9. What Affects Performance? • Hosting • Hardware • Server Load • Themes • PlugIns • Graphics • Geographical Distance
- 10. Dedicated Hosting Service Shared
- 11. Hardware The number of processors The processors speed Amount of memory and disk space
- 12. Server Load “Wiki --- If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading”
- 13. Theme Graphics Styles Code JS jQuery Look for Light frameworks and very minimalistic theme Layouts Theme Frank was created just for speed
- 14. PlugIns Not are Candy
- 16. How do you Check your speed? Google PageSpeed GT metrix Pingdom *
- 17. Tools for Performance Testing** Google Developers: PageSpeed Insights Mozilla Firefox + Firebug + Hammerhead Yahoo! YSlow Google Chrome + Google Speed Tracer Pingdom WebPagetest Gomez Instant Test Pro Resource Expert Droid Web Caching Tests Port80 Compression Check A simple online web page compression / deflate / gzip test tool Web Page Analyzer GT Metrix **From WordPress.org/WordPress_Optimization
- 18. What I did…. I first took a Baseline with the following three tools.. Three times the first day to see if the time of day impacted the results.. • http://tools.pingdom.com/fpt/ • PageSpeed Insights • http://gtmetrix.com/
- 19. My early Baselines at 10:30 am on a Wednesday using Firefox Browser PageSpeed Insight gave me 58/100 Pingdom gave me 73/100 load time 3.10s GT Metric gave me 56% on pagespeed and 71 on Yslow Grade loadtime 8.38s at 11:00 am on a Wednesday using Chrome Browser pageSpeed Insight gave me 70/100 Pingdom gave me 73/100 load time 2.42s GT Metrix gave me 75% on pagespeed and 72 on Yslow Grade loadtime 4.11s
- 20. Afternoon Baselines About 1:45 using Firefox Browser PageSpeed Insight gave me 69/100 Pingdom gave me 85/100 load time 3.01 GT Metrix gave me 75% on pagespeed and 72 on Yslow Grade loadtime 4.42s
- 23. GT Metrix
- 24. GT Metrix
- 25. Backup Your WordPress Website Please backup your site and have an exit strategy if something causes problems with your site configurations. I have always been told there is no Silver Bullet strategy that works for everyone. Disclaimer….
- 26. Quick fixes Remove all unused code • Extra themes • Extra plugin • Extra photos Off site Storage • Off Load Images (Flikr, Amazon AWS, Amazon S3…) • Use Third Party Videos (Vimeo, YouTube..)
- 27. Cache your webpages http://www.wpbeginner.com/plugins/how-to-install-and-setup-w3-total-cache-for-beginners/
- 28. WordPress for PlugIns Caching • W3 total Cache • WP Super Cache • WP Fastest Cache • Quick Cache
- 29. Back to Case Study I used W3 total Cache working with GTMetrix About 1:45 Using Firefox browser PageSpeed Insight gave me 71/100 server speed 1.3s Pingdom gave me 75/100 load time 1.3s Gtmetric gave me 81% on pagespeed and 79 on Yslow Grade loadtime 3.35s
- 30. cPanel
- 31. Setup CDN (Content Delivery Network) I was able to setup CloudFlare via a Hostgator Icon on C-panel CloudFlare is a Free CDN -Other CDN------------------------------ maxcdn…. www.maxcdn.com Amazon cloudfront… http://aws.amazon.com/cloudfront/
- 32. Images A Picture is worth a thousand words...... … Unless no one sees it
- 33. Optimizing Images Plug-Ins a. WP smush.it b. EWWW Image Optimizer c. CW Image Optimizer d. Imsanity e. Hammy f. PB Responsive Images g. SEO Friendly Images
- 34. What Other Plug-Ins ???
- 35. Larger Changes Change Hosting Services Digital Ocean ssd WPEngine Managed Hosting SiteGround Managed Hosting FlyWheel Managed Hosting
- 36. Re-Work your Theme Design with a Minimalist view What is the purpose and work from that point out Remove Bells and Whistles Slider or Carousel on the Home Page Parallax
- 37. Minify CSS…Minify JS Code for Humans Whitespace Comments Readability Code for Computers Just the Facts body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } body{background-color:#d0e4fe}h1{color:orange;text-align:center}p{font-family:" Times New Roman";font-size:20px}
- 38. Manually Minify Code http://www.willpeavy.com/minifier/
- 39. Minify Plug-In • Autoptimize • W3 Total Cache • WP Super Cache • Quick Cache
- 40. Defer parsing of Scripts You can place this above the end body tag </body> <script type="text/javascript" defer="defer” src="YOUR_SOURCE_HERE"></script>
- 41. .htacess redirects Redirects of your pages or posts • Old URL to New URL • www.websitename.com to websitename.com Redirect 301 /oldpage.html http://www.yourdomain.com/newpage.html Redirect 301 /oldpage2.html http://www.yourdomain.com/newpage2.html Plug-Ins • Quick Page Post Redirect • Redirections
- 42. Check again and check often This is something you want as part of your maintenance You never know when things are going to change • new admin add a ton of pictures without optimizing • Shared server gets a client that is hogging most of your processing • Other…
- 43. Or Hire someone to do it • WPEngine • SiteGround • FlyWheel
- 44. Give aways • Google Pagespeed Insights Premium • GT Metrix Pro • Quick Cache Pro
- 45. Google Pagespeed Insights Premium
- 46. Report Summary
- 47. GT Metrix
- 48. Quick Cache Pro
- 49. Mary White MW for Designs MaryW@MWforDesigns.com MWforDesigns.com @mw4designs Continuing Educator at JCCC
Editor's Notes
- I will say lower amounts to large amount of seconds you would wait
- Shared hosting -a solution for a small company or Business with less that 1000 hits to the website per day. Your Website is on a server with possibly thousands of other websites VPS – this give you a part of a server that is specifically for your websites and the server is still shared but you are guaranteed your space Dedicated- this is a server that you alone are on and is normally for large companies that with have lots of traffic 100-1000s of request an hour iCloud- this is possible a shared group of servers or a dedicated servers for your website
- Okay the commadore 64 is just a joke but really you want to be hosted on hardware that is current Question your Hosting Service about there Data Center Locations and what are the server they are using window or Linux…. Hosting service normally offer higher performance at a price Some hosting services offer SSDs (Solid State Drives) at affordable prices
- Uptime for your server and how much data is going to and from your server… If you are sharing a server and in a perfect world you all share equally you are find BUT.. This not a perfect world and if your website is competing with a site getting 50 request an hour you may be waiting Single or Multiple Request to the servers browser asking server for data (php fires up the server and database) 1st get blueprint to build the pages (HTML static page) 2nd get everything else content images, CSS and JS Single page could have as many as 50 or more request to your server
- Heavy Graphic themes with animations… video… images and more can hinder your performance What is more important the site looking good or people being able to look at your site? Is there a common ground between the two? What do you really need?
- Plug-Ins are great and I am at fault as much as anyone else I love to see what this plug_in really will do for my site. Then I try the next great one I read about or hear about until I have 10-15 extra plug-ins on my site that I am not using… Plug-Ins or some plug-ins even when deactivated can cause you to slow down your system Some Plug-Ins may perform the function they need to but they place their script in the header of your page and slow down your website loading until their script is loaded Plug-in maybe something that is not seen…
- If your hosting has the server over in a foreign country and your uses are here in Kansas or Missouri this is going to slow things down. Make sure your hosting data centers are close to your audience
- is an excellent way to measure your WordPress site's performance and receive clear, specific feedback on how to make improvements. New Relic also provides a free library for measuring server performance in PHP and MySQL Linux Top provides a dashboard for your server's real time performance. If using Varnish Cache, VarnishStat helps assess the performance aspects of your caching tools. Zend Server Z-Ray provides X-Ray vision and deep insight into your WordPress PHP application
- W3 total Cache Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and content delivery network support WP Super Cache A very fast caching engine for WordPress that produces static html files. WP Fastest Cache The simplest and fastest WP Cache system (video on setup) Quick Cache Speed up your site (BIG time!) — Quick Cache provides reliable page caching for WordPress. Easy-to-use (very simple installation) One button but Pro version Has a lot of options
- Free CDN Content Delivery Network that is on HostGator and other cPanels Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format of email to support: Text in character sets other than ASCII Non-text attachments Message bodies with multiple parts Header information in non-ASCII character sets Although MIME was designed mainly for SMTP protocol, its use today has grown beyond describing the content of email and now often includes descriptions of content type in general, including for the web An Internet media type[1] is a standard identifier used on the Internet to indicate the type of data that a file contains. Common uses include the following: email clients use them to identify attachment files, web browsers use them to determine how to display or output files that are not in HTML format, search engines use them to classify data files on the web.
- My Hosting is with HostGator with four of my WordPress web sites on this server
- A Picture is worth a thousand words… Unless no one sees it Optimizing images is two fold first people will see it Second it will help with performance if you are optimizing your images A pixel is a pixel
- Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render useful content on the screen.
- Above the fold: You want your page to load fast and have everything above the fold to display and you don’t want to wait on script to load before your page loads If Themes or Plug-Ins have a hook to place the script in the wp-header you may need to changed that to place it in the wp-footer Or use a plug-in to defer your code
- A 301 code means that you want to tell the browser (or Google, bing, etc.) that your new page has permanently moved to a new location. This is great for search engines because it lets them know that there was a page there once, but now go to the new place to get it - and they update there old link to is so future visitors will not have to go through the same process
- This is a fairly complicated process and If you can afford it hiring someone to manage your site optimization, SEO , Security are all worth it. These are just a few of the providers I have heard of and most of them with give you statistic on how much they can optimize your site. You having the understanding and tools to get a baseline can help you tell if they are getting the job done.