custom coded projects
TRANSCRIPT
![Page 1: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/1.jpg)
Custom Coded Projects Marko Heijnen - WordPress Meetup Novi Sad
![Page 2: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/2.jpg)
“There is no such thing as too many plugins but there can be too much code and functionality”
![Page 3: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/3.jpg)
Dilbert to the rescue
![Page 4: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/4.jpg)
What should I choose for this feature?
![Page 5: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/5.jpg)
Performance
![Page 6: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/6.jpg)
Performance• Out of the box solutions can come with a higher
performance penalty
• This goes more for themes then plugins
• This because themes want to do more then you need, this to have a wider target group
![Page 7: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/7.jpg)
My sites vs WPSerbia
![Page 8: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/8.jpg)
Comparison• Everything is hosted on the same infrastructure
• Caching is the same which is Batcache/Redis
• My sites do use Elasticsearch
![Page 9: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/9.jpg)
My server setup
Thumbor
Public
Memcached
Elasticsearch
MariaDB
Micro services
Webserver 1
Webserver 2
Private
Loadbalancer
![Page 10: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/10.jpg)
My sites
![Page 11: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/11.jpg)
WPSerbia
![Page 12: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/12.jpg)
Comparison• Average of ~150ms vs ~300ms
• Spikes of my sites are caused by network traffic for WPCentral
• Spikes from WPSerbia are caused by Jetpack
![Page 13: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/13.jpg)
Comparison• Browser time is 3.3s vs 5.77 (hard to tell an average)
• My site is almost fully custom coded
• Even does some complex stuff with WPCentral
• WPSerbia isn’t that bad performing at all
• It has more images but it’s also local targeted
![Page 14: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/14.jpg)
GTMetrix
![Page 15: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/15.jpg)
New Relic loads later
![Page 16: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/16.jpg)
GTMetrix
![Page 17: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/17.jpg)
WPSerbia - good• It does load the images through Jetpack Photon
• Server infrastructure is good
• Not to many plugins
![Page 18: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/18.jpg)
WPSerbia - can be better• There are still some wrong http links in it (redirects)
• Stricter page caching
• Images are directly loaded (no lazy loading)
• Custom code Twitter widget (17 calls)
• Has a theme that also has helper plugins (widgets) which includes small stylesheets which could have been combined with the theme
![Page 19: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/19.jpg)
Worst case scenario
![Page 20: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/20.jpg)
Worst case scenario• One project with international traffic
• Dedicated server in Germany
• Theme from Themeforest with Visual Composer
• Browser time with spikes to ~30s`
![Page 21: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/21.jpg)
Improved version• Created a new parent/child theme
• Stripped all options away
• Some additional performance and bug fixes
• Spikes are now ~10s and went to ~8s
• Not bad at all if you look at the overhead of trackers
• And keep in mind this is fully loaded time
![Page 22: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/22.jpg)
Improved version• Still no caching in place
• This was on a longer roadmap
• It was already switched to PHP7
![Page 23: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/23.jpg)
Trackers (can) suck
![Page 24: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/24.jpg)
Time
![Page 25: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/25.jpg)
Time• There are qualitative plugins out there
• Say for forms you would choose Gravity Forms, Contact Form 7, Ninja Forms etc
• For search you could choose SearchWP, FacetWP or ElasticPress
• And more use cases where you have options
• So no reason to build everything yourself
![Page 26: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/26.jpg)
Search• Can become complicated very easy
• Depending on your requirements something custom or SearchWP/FacetWP can work for you
• Using Elasticsearch would have created additional development time due to plugin support
• Elasticsearch can save time when complex search is required like fuzzy or partial matching
![Page 27: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/27.jpg)
![Page 28: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/28.jpg)
Why FacetWP• It was relative easy to implement
• It saved up a considerable time of development
• It did create additional effort due to client demands
• It saved the client a big chunk of their budget
![Page 29: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/29.jpg)
Cost
![Page 30: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/30.jpg)
Cost• For ElasticPress (Elasticsearch) you would need
specific hosting or a VPS
• Also most likely a new VPS is needed going for $10
• So decisions you make aren’t only initial cost
• Still going for something as ElasticPress could save up cost as your webserver could perform better
![Page 31: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/31.jpg)
Quality
![Page 32: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/32.jpg)
WPCentral• Showing download history
• Showing version usage history
• List all locales and their current state (being updated)
• Showing contributors data (work in progress)
• Getting checksums for plugins & themes
• Parsing all commits of WordPress (work in progress)
![Page 33: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/33.jpg)
How it worked• A lot of data handling by wp_remote_get
• Scrapping profiles.WordPress.org to read data
• Multiple API calls to api.WordPress.org
• Combine data so it can be presented
![Page 34: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/34.jpg)
Remote calls are bad!!!
![Page 35: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/35.jpg)
It’s not a front-end issue
![Page 36: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/36.jpg)
The solution
![Page 37: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/37.jpg)
Microservices• Microservices are small, autonomous services that
work together
• Small, and Focused on Doing One Thing Well
![Page 38: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/38.jpg)
Benefits• If WordPress breaks, the services still keep running
• Offload functionality from WordPress
• High level separation
• Ease of Deployment
• Different services can use different programming languages
![Page 39: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/39.jpg)
Benefits• Scale services that require more resources
• In general they have an (REST) API
• Reusable
• Other microservices could call the service to run a task
![Page 40: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/40.jpg)
How it works now• All logic in WordPress is gone and simple pipes the
calls
• Still enough remote calls but to a local server
• All calls are still being cached by WordPress
• Less code in WordPress means less notable breakage
![Page 41: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/41.jpg)
How it works now• Several small Node.js services
• All API based so easy to reuse
• Cronjobs are now actual cronjobs
• The node services handles things way faster
• Pushing new updates has become easier
![Page 42: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/42.jpg)
What happens withpoor quality
![Page 43: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/43.jpg)
Poor quality• Put your own standard on a project you took over
• Specially when it doesn’t add any value
• Quick fixes over the place because of cost
• Copy/pasted previous theme and put new functionality in there without removing unused ones
• Having random functionality that slows down the site without any benefit
![Page 44: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/44.jpg)
Client project• I had several clients in the past that call me for
small fixes
• Last case was having several session_start() calls when using Varnish
• Included functionality that wasn't used which was the main bottleneck
• Also having additional page caching through WordPress
![Page 45: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/45.jpg)
What went wrong• Multiple caches could speed up a bit but the
changes are high that it will not
• sessions/cookies are dangerous when using Varnish and it’s better to not use it at all
• A client made changes without having enough knowledge what the negative impact could be
![Page 46: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/46.jpg)
Conclusion
![Page 47: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/47.jpg)
Conclusion• Custom coding a theme is well worth the effort
• It doesn’t need to cost as much time
• Inform your customers about the decisions the want to make.
• Thing outside the box with microservices next to WordPress
![Page 48: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/48.jpg)
Marko Heijnen• Founder of CodeKitchen
• Core contributor for WordPress of 15 releases
• 1 of the organizers for WordCamp Belgrade
• Plugin developer of Tabify Edit Screen, Site Manager etc
![Page 49: Custom coded projects](https://reader031.vdocuments.us/reader031/viewer/2022022413/58ee21101a28ab62098b468b/html5/thumbnails/49.jpg)
Marko Heijnen@MarkoHeijnen [email protected] https://markoheijnen.com